20190907 前端开发日报

Vue 3.0:更快、更小、让开发者更轻松;【前端词典】11 个 CSS 知识搭配 11 个 JS 特性 (实用合集);学会这些 JS 小技巧,提升编码幸福度;几行代码就能完成 web 组件的数据绑定;深入理解Node.js 中的进程与线程;Vuex+localStorage数据状态持久化;Vue js 如何使用 Socket IO ?;编写一个自己的webpack插件plugin

  1. Vue 3.0:更快、更小、让开发者更轻松 在11月14日-16日于多伦多举办的 VueConf TO 2018 大会上,尤雨溪发表了名为 “ Vue 3.0 Updates ” 的主题演讲,对 Vue 3.0 的更新计划、方向进行了详细阐述。 可以看到,Vue 3.0 将会: 1、更快 Virtual DOM 完全重写,mounting & patching 提速 100% ; 更多编译时(compile-time)提醒以减少 r...
  2. 【前端词典】11 个 CSS 知识搭配 11 个 JS 特性 (实用合集) 这篇文章我会介绍 11 在开发过程中经常遇到的 CSS 相关知识点,以及 11 个有趣亦实用的 JavaScript 特性。 这些都是我在日常开发中总结而来,想必于你也是有或多或少的帮助。 文中的代码发布在 gitHub: github.com/wanqihua/bl… ,想了解的朋友可以前往。 11 个常见的 CSS 知识点 声明,这里也包含了部分 CSS...
  3. 学会这些 JS 小技巧,提升编码幸福度 本文主要介绍一些 JS 中用到的小技巧,可以在日常 Coding 中提升幸福度~ 类型强制转换 string 强制转换为数字 可以用 *1 来转化为数字 (实际上是调用 .valueOf 方法) 然后使用 Number.isNaN 来判断是否为 NaN ,或者使用 a !== a 来判断是否为 NaN ,因为 NaN !== NaN  复制代码 '32'*1// 32 'ds'*1/...
  4. 几行代码就能完成 Web 组件的数据绑定 这不是什么难事,一般来说没必要动用虚拟 DOM。 今年早些时候我写了一篇文章,声称 Web 组件最终将取代前端框架 。 这篇文章引起了很多争议,这大大出乎我的意料,但也让我收获良多。有很多人同意我的观点,也有很多人持否定态度,甚至有人觉得我根本就是脑子进水,应该永远禁止我再写代码了。总的来说,争论的双...
  5. 深入理解Node.js 中的进程与线程 进程 与 线程 是一个程序员的必知概念,面试经常被问及,但是一些文章内容只是讲讲理论知识,可能一些小伙伴并没有真的理解,在实际开发中应用也比较少。本篇文章除了介绍概念,通过Node.js 的角度讲解 进程 与 线程 ,并且讲解一些在项目中的实战的应用,让你不仅能迎战面试官还可以在实战中完美应用。 文章导览 ...
  6. Vuex+localStorage数据状态持久化 在前面文章中,我们详细的讲述了Vuex相关的知识,没有了解的小伙伴可以先去了解一波: 《Vuex是什么?Vuex能做什么?Vuex怎么使用?》 这篇文章主要是讲讲如何使Vuex数据持久化? 顾名思义,浏览器想要数据持久化,必须用到localStorage或者sessionStorage,可能还有不知道这两个东西是干什么的小伙伴,简...
  7. Vue js 如何使用 Socket IO ? 在很多需求业务中,都需要浏览器和服务器实时通信来实现功能,比如:扫码登录(扫码后,手机确认登录,PC网页完成登录并跳转)、订单语言提醒等,这些都是建立在两端实时通信的基础上的。对前端而言,来实现浏览器和服务器实时通信,最好的选择就是Socket.IO库,能够快速的实现两端实时通信功能。 1、什么是 S...
  8. 编写一个自己的webpack插件plugin 插件是 webpack 的支柱功能。 webpack 自身也是构建于,你在 webpack 配置中用到的相同的插件系统之上!插件目的在于解决 loader 无法实现的其他事。 要想写好插件就要知道 Webpack 中的两个比较核心的概念 compiler 、 compilation 、 tapable 。在webpack 编译流程已经都要记录。 Webpack 通过 Plugin 机制让其更加灵...
  9. 如何拿到9家大厂的前端校招offer 我就读于北京理工大学软件工程专业,是一名大四学生。从大一开始投入以前端为主的全栈开发,独立开发过多个中型和小型项目,是 佬铁|宿舍市集 小程序的社区创始人及独立项目负责人。 在学校里读书的时候,我就是一个闲不住的人。最近因为一个偶然的契机,接触到了校招季,最后定下了本科毕业就工作的规划目标。 于...
  10. 使用 React Context, Hooks, Immer, Golang 创建一个TodoList上周末在家没啥事, 想写点东西,一时不知道写什么好。 然后就想起来一个去了Airbnb 的同学, 说Airbnb 的面试风格是以实操为主,她面了8轮, 轮轮都是写代码(2018年), 令人十分害怕。
  11. JavaScript的浅拷贝 VS 深拷贝拷贝,我们常常用在把A对象的属性copy到B对象,这样B对象就拥有了A对象的属性。当B对象的属性不是基本数据类型,而是数组或者对象的时候,就会出现浅拷贝和深拷贝的区别,具体看下文的解释:
  12. JavaScript数据类型(六)多种数据类型判断方法 在ECMAScript规范中,共定义了7种数据类型,分为基本数据类型和引用类型两大类,如下所示: 基本类型: Null、Undefined、Symbol(ES6)、Number、Boolean、String 引用类型: Obeject、Array、Date 等等 基本类型也称为简单类型,由于其占据空间固定,是简单的数据段,为了便于提升变量查询速度,将其存储...
  13. 记一次常规的 gitflow 工作流 先简单说一下常见的git 分支管理策略 1.集中式工作流:类似于SVN管理方式,只有一个master分支,每个人将自己的代码提交到master上。 2.feature工作流:有一个主分支默认为master分支。每个人开发的时候基于master分支新建feature分支,然后提交到中央仓库,供大家code-review,通过之后merge进master分支。 ...
  14. webpack编译流程 现在前端开发基本上都会用到 react 、 vue ,用到了前端 mvc 、 mvvm 框架,基本上都会涉及到打包发布,打包常用的工具就是 webpack 、 gulp 等等。经常使用自然也要了解一些他大致的流程也会方便使用。 首先要理解webpack中比较核心的概念: Entry : 指定webpack开始构建的入口模块,从该模块开始构建并计算出...
  15. 浏览器渲染原理 (二)html中的css、javascript、dom之间的解析和相互阻塞关系 我们在看一些前端优化规则的时候,比如雅虎军规等等,都有看到 style 写在 head 中,但是外链 script 写在 body 的最后,以优化性能,都知道应该怎么做,但是不知道其中的原理。 如果还不知道浏览器渲染的原理的,看一看浏览器渲染原理这一篇文章。其实这个就是考验大家对 html 中的 css、javascript、dom 之间的解析和...
  16. [精读源码系列]Vue中DOM的异步更新及Vue.nextTick()原理解析 vue的DOM更新时异步执行的,只要监听到数据变化,Vue将开启一个队列,并缓存在同一事件循环中发生的所有数据变更,如果同一个Watcher被多次触发,只会被推入到队列中一次,避免了不必要的重复计算和频繁的DOM操作,然后在下一个事件循环"tick"中(注意下一个tick可能是当前的tick微任务执行阶段执行,也可能在下一个tic...
  17. CSS Grid:页面网格布局从未如此简单如果pc端的两列布局、表格布局、圣杯布局等已经让你心力交瘁!那么移动端更加五花八门的布局肯定也是让你吃尽苦头!table不知道你用过没?bootstrap用过没?antd用过没?
  18. 关于js回调和promise,async/await的理解 const a = function() { setTimeout(function() { console.log(1) }, 2000) } a() console.log(2) //执行结果: 2 1 复制代码 setTimeout模拟异步回调函数,假设一个回调函数需要2秒猜返回结果。可以看到a函数调用时,并没有立马打印出结果就执行下一行打印语句了。 js是单线程的,是从上至下执行语句的,为...
  19. JSBridge的实现原理HybridAPP 通过JSBridge提供调用Native功能的接口,让混合开发中的『前端部分』可以方便地使用地址位置、摄像头甚至支付等 Native 功能。它的核心是 构建 Native 和非 Native 间消息通信的通道,而且是 双向通信...
  20. 丑数求解(js 实现) 什么是丑数 丑数指的是只包含 2、3、5 这三个质因子的数,比如 6、8、12 等,另外我们会将 1 作为第一个丑数。知道什么是丑数之后,现在有一个要求:指定一个正整数 N ,求从 1 开始的第 N 个丑数值为多少。 怎么判断丑数 在求解问题前,我们需要知道如何判断一个数是不是丑数。我们知道丑数只包含 2、3、5 这三个...
  21. 山寨一个 redux本文主要是说一说怎么通过自己的理解来实现一个“简易”的redux,目的不是copy一个redux出来,而是动手实现redux的核心功能,从而帮助我们理解和使用redux。
  22. GraphQL 项目中的前端 mock 方案 在使用 GraphQL (以下简称 gql)的前端项目中,往往需要等待后台同学定义好 Schema 并架设好 Playground 以后才能进行联调。如果后台同学阻塞了,前端只能被动等待。如果对于 gql 项目来说也能够和 REST 一样有一套 mock 方案就好了。经过一系列实践,我选择了 mocker-api 加 Apollo 的方案来实现。 mocker-api m...
  23. 超实用技术面试手册,从工作申请、面试考题再到优势谈判,GitHub 获 30000 星 安妮 发自 凹非寺 量子位 出品 | 公众号 QbitAI 技术人员求职面试,单刷leetcode上的大厂题库可能还不够。 简历怎么写才能吸引HR的眼光,可能会被技术老大问到哪些常见问题,拿到Offer之后怎样才能让自己的优势最大化然后优中选优? 面对这些赤果果的问题,目前就职于Facebook的新加坡小哥Y...
  24. webpack中的hash、chunkhash、contenthash分别是什么 在 webpack 中有三种 hash 可以配置,分别是 hash 、 chunkhash 、 contenthash 他们是不对的可以针对不同的配置,首相要搞清楚这三种的 hash 的区别,什么场景下,适合用哪种。 hash所有文件哈希值相同,只要改变内容跟之前的不一致,所有哈希值都改变,没有做到缓存意义 chunkhash当有多个 chunk ,形成多个 b...
  25. 使用 GitHub,知道这些就够了 只要掌握了下面的常用命令,基本上用使用 github 就没有问题。github 有两种认证方式,一种是通过 ssh 私钥的方式,一种通过 https 的账号名和密码。ssh 方式需要创建本地秘钥并且添加到个github 上,操作起来略显麻烦,本篇完全介绍以 https 方式管理。 主要原理说明 git 的管理依赖于在你本地...
  26. webpack中的bundle、module、chunk分别是什么 bundle 、 module 、 chunk 都是 webpack 中的术语,下面就一个一个介绍他们的定义是什么,怎么产生的。 Bundle Bundle是由多个不同的模块生成,bundles 包含了早已经过加载和编译的最终源文件版本。 **Bundle 分离(Bundle Splitting):**这个流程提供了一个优化 build 的方法,允许 webpack 为应用程序生成多个 ...

关注github前端日报 订阅精彩文章

前端日报栏目数据来自码农头条,每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等,为开发者提供动力,如果觉得内容对你有用,记得分享给你的小伙伴。进入码农头条查看更多

原文:20190907 前端开发日报 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/fe-daily-20190907.html)

发表评论

请登录后发表评论: