前端每週清單第 23 期：React 內部原理與實現，自定義基於 JavaScript 的 16 位虛擬機器

前端 前端每週清單 編輯：徐川 作者：王下邀月熊

前端每週清單專注前端領域內容，分為新聞熱點、開發教程、工程實踐、深度閱讀、開源專案、巔峰人生等欄目。關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每週清單。

新聞熱點

國內國外，前端最新動態

React 開源許可證風波：近日，Apache 基金會宣佈禁止使用包括 React 在內的， Facebook 帶附加條款的 BSD Licence的開源軟體，引發了部分使用者的擔憂；社群已經有很多人請願修改 React 開源許可證，同時 Facebook 另一開源專案 RocksDB 已經表示會在截止日期前修改許可證；React 專案維護者表示 Facebook 內部正在討論此事，我們也會持續跟蹤。

npm 5。3。0 釋出：自 5。x 版本釋出之後，npm 一直致力於提升版本迭代速度，儘可能地透過小的更新來修復 npm 存在的問題。而本週釋出的 5。3。0 版本為 npm ls 命令添加了 ——link 引數，並且為 npx 添加了更多的支援語言版本；此外該版本還修復了一系列版本控制上的問題。

Expo SDK v19。0。0 釋出：近日基於 React Native 0。46 版本的 Expo SDK v19。0。0 正式釋出，其大幅度更新了 Android 中 JavaScriptCore 的特性支援與效能表現；除此之外該版本還優化了開發者工具與文件，並且引入了語音識別、地理位置編碼、檔案系統、非同步載入資源以及 Android 應用的許可權管理等多個新的特性。

Angular 5。0。0-beta。0 以及 Angular 4。3。1 釋出：本週 Angular 5。0。0-beta。0 版本釋出， 其對於動畫以及懶載入模組進行了大幅最佳化；同時本週還發布了 Angular 4。3。1 以及 angular-cli 1。2。2 版本。

開發教程

步步為營，掌握基礎技能

WebRTC 實戰教程：本系列教程會帶你回顧，從構建點對點的基於 WebRTC 的資料、音訊與影片傳輸通道開始，到搭建適用於真實場景的多人聊天室中的檔案共享、影片操作以及螢幕共享等實踐。本系列教程旨在讓讀者構建清晰、直觀地 WebRTC 知識體系，能夠獨立地構建基於 WebRTC 的應用。本系列教程分為七個部分，依次是基礎概念講解、資料通道搭建、網路連通性診斷、音影片處理、影片操作、螢幕分享、檔案傳輸、釋出到生產環境等。

ES6 中的 JavaScript 工廠函式實現：本文歸屬於 Eric Elliott 釋出的 Composing Software 系列，介紹在 JavaScript ES6 語法背景下如何實現工廠函式。所謂工廠函式即是非類或者建構函式的，能幹會某個新建立物件的函式；工廠函式能夠簡化我們建立新物件的過程，本文即是詳細地介紹瞭如何實現工廠函式，也是一篇不錯的 ES6 函式語法講解；更多 JavaScript 相關資料參考https：//parg。co/bMI 。

基於 NGModules 與 Webpack 的 Angular 應用模組分割與懶載入：本文主要討論如何在 Angular 應用開發中利用 Webpack 與 NGModules 實現對於程式碼庫的模組分割，並且利用懶載入來載入非首屏內容，從而提升整體的應用響應效能。本文首先介紹了程式碼分割與懶載入相關的概念知識，然後介紹瞭如何搭建 Webpack 基礎環境，然後介紹了使用 NgModules 以及效能對比；更多 Webpack 相關資料參考 https：//parg。co/bVs 。

基於 React。js 的簡單資料視覺化：本文旨在介紹如何利用 React。js ，並且不借助任何第三方庫的幫助，來實現簡單的 SVG 線型圖。本文首先討論如何利用 Create React App 搭建簡單 React 專案，然後介紹了 SVG 的基礎語法以及如何建立模擬資料，最後介紹瞭如何進行邏輯程式碼分割並且編寫單獨的 LineChart 元件；更多 React 相關資料參考 https：//parg。co/bM1 。

