前言

本周开始,我开始总结一周阅读或者参考过的文章给大家,都是精挑细选出来觉得非常好的文章。我看过一些 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 生成过程和方法
     可参阅 https://jwt.io/#libraries-io
  5. 原作者关于 JWT 更多的文章:

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

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

阅读姿势:

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

实战

《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 的代码规范大家可以了解一下;


微信公众号