前端技术周刊 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 的代码规范你们能够了解一下；

---