使用 Apollo Server 快速開發基於 Node。js 的 GraphQL 服務端：Apollo Server 是由社群維護的開源 GraphQL 服務端，它支援目前主流的 Node。js HTTP 服務端框架：Express、Connect、Hapi、Koa、AWS Lambda、Restify 以及 Micro。本文首先介紹 Apollo Server 遵循著開放、簡單、高效能的原則，然後介紹了基於 Express 的基礎用法以及效能監控等內容；更多 GraphQL 相關資料參考 https：//parg。co/b1e 。

Vue。js 元件的實踐分享：本文是來自 Morningstar 的工程師，分享的他們利用 Vue。js 進行前端元件化開發時的實踐經驗；主要是它們對於 Vue。js 元件編寫的心得。作者首先介紹了元件不同生命週期回撥的含義，然後介紹了從簡單到複雜元件的狀態與資料管理，接下來介紹了 Slot 與 Minxin 在元件重用上的具體用法等內容；更多 Vue。js 相關資料參考 https：//parg。co/byL 。

工程實踐

立足實踐，提示實際水平

Redux 優先的路由模型：路由庫是構建任何複雜單頁應用的核心元件之一，如果你已經使用過 React 與 Redux 開發過 Web 應用，那麼對於 React Router 這個著名的路由庫並不陌生。不過 React Router 還是與介面層強耦合，而本文希望介紹以 Redux 為核心的路由解決方案，作者會深入淺出地介紹概念設計、核心程式碼編寫以及如何用不到一百行程式碼來編寫與元件框架相關的介面；更多 Redux 相關資料參考 https：//parg。co/bVQ 。

Angular 最佳實踐分享：作者在本文中分享自己在工作中總結出的 Angular 應用實踐，本文儘可能地避免官方的 Angular 樣式指南中提及的約定，而是著眼於呈現個人的經驗總結。本文依次介紹了型別定義、元件實踐、服務定義、模板使用等方面。

基於 JavaScript 的 Web 應用的端到端測試工具對比：本文回顧了常見的基於 JavaScript 的，用於對 Web 應用進行端到端測試的工具，並且對它們進行了簡單對比。本文首先探討了專案中應用端到端測試的意義，然後列舉了當前可用的基於 JavaScript 的介面自動化測試框架，然後比較了不同的端到端測試框架的流行程度與基本的程式碼片風格；更多 Web 測試相關資料參考https：//parg。co/bWd 。

重新設計的 Gitlab 導航：本文記述了 Gitlab 在重新設計應用導航欄過程中的討論與思索過程，是一篇不錯的瞭解使用者互動與產品設計的分享文章。本文首先介紹了對於導航欄應該包含的內容的分割，譬如分為全域性內容與上下文內容；然後介紹瞭如何針對兩個原型的設計理念，以及如何進行 A/B 測試以最終決定應用方案的過程。

學習 Redux 之前你應該瞭解的關於 React 的 8 件事：狀態管理是前端的難點之一，而 React 或類似的前端介面庫往往只是提供了簡單的元件內狀態管理，因此很多開發者還是會逐步轉向於 Redux 等專用的狀態管理工具；不過也有很多開發者是在並沒有真實碰到需要解決大規模可擴充套件的狀態管理問題時，或者沒有仔細瞭解過 React 內建的狀態管理正規化時就盲目地去學習了 Redux。而本文則依次介紹了本地狀態管理基礎、函式式本地狀態、狀態提升、高階元件、Context、狀態元件與無狀態元件等內容；更多 React 相關資料參考 https：//parg。co/bM1 。

深度閱讀

深度思考，昇華開發智慧

美團點評收銀臺前端可用性保障實踐：本文主要討論的是前端可用性相關話題，以在美團點評移動端網頁收銀臺的實踐為例，講解收銀臺前端是如何保障可用性的。本文依次討論瞭如何定義前端服務可用性、如何衡量前端服務可用性、哪裡容易出問題、怎樣保障才能被信服等內容。

