前端技術週刊 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 的代碼規範你們能夠了解一下；

---