前端技術週刊 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 的程式碼規範大家可以瞭解一下；

---