前端每周清單第 21 期：JS 項目開發樣式指南；基於 Vue 的分角色許可權驗證；深入 React.js 內部原理

前端每周清單第 21 期：JS 項目開發樣式指南；基於 Vue 的分角色許可權驗證；深入 React.js 內部原理 為InfoQ中文站特供稿件，首發地址為前端之巔公眾號；如需轉載，請與InfoQ中文站聯繫。從屬於筆者的 Web 前端入門與工程實踐的前端每周清單系列系列；部分文章需要自備梯子。

前端每周清單第 21 期：JS 項目開發樣式指南；基於 Vue 的分角色許可權驗證；深入 React.js 內部原理

前端 前端每周清單

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

新聞熱點

國內國外，前端最新動態

• Let's Encrypt 宣布將在 2018 年一月提供通配符證書服務：自從 2015 年上線以來，Let"s Encrypt 已經服務於數百萬的在線站點，並且大幅度提升了整個 Web 的加密流量佔比。近日 Let"s Encrypt 宣布將會在來年一月份提供通配符證書服務；某個通配符證書能夠應用於某個根站點下的任意數目的子站點，從而幫助網站管理者更加方便地使用單證書來為多個子站點添加 HTTPS 部署支持。( https://parg.co/bIp )
• 百度 Web 生態構建：發布基於 Vue 的 PWA 解決方案 LAVAS；將全面支持 Web AR ：在 Baidu Create 2017 Web 生態分論壇上，百度搜索正式對外發布基於 Vue 的 PWA 解決方案 LAVAS，同時宣布將全面支持 Web AR，此外，百度還對 MIP 的架構與原理、HTTPS 等技術進行了深度解析。( https://parg.co/bIZ )
• Webpack import 即將支持非同步導入 CSS：一個月前 Tobias Koppers 撰文討論了 Webpack 對於 CSS 處理的考慮，計劃將 CSS 代碼與 JS 同等考慮；即開發者可以利用代碼分割插件構建的動態代碼塊來非同步載入 CSS 代碼。而本文則是詳細討論了該方案以及對於未來代碼分割、首屏載入可能造成的影響，並且提出了目前狀態下基於 React Universal Component 與 Webpack Flush Chunks 可以實現的非同步 CSS 載入方案。( https://parg.co/bI8 )
• MobX 3.2.0 版本發布：MobX 內置了一些全局狀態來輔助追蹤與調度 Observable 或者 Reaction，在近日發布的 3.2.0 版本中，MobX 能夠自動監測應用內是否存在多個 MobX 實例，並且給出響應的告警；更多 MobX 相關資料參考https://parg.co/bVC 。( https://parg.co/bIk )

開發教程

步步為營，掌握基礎技能

• Styled-Components 實戰：Styled-Components 是由 Max Stoiber 與 Glen Maddern 創建的新的 CSS-in-JS 工具庫，能夠幫你組織 React 或者 React Native 項目中的樣式聲明。本文則著眼於介紹 Styled-Components 的設計理念與基本用法，首先介紹了 Styled-Components 的設計目標，然後介紹了如何使用 Styled-Components 來創建可復用的組件或者創建全局樣式聲明。( https://parg.co/bev )
• React Redux 概念與工作流清單：本文包含了一張關於 Redux 概念與工作流的清單圖解以及較為詳細地漸進式 Redux 基礎概念介紹。本文首先概述了項目開發中使用 Redux 的意義以及 Redux 相關的技術棧，然後介紹了 Reudx 中 Store 的含義與如何與 Immutable 協同使用；接下來本文介紹了 React Redux 應用中組件的層次劃分，如何定義使用 Action、ActionCreator、Reducer 等等；更多 Redux 相關資料參考 https://parg.co/bVQ 。（ https://parg.co/bej ）
• 基於 Vue.js 2 的分角色許可權驗證：本文作者因為 Vue.js 平滑的學習曲線與易於理解的官方文檔而傾向於使用 Vue.js 進行前端開發工作，本文即是作者介紹如何利用 Vue.js 2 來為項目添加基於角色的許可權控制功能。作者在本文中首先介紹了基於角色的許可權控制的概念與設計，然後討論了如何使用 vue-cli 來構建基礎項目架構並且按特徵劃定目錄層次，最後介紹了關鍵部分的代碼實現以及如何使用 Vuex 來管理應用狀態；更多 Vue 相關資料參考 https://parg.co/byL 。( https://parg.co/bIs )
• 試用新的 Angular HTTP Client：在 Angular 4.3.0-rc.0 版本在，HTTP Client API 得到了極大的改造與提升，本文即是介紹新版本的 Angular HTTP Client 的用法。在新版本的 HTTP Client 中，其默認假設以 JSON 格式進行返回值解析，並且引入了靈活的 Interceptor 以動態操作請求頭或者響應體；同時新版本的 HTTP Client API 為上傳與下載這些耗時操作提供了實時進度反饋回調，以方便開發者進行調試或者反饋給用戶。( https://parg.co/bIV )
• 基於 Vue.js 與 Laravel 構建實時儀錶盤：本文是來自 Spatie 的工程師，介紹基於 Laravel 與 Vue.js 構建，實時的隊伍與事件信息展示面板的實踐總結。本文首先介紹了歷史項目的不足以及目前項目的設計考量，然後討論了前端網格布局的解決方案。接下來作者分別介紹了服務端基於 Laravel 與客戶端基於 Vue.js 的關鍵代碼的實現；更多 Vue 相關資料參考 https://parg.co/byL 。( https://parg.co/bIJ )

工程實踐

立足實踐，提示實際水平

• 介面安全自檢清單：本文涵蓋了項目介面在設計、測試與發布階段應該注意的安全事項。本清單首先闡述了應該使用標準的許可權控制方式 JWT 或者 OAuth 來替代基礎的 Basic Auth，然後分別討論了 JWT 與 OAuth 的設計要點。接下來本清單還列舉了對於接入過濾與防 DDoS 攻擊、使用合適的 HTTP 方法並且對用戶輸入進行有效校驗、避免關鍵資源外泄、設置合理的響應頭等等內容。( https://github.com/shieldfy/A... )
• JavaScript 項目開發樣式指南：開啟新的項目就好像在綠地上肆意撒歡，此時的開發者擁有極大的自由；不過如果缺乏良好的基石，未來的項目維護可能會成為你的夢魘。本文即搜集了來自 Hive 研發團隊的 JavaScript 項目開發指南，涵蓋了 Git、文檔規範、環境變數控制、依賴管理、測試、文件結構與命名、代碼樣式、日誌、API 設計等多個方面；更多 JavaScript 工程實踐資料參考 https://parg.co/bIO 。( https://github.com/wearehive/... )
• 大型應用開發中使用 Redux 的五個建議：Redux 是非常優秀的應用狀態管理工具，單向數據流結構允許開發者專註於業務邏輯的開發。本文作者從自身實踐出發總結出了大型項目中 Redux 的使用建議，包括建立數據索引並且使用選擇器來訪問數據、將標準狀態獨立於可變的界面狀態與用戶編輯狀態、在界面之間合理地共享數據、提取公共地 Reducer 函數以及如何較好地連接 React 組件與 Redux 狀態樹等等；更多 Redux 相關資料參考 https://parg.co/bVQ 。( https://parg.co/bIi )
• 前端 JavaScript 面試問題總結：本文作者發現目前並沒有太多令人滿意的前端 JavaScript 面試問題列表，因此他基於自己的面試經歷與實踐總結出了本文。本文主要包含以下部分，首先是基礎概念的認知，譬如對於閉包、EventLoop、REST 等概念的介紹；然後是對於編碼能力的考量，譬如對於常見的數據結構與演算法的實現、代碼調試能力與錯誤定位的評測等等；最後是對於整體系統設計能力的考量，譬如如何設計全棧的 Twitter 實現架構等等。( https://parg.co/bIL )

深度閱讀

深度思考，升華開發智慧

• 深入 React.js 內部原理：本系列文章詳細介紹了 React.js 內部工作原理，作者通過調試整個代碼庫，分析代碼執行調用順序將整個邏輯以流程圖方式清晰地展示出來，並且詳細介紹了內部實現中使用到的關鍵概念與方法。本系列文章會包含 Stack Reconciler 與 Fiber 兩個部分，目前完成的 Stack Reconciler 部分分為十五個小節，包含了從渲染函數調用開始介紹 JSX 轉化為 DOM 的流程、內部事務處理到組件掛載於與更新流程等等內容；更多 React 相關資料參考 https://parg.co/bM1 。 ( https://parg.co/be2 )
• 利用 WebGL 釋放 GPU 的計算潛力：隨著大數據時代的到來，計算能力日漸成為性能的關鍵瓶頸之一；而眾所周知 GPU 相較於 CPU 有著更為強大的計算能力，本系列文章即是介紹如何利用 WebGL 實現 GPGPU（General Purpose Computing on Graphics Processing Units）高性能計算。本系列文章首先討論了利用 WebGL 進行 GPGPU 計算的可行性，然後介紹了具體的實施步驟；主要步驟包括矩陣初始化、矩陣計算、結果回傳、條件控制、不穩定性處理、樣例實踐等幾個部分。( https://parg.co/bIQ )
• Vue 直出內存泄露問題的追查實踐：近期，作者遇到了 Vue 直出內存泄露問題，並進行了追查。其項目背景是，作者在一次規模較大的運營活動中正好碰到了內存泄漏的問題，技術背景和業務背景分別如下：技術背景：node直出項目，直出用到了 Vue 的直出方案；業務背景：一次 PV 最高達到 1400W 的運營活動 qps 的壓力下，後期使得服務出現一定錯誤率。本文將回顧整個追查的實踐過程。( https://parg.co/bIN )
• JavaScript 開發中常用的十大數據結構詳解：數據結構是軟體開發的重要組成部分之一，也是求職面試中常見的主題之一；本文將回顧介紹 JavaScript 中常用的十大數據結構，並且給出詳細的教程與在線實踐鏈接。本文涉及到的數據結構包括鏈表、棧、隊列、集合、映射、哈希表、二叉搜索樹、Trie 樹、二叉堆、圖等；更多數據結構與演算法相關資料參考 https://parg.co/bIt。( https://parg.co/bIC )

開源項目

樂於分享，共推前端發展

• Ink：Ink 允許我們以類似於編寫 React 組件的方式編寫命令行交互界面，最大的區別在於 Ink 會將組件渲染為輸出到標準控制台的字元串。筆者覺得閱讀 Ink 的源代碼也是不錯地了解簡化版的 React 內部運行機制的方式，可以了解基本的 JSX 轉換、虛擬 DOM 渲染與比較、批次更新等內容。( https://github.com/vadimdemed... )
• real-world-react：本倉庫搜集了一系列基於 React 開發的真實環境下的開源應用代碼庫，能夠幫助初學者從資深開發者的代碼中逐步學習了解 React；應用涵蓋了基於 Redux 的各種資訊類應用、常見的音樂播放器等等多個方面。( https://github.com/jeromedalb... )
• icaro：icaro 是輕量、高效地 JavaScript 對象觀察者實現，能夠自動監測 JavaScript 中對象的變化並且進行相應地譬如 DOM 更新等操作。icaro 使用了大量的 ES6 的特性，譬如 Proxies、WeakMaps、Maps 以及 Symbols，是非常不錯的可以用來學習利用最新的語言特性實現 JavaScript 響應式框架的開源庫。( https://github.com/GianlucaGu... )
• titanic：titanic 為我們提供了一系列有趣的可變的 SVG 圖標，這些圖標能隨著用戶的點擊或者其他操作做出相應地動畫反饋。titanic 提供的動畫圖標包括了單選框、郵箱、笑臉等等。( https://github.com/icons8/tit... )
• formik：React 中的表單處理一直是痛點所在，而目前很多的表單處理庫添加了太多的抽象，不僅不易於理解而且會造成許多額外的性能損耗。而 Formik 則提供了簡便易用的高階組件來幫你處理將 Props 轉化為扁平的 React 狀態、自動化欄位驗證並且進行錯誤提示、將扁平地 React 狀態轉化為介面可用的對象這三個任務。( https://github.com/jaredpalme... )

巔峰人生

前端之巔

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