前言
本週開始，我開始總結一週閱讀或者參考過的文章給大家，都是精挑細選出來覺得非常好的文章。我看過一些 coder 寫的技術週刊，基本都是給一個文章的連結和標題，然後給一段原文引用就沒了，我在想，我既然讀了，而且我還要介紹給大家，那我就有責任給大家總結出來文章的閱讀姿勢，讀完我們起碼要掌握或者瞭解什麼東西。
該系列週刊的結構如下：
- 前言 老生常談，一些見解和想法
- 本週話題 因為話題是集中性的，所有我會把同類的文章歸屬到這個分類下面
- 基礎 一些我認為比較基礎性的文章
- 實戰 一些在實踐和應用裡面，有應用價值的文章
- 思考 一些我認為，值得我們花費時間去斟酌和思考的文章
最近主要開始研究 Vue 的底層原理，包括先通讀了一遍掘金小冊上的《剖析 Vue.js 》內部執行機制，感覺還是講得很不清楚，我想自己寫一本講解 Vue 實現原理的小書，所以分解成幾個部分去深入，本週的主要是「MVVM」資料雙向繫結的原理和實現。
本週話題 1：「Event Loop」
《一篇文章教會你 Event loop——瀏覽器和 Node》
大部分的文章都只闡述了瀏覽器或者Node二者之一，沒有對比的去看的話，認識總是淺一點。所以才有了這篇整理了百家之長的文章。
《JavaScript 執行機制詳解：再談 Event Loop》
阮一峰老師談了對 Event Loop 的理解
簡潔明白又詳細地闡述了 Node 中定時器執行的機制
總結閱讀姿勢：
- 瞭解瀏覽器和 Node.js 中的 Event Loop，並比較兩者的異同；
- 瞭解瀏覽器和 Node.js 中的定時器分別有哪些；
- 瞭解定時器執行的先後順序；
本週話題 2：「MVVM」
為了便於說明原理與實現，本文相關程式碼主要摘自vue原始碼, 並進行了簡化改造，相對較簡陋，並未考慮到陣列的處理、資料的迴圈依賴等。
閱讀姿勢：
- 瞭解 Vue 的雙向資料繫結原理以及核心程式碼模組；
- 瞭解如何實現雙向繫結
備註：
- 下面那篇文章會更基本和簡單一些，建議先看下面的；
Vue.js 最核心的功能有兩個，一是響應式的資料繫結系統，二是元件系統。本文僅探究雙向繫結是怎樣實現的。先講涉及的知識點，再用簡化得不能再簡化的程式碼實現一個簡單的 hello world 示例。
閱讀姿勢：
- 瞭解響應式的資料繫結系統的構成：（1）系統構造器；（2）資料的雙向繫結；（3）劫持 DOM 物件上繫結的資料；（4）訂閱釋出者模式；（5）檢視的初始化和更新；
- 瞭解程式碼實現的邏輯；
- 最後能自己擼一份改進版程式碼出來；另外作者的原始碼也是分析別人的，其中只能劫持一級 DOM 物件上的資料，如果巢狀多層你就會發現行不通了，所以讀者們自己來改進一下
nodeToFragment環節，以實現可以對多層 DOM 物件實現資料劫持；
分別用 jQuery 和純 JavaScript 來實現雙向資料繫結
閱讀姿勢：
- 瞭解雙向資料繫結的概念：既可以將物件屬性繫結到 UI，也能通過輸入元件值的改變來反饋到相對於的物件屬性；
- 瞭解雙向資料繫結的底層思想：（1）識別 UI 元素繫結相應的元素；（2）需要監視屬性和 UI 元素的變化；（3）將變化傳播到繫結的物件和元素；
- 瞭解釋出者-訂閱者模式；
基礎
操作DOM的成本很高，不要輕易去操作DOM。尤其是React、vue等MV*框架的出現，資料驅動檢視的模式越發深入人心，jQuery時代提供的強大便利地操作DOM的API在前端工程裡用的越來越少。刨根問底，這裡說的成本，到底高在哪兒呢？
閱讀姿勢：
- 什麼是 DOM；
- Python也可以訪問 DOM；
- 瀏覽器渲染過程
- 合適觸發重排與重繪；
- 強調 css 放在頭部，js 放在尾部的原因；
- 瞭解首屏優化技能；
《github 中 tag 與 release 的建立以及兩者的區別》
本文辨析在參與開源專案時會遇到的tag與release的概念區別與聯絡，並比較兩者的建立方法。
閱讀姿勢：
- tag 和 release 建立方式和區別
- tag 是 git 中的概念和實現；release 是 Github、碼雲等原始碼託管商所提供的更高層的概念和實現；
本文總結了3種常見的實現web應用會話管理的方式，這些內容可以幫助加深對web中使用者登入機制的理解，對實際專案開發也有參考價值，歡迎閱讀與指正。
閱讀姿勢：
- 瞭解 3 種常見的 Web 會話管理方式、應用場景及每種方式的優缺點；
- 擴充套件瞭解如何在服務端實現：對登入憑證做數字簽名後用對稱加密演算法做加密處理；
- 擴充套件瞭解 3 個層次的 Web 安全問題：
- 3 種方式的會話管理憑證(sessionID、ticket、token)本身的安全性
- 客戶端和服務端的 http 過程的安全性
- CSRF，跨站請求偽造
- 擴充套件瞭解 JWT(json-web-token) 標準 其定義了 token-based 的管理方式該如何實現，規定了 token 應該包含的標準內容以及 token 生成過程和方法 可參閱 jwt.io/#libraries-…
- 原作者關於 JWT 更多的文章：
- JWT 實現 token-based 會話管理：www.cnblogs.com/lyzg/p/6028…
- 看圖理解 JWT 如何用於單點登入：www.cnblogs.com/lyzg/p/6132…
在提交程式碼的時候，在提交資訊裡面新增表情，同時也可以在專案的ReadMe.md檔案裡面使用表情。除此之外，當然還有專案在GitHub上的wiki頁面，總之在GitHub的頁面上，都可以使用。
閱讀姿勢：
- 在 mac 上的編輯器使用 emoji 很方便，在 windows 上就不那麼方便了，但可以使用以下連結給出的表情代號： www.webpagefx.com/tools/emoji…
實戰
自從webpack4釋出之後，大家都不敢冒然升級，主要是要去踩坑。如果你有想衝動升級的話，這篇踩坑的總結值得看看。
閱讀姿勢：
- 注意 node 版本的支援；
- 善用 mode 模式優化配置檔案；
- optimization 屬性的運用和實踐；
- ExtractTextWebpackPlugin 外掛調整，據其他教程所示，可用最新的 beta 版作為應急方案；
- 瞭解不同模式下預設啟用的配置和外掛；
passive事件監聽，是DOM規範的新特性，它可以讓開發者選擇不阻止touch和wheel事件監聽，從而獲得更好的滾動效能。
閱讀姿勢：
- 瞭解為什麼要使用 passive 事件監聽；
- 瞭解該特性被支援的瀏覽器版本；
- 瞭解如何除錯、衡量滾動效能；
思考
《關於 Google 釋出的 JS 程式碼規範，你需要了解什麼？》
大部分的文章都只闡述了瀏覽器或者Node二者之一，沒有對比的去看的話，認識總是淺一點。所以才有了這篇整理了百家之長的文章。
閱讀姿勢：
- Google 和 Airbnb 的程式碼規範大家可以瞭解一下；