Web 開發中的十大常用工具：每年都會湧現出很多優秀的 Web 開發輔助工具，而本文是來自於 Envato 的工程師分享的他們開發中常用的十個工具。本文依次介紹了可用於生成網格的 Grid。Guide、類似於 BootStrap 的樣式庫 Foundation、線上程式碼編輯與共享工具 CodePen、jQuery 外掛聚集地 Unheap、自動介面重新整理工具 LivePage、整頁抓取工具 FullPage Screen Capture、字型輔助 WhatFont、Node/Npm、移動端速度測試、響應式速度測試工具等。

JavaScript Binary AST 提案：隨著 Web 應用體積的不斷增加，頁面啟動時間逐漸成為了應用效能的主要瓶頸之一；我們可以透過多種方式來快取程式碼，但是對於大型程式碼庫的解析卻難以直觀解決。譬如在現代的筆記本上，Chrome 在載入 Facebook。com 的時候需要花費 10% 到 15% 的時間來解析 JavaScript 程式碼。本文介紹了由多位工程師提出的旨在提升 JavaScript 解析速度的 Binary AST 方案，本文介紹了當前解析中的瓶頸所在，並且給出了相應的解決建議。

React 內部原理與實現：作者會在本系列五部分的文章中介紹 React 內部原理，並且帶著讀者一步一步重造出簡單的類 React 框架；透過閱讀這幾篇文章，我們可以瞭解 React 的工作機制，譬如元件的完整生命週期等等。本系列文章依次介紹了基礎渲染過程、componentWillMount 與 componentDidMount、基礎更新、setState 與事務等內容；更多 React 相關資料參考https：//parg。co/bM1 。

自定義基於 JavaScript 的 16 位虛擬機器：本文介紹瞭如何利用 JavaScript 自定義 16 位虛擬機器，主要包括如何設計某個簡單的組合語言、如何構建某個編譯器能夠將 *。asm 檔案編譯為可執行格式、如何構建某個能夠模擬記憶體、CPU 以及部分 I/O 操作的虛擬機器。文章內容依次介紹了虛擬硬體的基礎、限制、組合語言、編譯器、偵錯程式、編碼與解碼等內容；更多 JavaScript 相關資料參考 https：//parg。co/bMI 。

開源專案

樂於分享，共推前端發展

Aurora：Aurora 是基於 Vue 2。2。0 版的元件庫， 提供了常見的網格佈局、按鈕、表單域、分頁、模態視窗等元件。

San：San 是百度 EFE 團隊出品的 Web MVVM 元件庫，其具備體積小巧、引用方便、相容性良好的特性，提供了高效能檢視、元件反解、自由管理模組等功能。

Wade：Wade 是輕量級、高效能的 JavaScript 搜尋庫，Wade 會在構建階段自動地為輸入陣列中的每個字串的字元構建反向索引，然後在搜尋時候快速返回使用者輸入關鍵字對應地下標；Wade 優勢在於對於相同的資料集進行多次搜尋時能夠避免冗餘的遍歷。

Slate：Slate 是基於 MarkDown 的介面文件生成工具，它能夠從 MarkDown 檔案配置中讀取介面資訊並且生成漂亮、智慧、響應式的線上單頁介面文件頁面。

swagger-decorator：swagger-decorator 是旨在一處註解多處使用的 JavaScript & Node。js 應用中實體類與方法註解庫，其能夠用於實體類生成與校驗、Sequelize ORM 實體類生成、面向 Koa 的路由註解與 Swagger 文件自動生成的場景。

巔峰人生

前端之巔

「前端之巔」是InfoQ旗下關注前端技術的垂直社群，加入前端之巔學習群請關注「前端之巔」公眾號後回覆“加群”。投稿請發郵件到editors@cn。infoq。com，註明“前端之巔投稿”。