前端技术周刊 Apr 15th, 2018

前言

本周开始，我开始总结一周阅读或者参考过的文章给大家，都是精挑细选出来觉得非常好的文章。我看过一些 coder 写的技术周刊，基本都是给一个文章的链接和标题，然后给一段原文引用就没了，我在想，我既然读了，而且我还要介绍给大家，那我就有责任给大家总结出来文章的阅读姿势，读完我们起码要掌握或者了解什么东西。

该系列周刊的结构如下：

• 前言 老生常谈，一些见解和想法
• 本周话题 因为话题是集中性的，所有我会把同类的文章归属到这个分类下面
• 基础 一些我认为比较基础性的文章
• 实战 一些在实践和应用里面，有应用价值的文章
• 思考 一些我认为，值得我们花费时间去斟酌和思考的文章

最近主要开始研究 Vue 的底层原理，包括先通读了一遍掘金小册上的《剖析 Vue.js 》内部运行机制，感觉还是讲得很不清楚，我想自己写一本讲解 Vue 实现原理的小书，所以分解成几个部分去深入，本周的主要是「MVVM」数据双向绑定的原理和实现。

本周话题 1：「Event Loop」

《一篇文章教会你 Event loop——浏览器和 Node》

大部分的文章都只阐述了浏览器或者Node二者之一，没有对比的去看的话，认识总是浅一点。所以才有了这篇整理了百家之长的文章。

《JavaScript 运行机制详解：再谈 Event Loop》

阮一峰老师谈了对 Event Loop 的理解

《Node 定时器详解》

简洁明白又详细地阐述了 Node 中定时器执行的机制

总结阅读姿势：

1. 了解浏览器和 Node.js 中的 Event Loop，并比较两者的异同；
2. 了解浏览器和 Node.js 中的定时器分别有哪些；
3. 了解定时器执行的先后顺序；

本周话题 2：「MVVM」

《剖析Vue实现原理 - 如何实现双向绑定mvvm》

为了便于说明原理与实现，本文相关代码主要摘自vue源码, 并进行了简化改造，相对较简陋，并未考虑到数组的处理、数据的循环依赖等。

阅读姿势：

1. 了解 Vue 的双向数据绑定原理以及核心代码模块；
2. 了解如何实现双向绑定

备注：

1. 下面那篇文章会更基本和简单一些，建议先看下面的；

《Vue.js双向绑定的实现原理》

Vue.js 最核心的功能有两个，一是响应式的数据绑定系统，二是组件系统。本文仅探究双向绑定是怎样实现的。先讲涉及的知识点，再用简化得不能再简化的代码实现一个简单的 hello world 示例。

阅读姿势：

1. 了解响应式的数据绑定系统的构成：（1）系统构造器；（2）数据的双向绑定；（3）劫持 DOM 对象上绑定的数据；（4）订阅发布者模式；（5）视图的初始化和更新；
2. 了解代码实现的逻辑；
3. 最后能自己撸一份改进版代码出来；另外作者的源码也是分析别人的，其中只能劫持一级 DOM 对象上的数据，如果嵌套多层你就会发现行不通了，所以读者们自己来改进一下 nodeToFragment 环节，以实现可以对多层 DOM 对象实现数据劫持；

《谈谈JavaScript中的双向数据绑定》

分别用 jQuery 和纯 JavaScript 来实现双向数据绑定

阅读姿势：

1. 了解双向数据绑定的概念：既可以将对象属性绑定到 UI，也能通过输入组件值的改变来反馈到相对于的对象属性；
2. 了解双向数据绑定的底层思想：（1）识别 UI 元素绑定相应的元素；（2）需要监视属性和 UI 元素的变化；（3）将变化传播到绑定的对象和元素；
3. 了解发布者-订阅者模式；

基础

《DOM 操作成本到底高在哪儿？》

操作DOM的成本很高，不要轻易去操作DOM。尤其是React、vue等MV*框架的出现，数据驱动视图的模式越发深入人心，jQuery时代提供的强大便利地操作DOM的API在前端工程里用的越来越少。刨根问底，这里说的成本，到底高在哪儿呢？

阅读姿势：

1. 什么是 DOM；
2. Python也可以访问 DOM；
3. 浏览器渲染过程
4. 合适触发重排与重绘；
5. 强调 css 放在头部，js 放在尾部的原因；
6. 了解首屏优化技能；

《github 中 tag 与 release 的创建以及两者的区别》

本文辨析在参与开源项目时会遇到的tag与release的概念区别与联系，并比较两者的创建方法。

阅读姿势：

1. tag 和 release 创建方式和区别
2. tag 是 git 中的概念和实现；release 是 Github、码云等源码托管商所提供的更高层的概念和实现；

《3 种 Web 会话管理的方式》

本文总结了3种常见的实现web应用会话管理的方式，这些内容可以帮助加深对web中用户登录机制的理解，对实际项目开发也有参考价值，欢迎阅读与指正。

阅读姿势：

1. 了解 3 种常见的 Web 会话管理方式、应用场景及每种方式的优缺点；
2. 扩展了解如何在服务端实现：对登录凭证做数字签名后用对称加密算法做加密处理；
3. 扩展了解 3 个层次的 Web 安全问题：

• 3 种方式的会话管理凭证(sessionID、ticket、token)本身的安全性
• 客户端和服务端的 http 过程的安全性
• CSRF，跨站请求伪造

4. 扩展了解 JWT(json-web-token) 标准  其定义了 token-based 的管理方式该如何实现，规定了 token 应该包含的标准内容以及 token 生成过程和方法  可参阅 jwt.io/#libraries-…
5. 原作者关于 JWT 更多的文章：

• JWT 实现 token-based 会话管理：www.cnblogs.com/lyzg/p/6028…
• 看图理解 JWT 如何用于单点登录：www.cnblogs.com/lyzg/p/6132…

《代码提交的时候可以插入表情了》

在提交代码的时候，在提交信息里面添加表情，同时也可以在项目的ReadMe.md文件里面使用表情。除此之外，当然还有项目在GitHub上的wiki页面，总之在GitHub的页面上，都可以使用。

阅读姿势：

1. 在 mac 上的编辑器使用 emoji 很方便，在 windows 上就不那么方便了，但可以使用以下链接给出的表情代号： www.webpagefx.com/tools/emoji…

实战

《webpack 4 升级完全指南》

自从webpack4发布之后，大家都不敢冒然升级，主要是要去踩坑。如果你有想冲动升级的话，这篇踩坑的总结值得看看。

阅读姿势：

1. 注意 node 版本的支持；
2. 善用 mode 模式优化配置文件；
3. optimization 属性的运用和实践；
4. ExtractTextWebpackPlugin 插件调整，据其他教程所示，可用最新的 beta 版作为应急方案；
5. 了解不同模式下默认启用的配置和插件；

《passive 事件监听》

passive事件监听，是DOM规范的新特性，它可以让开发者选择不阻止touch和wheel事件监听，从而获得更好的滚动性能。

阅读姿势：

1. 了解为什么要使用 passive 事件监听；
2. 了解该特性被支持的浏览器版本；
3. 了解如何调试、衡量滚动性能；

思考

《关于 Google 发布的 JS 代码规范，你需要了解什么？》

大部分的文章都只阐述了浏览器或者Node二者之一，没有对比的去看的话，认识总是浅一点。所以才有了这篇整理了百家之长的文章。

阅读姿势：

1. Google 和 Airbnb 的代码规范大家可以了解一下；

---