摘要：前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。背后的故事本文是對于年之間世界發生的大事件的詳細介紹，闡述了從提出到角力到流產的前世今生。

前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每周清單；本文則是對于半年來發布的前端每周清單中的 JavaScript 相關的教程實踐與開源項目的盤點，可以查看這里獲得往期清單或者其他盤點篇。

《2017 前端開發手冊》：Front-End Developer Handbook 2017 由 Cody Lindley 編寫，面向每一個希望學習前端的開發者。該手冊概括地討論了前端工程化的相關實踐：在 2017 年中我們應該使用哪些前端工具以及如何學習去使用這些數據。該手冊的內容包含了 Web 技術的基礎：HTML、CSS、DOM 以及 JavaScript，以及基于這些技術構建的優秀開源項目。

《現代 JavaScript 概念縱覽》：現代 JavaScript 開發在過去幾年中經歷了迅猛的變遷，并且這種變化的勢頭毫無停滯的預兆。對于很多前端開發者而言可能還不是很熟悉那些 JS 博客或者文檔中提及的時興的概念。此文討論了很多起到媒介作用以及高級的概念，和這些概念是如何被適用于現代 JavaScript 開發中的。本文我們會討論 Statefulness 與 Statelessness、Immutability 與 Mutability、Imperative 與 Declarative Programming、Higher-order Functions、Observables、以及 FP、RP、FPR 編程范式。

《JavaScript 啟動性能瓶頸分析與解決方案》：隨著現代 Web 技術的發展與用戶交互復雜度的增加，我們的網站變得日益臃腫，也要求著我們不斷地優化網站性能以保證友好的用戶體驗。本文作者則著眼于 JavaScript 啟動階段優化，首先以大量的數據分析闡述了語法分析、編譯等步驟耗時占比過多是很多網站的性能瓶頸之一。然后作者提供了一系列用于在現代瀏覽器中進行性能評測的工具，還分別從開發者工程實踐與 JavaScript 引擎內部實現的角度闡述了應當如何提高解析與編譯速度。

《GraphicsJS:輕量級繪圖庫》：目前 Web 開發中最常用的創建交互式圖片的技術選型當屬 SVG 與 Canvas，傳統的 Flash 與 Silverlight 已經慢慢淡出歷史的舞臺。而對于 SVG 與 Canvas 的對比也顯示，如果是想創建與操作簡單的交互性圖片，那么 SVG 當屬首選。SVG 本身是基于 XML 的向量圖，任何通過svg標簽載入的圖片都會成為 SVG DOM 中可操作的對象。而 GraphicsJS 正是基于 SVG 的簡單易用的 JavaScript 繪圖庫。

《理解 JavaScript 中的作用域》：JavaScript 中的作用域、閉包以及上下文綁定一直是令人凌亂的知識，此文作者詳細地從函數作用域、塊作用域、詞法作用域、閉包等進行詳細闡述，值得一讀做個梳理。

《ECMAScript 4 背后的故事》: 本文是對于 1999 ~ 2008 年之間 JavaScript 世界發生的大事件的詳細介紹，闡述了 ECMAScript 4 從提出到角力到流產的前世今生。 ( http://suo.im/phBiE )

《深入了解 JavaScript 中錯誤對象與堆棧跟蹤》：JavaScript 中 Error 對象的堆棧跟蹤信息包含了從異常拋出點到構造函數的所有棧幀信息，而手動地去捕獲與操作堆棧跟蹤信息有助于我們在開發測試或者異常處理相關的框架時有更好地實踐。( http://suo.im/MiMWd )

《對比探秘 WebAssembly 性能優越之謎》: 本系列文章通過有趣的漫畫介紹了 WebAssembly 的前世今生，并且與 JavaScript 就加載、解析、編譯、執行等瀏覽進行了詳細對比，從而介紹 WebAssembly 的性能緣何相較于 JavaScript 會好上很多。同時作者也強調，WebAssembly 與 JavaScript 各有所長，未來并不會存在太多的競爭，更多的是相輔相成，各司其職。( http://suo.im/3jsTUH )

《槽糕的 JavaScript 框架們》：此文作者 Matt Burgess 嚴肅地吐槽批評了幾乎所有的現今流行的 JavaScript 框架，與他上一篇文章偉大的 JavaScript 框架一起閱讀效果更佳。當然，作者并不是想讓大家回到茹毛飲血的歲月，而是希望能以辯證地態度去認識與使用框架。( http://6me.us/e9R )

《JavaScript 圖片處理庫盤點》：圖片處理一直是客戶端開發中的常見問題，本文則是對基于 JavaScript 的常見的進行圖片濾鏡、裁剪等操作的庫進行了盤點；本文橫向比較了 CamanJS、glfx.js、grafi.js、Jimp 以及 Filtr2 這幾個常用的圖片處理庫，并且給出了不同業務場景下的選用建議。( http://6me.us/ylUyM )

《Slack 是如何減少其客戶端內存占用的》：本文是 Slack 在其桌面應用的開發過程中探索出的如何減少應用內存開銷的經驗介紹。Slack 最初為用戶的每個登錄團隊都啟動了相同的處理進程，而后根據調研發現僅有部分用戶會同時使用多個團隊；因此 Slack 從卸載后臺團隊的 DOM 樹、分拆 JavaScript 代碼進行優雅降級、重構 JavaScript 代碼庫等多個方式來優化桌面應用的內存占用。( http://6me.us/z0XSh3 )

《流行網站上陳舊的 JavaScript 庫留存調研》：本文是 Tobias Laudinger 及其合作者對于客戶端 JavaScript 庫的使用現狀的調研報告；基于對于超過 133K 個網站的調查結果，它們發現大約 37% 的站點仍然使用了某些存在已知漏洞的 JavaScript 客戶端腳本，它們建議我們一定要慎重思量網站中引入的外部依賴，特別是對于那些已經運行了很久的站點。( http://6me.us/csu2da )

《編寫 JavaScript 框架：客戶端路由》：本文是編寫 JavaScript 框架系列的最后一篇，主要著眼于討論如何實現 JavaScript 客戶端路由及其與服務端路由的區別。( https://parg.co/bOL )

《面向“遠古” Web 開發者的現代 JavaScript 教程》：本文主要是面向那些從 PHP、JSP、Rails 占據統治地位時開始進行 Web 技術的開發者進行常見的現代 JavaScript 基礎概念的介紹。( https://parg.co/bsF )

《解密 JavaScript 異步編程》：JavaScript 中異步編程歷經了多個大的迭代，從回調到 Promise 到生成器以及現在的 Async/Await；本文作者則是高屋建瓴地介紹了 JavaScript 異步編程的變遷歷史以及簡要的內部實現原理。( https://parg.co/bsz )

《ES7 Async/Await 常見誤區》：ECMAScript 6 引入的 Promise 大大簡化了 JavaScript 中異步編程語法，而 ES7 引入的 Async 則使其更為優雅；本文作者對于實踐中常見的對于 Async/Await 的語法誤用案例進行了解析。( https://parg.co/bsW )

《Composing Software》：本系列文章由 Eric Elliott 大神發布，著眼于介紹 JavaScript 函數式編程與大型軟件項目中的可組織性技術的介紹，包括了函數式編程導論、高階函數、Reduce、Functors & Categories 等幾個部分，還在持續更新中。( https://parg.co/bQY )

《12 個精妙的 JavaScript 代碼片》：本文作者分享了十二個非常不錯的 JavaScript代碼片，這些代碼片能夠幫你優化現有代碼，讓代碼更加地賞心悅目。（ https://parg.co/bhH ）

《JavaScript 中構建響應式引擎》：本系列文章介紹了如何在 JavaScript 中構建高性能的響應式引擎，對于有興趣了解 MobX 底層原理的同學來說也是個不錯的教程，目前包含了對于可觀測對象的構造解釋、屬性推導與依賴追蹤等內容（ https://parg.co/bhR ）

《深入淺出構建簡單的 Chess AI》：本文作者介紹了如何基于 JavaScript 構建一個國際象棋的 AI，雖然不屬于前端開發范疇，不過還是蠻有意思的一篇文章。本文主要包括移動生成、棋盤可視化、位置評估、基于 Minimax 算法的搜索樹、Alpha-beta 修剪等等。( https://parg.co/bCw )

《使用 JavaScript 打造智能咖啡機》：這幾年智能家居與 IOT 的概念非?；馃?，作者也發揮極客精神改造了一下辦公室的咖啡機。文中作者借助了 Tessel 與 Johnny-Five 智能硬件平臺，自定義了超文本咖啡機控制協議 HTCPCP，將咖啡機改造為了能夠提供類 REST 服務的終端，能夠遠程控制與實時監控。

《使用 Chrome devtools 檢視代碼覆蓋》：近日 Chrome Canary 版本中新增了執行代碼覆蓋率檢查的特性，其能夠反映你的 Web 應用中的每個 JavaScript/CSS 文件中的代碼覆蓋率以及所有的未被執行的行。

《JavaScript 模塊演化史》：當初 Brendan Eich 草創 JavaScript 之際估計想不到它會在之后的二十年內起到如此重要的作用，本文則是深度回顧了缺乏模塊化帶來的困難以及這二十年間從命名空間、依賴注入、CommonJS、AMD、UMD 到 ES2015 Modules 等等十余種不同的模塊解決方案。( https://parg.co/bhn )

《使用 Inline Cache 優化動態 JavaScript 代碼》：本文是作者在開發 JSIL 開源庫時使用的一系列優化手段的總結，主要關于如何使用多態在線緩存（Polymorphic Inline Cache）來優化代碼執行速度，不過這種方式也有可能造成意外的變化。作者介紹了何謂 Inline Cache 及其優化原理和帶來的性能提升評測等內容。( https://parg.co/b4a )

《基于 JavaScript 構建數據表達式分詞器》：本文是一篇挺有意思的文章，介紹如何利用 JavaScript 解構常見數學表達式并且從中提取出相關實體。本文涉及到的內容包括對于分詞器的簡單介紹、對于抽象語法樹 AST 的介紹以及最終如何使用代碼來實現分詞算法。( https://parg.co/bRO )

《TypeScript 在 Slack 的實踐分享》：維護大型的跨平臺的 JavaScript 代碼庫是一件非常具有挑戰性的工作，無論是從 Chrome 的 JavaScript 中傳遞對象給 Objective-C 或者單純的接受來自 Node.js 中的回調結果，你都需要保證不同的代碼對于通訊對象的期望之間的一致性。而本文即是在開發跨平臺多終端的應用中，Slack 使用 TypeScript 來約束類型，從而避免意外的類型不一致導致的崩潰的實踐經驗分享。( https://parg.co/bRR )

《2017 里 JavaScript 帶給我的感動》：本文作者縱覽了在 2017 年中 JavaScript 生態圈可能迎來的一系列巨大變革。他首先對比了 JavaScript 與 Reason，淺述了二者的優劣對比。然后介紹了 WebAssembly 以及另一個新興語言 Rust 未來可能在 JavaScript 生態圈中占據的一席之地。最后，作者還介紹了 Docker、Now.sh 以及 Github Pages 等一系列優秀的輔助開發工具，并且暢想了去中心化浪潮下 Web 的未來發展。( https://parg.co/bRh )

《JavaScript 中處理 undefined 的 7 個技巧》：不同于 Python 或者 Java 中僅有 null 或 nil 來表示空值，JavaScript 為我們提供了 undefined 與 null。本文則是深度分析了 undefined 與 null 的區別，討論了實際工程開發中 undefined 的使用場景，譬如未初始化對象、不存在的對象屬性或者方法、越界訪問、無返回值的函數等；作者最后還給出了一些對于 undefined 的注意點，譬如提高內聚性降低耦合性等。( https://rainsoft.io/7-tips-to... )

《2017 年 JavaScript 測試技術概述》：本文涵蓋了 2017 年中 JavaScript 領域流行的測試理念、名詞與概念、工具以及測試的方法論。本文介紹了基本的測試類型的劃分、常用測試工具的劃分、以及 Jest、Mocha、Nightwatch 這樣的常用測試工具的選項與實踐技巧。( https://parg.co/bf3 )

《Microsoft Edge 中的 JavaScript 性能、WebAssembly 以及 Shared Memory》：JavaScript 的性能表現是 Web 開發中永恒的話題，而 Microsoft Edge 團隊也在實時接收用戶反饋以提升 Chakra JavaScript 引擎的性能表現。本文首先介紹了 Chakra 中的新特性，包括了一系列提升 JavaScript 性能表現的技巧；然后還討論了 WebAssembly、Shared Memory 與 Atomics 等新特性在 Edge 中的具體實現。( https://parg.co/bfk )

《8 小時內學習 Node.js》：Node.js 是基于 Google Chrome V8 引擎的 JavaScript 框架，其能夠用于開發類似于視頻直播、單頁應用等 IO 密集型的 Web 項目。而本文則是提供了完整的從零到一的 Node.js 學習路線圖，包含了基礎的環境構建、Console 使用、核心模塊使用、基本的 Web 服務器搭建等等內容。( https://parg.co/bNy )

《CSS-in-JavaScript：基于組件的樣式組織》：通過使用內聯樣式，我們能夠利用 JavaScript 帶來的可編程性的便利來組織樣式代碼。它能夠為我們提供類似于 CSS 預處理器、命名空間等多方面的輔助。本文則是介紹了幾個常見的適用于 CSS-in-JS 技術的場景，譬如排版、空格等。( https://parg.co/bNe )

《從零開始基于 JavaScript 構建簡單神經網絡》：本文不是純粹的前端開發文章，對于聽說過人工智能與神經網絡并且有興趣的開發者不妨一讀。而本文則是漸進地介紹神經網絡與深度學習理論基礎、如何使用 JavaScript 實現簡單的數學公式、如何實現簡單的神經網絡等內容。( https://parg.co/bNa )

《在 Web 開發中謹慎使用 CSS in JavaScript》：CSS 是有缺陷的，不過很多項目在選擇使用 CSS-in-JavaScript 來組織樣式的時候，卻是對于 CSS 與 CSS-in-JS 很多的誤解。本文以 Styled-Component 為例，列舉出了常見的 9 個誤解，譬如使用 CSS-in-JS 才能解決命名空間沖突、保證樣式的可擴展性、帶來了性能提升與樣式文件的可組織性等等。( https://parg.co/bNR )

《d3.express：集成交互式編碼環境》：本文介紹了尚在開發中的 d3.express，一個類似于 Python Juypter Notebook 的交互式編碼環境。d3.express 允許開發者使用大量 d3 內置的功能函數，譬如加載遠程的 CSV 文件；并且允許開發者交互地實時預覽 SVG、Canvas 等繪制結果，有人認為 d3.express 會是一種基于 JavaScript 的更好的數據可視化解決方案。( https://parg.co/bNi )

《V8 不再使用基準測試引擎 Octane》：JavaScript基準測試引擎是一段不斷進化的歷史。隨著網頁從原始靜態頁面到現在富客戶端應用，都需要基準測試引擎能夠與時俱進。SunSpider是其中比較早的基準測試引擎，它為快速優化JavaScript提供了基礎。但是，隨著虛擬機開發者意識到微基準測試的局限性，基準測試引擎隨之更新，針對SunSpider的短板進行優化，同時瀏覽器社區也將SunSpider從推薦基準測試引擎中剔除。Octane基準測試套件最早發布于2012年，旨在減輕早期微基準測試引擎的一些缺陷。它源于V8的早期簡單測試用例，最終成為通用網頁性能的基準測試。Octane包含17個不同的測試集，以覆蓋各種不同的工作場景。Octane的內容代表它創建時度量JavaScript性能的主流方式。( https://parg.co/bN9 )

《JavaScript 代碼風格要素》：本文是 Eric Elliott 編寫的 JavaScript 代碼風格要素指南與建議，其借鑒了 1920 年的面向英文語言的 “The Elements of Style” 一文。本文介紹的關鍵要素包括：使用函數最為組合的原子單元并且保證函數的單一職責性、移除不需要的代碼、使用更直觀具有自解釋性的變量命名、根據特性進行代碼劃分等等。( https://parg.co/bMn )

《簡短的 WebAssembly 卡通指南》：現在有很多關于 WebAssembly 與 JavaScript 生態圈的討論，人們往往關注于 WebAssembly 帶來的巨大的性能提升以及它會如何顛覆現代 Web 開發。不過很多的介紹中并沒有詳細闡述隱藏在速度提升之后的具體細節，本文則是從整個 JavaScript 的演化史來介紹 WebAssembly 巨大性能提升的原因。( https://parg.co/bVa )

《基于 JavaScript 的異步依賴加載》：在 Web 應用開發中我們經常會將一些首屏不需要的腳本或者樣式文件以異步方式加載；而本文則是介紹了多種異步加載網頁中依賴資源的方式，作者還將常用的方法整合為了 fetchInject 這個開源庫，方便使用者快速進行腳本地異步加載。( https://parg.co/bkG )

《基于 Electron 構建 Github Desktop Beta》：Electron 是著名的利用 HTML、CSS、JavaScript 等 Web 技術構建桌面應用的輔助工具；本文則是介紹了四個僅有原生應用開發背景的工程師如何利用 Electron 逐步構建 Github Desktop Beta 的經驗。( https://parg.co/bkK )

《編寫現代 JavaScript 代碼》：JavaScript 被僅用來更新頁面元素狀態的日子一去不返，我們也需要編寫更加現代的 JavaScript 代碼。本文則是介紹了如何利用 Linter 來格式化代碼、如何使用 ES2015+ 特性、如何使用函數式編程等建議來提升 JavaScript 的代碼質量。( https://dev.to/scastiel/writi... )

《重構 Airbnb 前端架構》：本文是近日 Airbnb 開發團隊在思索重構代碼庫中 JavaScript 部分的經驗總結，主要著眼于產品驅動開發以及技術沉淀、從傳統的 Rails 架構中積攢的經驗以及新的技術棧的某些特性等方面。本文首先介紹了從 Rails 遷移過程中的一些經驗，譬如將原本完全的服務端渲染界面所需要的數據切分為了 API 與 Non-API 兩大類，并且使用 Hypernova 來進行 React 服務端渲染。然后介紹了如何在應用前端通過引入懶加載與異步加載等方式提升前端性能與用戶體驗。( https://parg.co/bkA )

《最終，JavaScript 成為了一流語言》：2003年，保羅·格雷厄姆（Paul Graham）在文中提到，他的公司決定使用Lisp（一門編程語言），并且指出自己公司相比競爭對手的優勢在于Lisp。如果Lisp像法語，那么現如今的JavaScript就像英語一般。盡管二者的語法不一致，但英語是世界上最廣泛使用的語言，JavaScript是最廣泛應用的計算語言。然而，JavaScript仍未得到與其他語言同等的尊重。盡管它的使用率在創業公司和大型公司中持續增長，但若非必要，人們不會認為它是一門有用的語言。大公司的高級工程師聲稱它不是一門“真正的”編程語言，許多人并不知道除了操作像素外它還能被用于何處。。( https://parg.co/bkb )

《理解 WebAssembly 的文件格式》：為了保證 WebAssembly 能夠被人們閱讀與理解，需要提供對于 wasm 二進制格式的文本表示。該特性著眼于能夠在文本編輯器、瀏覽器開發者工具等開發工具中瀏覽 WebAssembly 文件，而本文則介紹了這種文件格式的規范與工作原理，以及底層的字節碼與上層的 JavaScript 對象之間的關聯關系。( https://parg.co/bk6 )

《JavaScript 單元測試框架大亂斗：Jasmine、Mocha、AVA、Tape 以及 Jest》：在開始新的前端項目時，我們常常會考慮應該使用哪一個單元測試框架，或者考慮應該為哪些代碼添加單元測試。而本文則對于常用的 Web 開發中的單元測試框架 Jasmie、Mocha、AVA、Tape 以及 Jest 進行了橫向對比，并且基于自己的經驗給出了不同應用場景與需求下不同的單元測試框架選項建議。( https://parg.co/bJ5 )

《Web 前端開發的未來》：本文作者從自己的實踐出發暢想了未來 Web 前端開發的可能方向；主要包括 JavaScript 新特性的增強以及對于狀態管理的深入、從簡單界面逐漸過渡到完整系統、原生與 Web 之間的邊界逐步消失、CSS 會逐步模塊化并且預處理器會逐步退出歷史舞臺、性能仍然是關鍵瓶頸以及 URL 會變得愈發重要等多個方面。( https://parg.co/bJr )

《面向 Web 設計師與開發者的免費電子書合集》：本文介紹了十數本優秀的面向 Web 設計師與開發者的免費的電子書，涵蓋了 CSS&HTML 基礎、現代 JavaScript 開發、Git、PHP 等多個領域。( https://parg.co/bis )

《hyperapp》：hyperapp 是僅 1KB 大小的用于構建前端應用的 JavaScript 庫，它基于 Elm 架構，支持聲明式界面編程與函數式編程，允許使用 JSX 聲明界面并且靈活地分割與合并自定義的標簽。hyperapp 實現的簡潔明了，是不錯的可以閱讀源碼的輕量級框架。( https://github.com/hyperapp/h... )

《這 WebAssembly，是 Mozilla 贏了》：Mozilla 提出1 asm.js 與 Google Chrome 提出的 PNaCI 是都是致力于在瀏覽器中運行原生代碼的技術方案。不過 PNaCI 卻存在著自絕于 JavaScript 以及 HTML 等問題，并且其他的瀏覽器廠商很難去支持 PNaCI 標準。而 asm.js 則以輕量級的對于標準 Web 平臺擴展的方式實現了這一目標，也就導致了最終 WebAssembly 決定靠近 asm.js 而不是 PNaCI。( http://robert.ocallahan.org/2... )

《JavaScript 模塊現狀》：近日隨著各大瀏覽器紛紛開始支持 ESM（ECMAScript Moduls），Node.js 中也計劃引入 *.mjs 作為 ESM 的文件擴展名，關于 JavaScript 模塊化的未來發展也在社區引發了熱切討論。本文則是首先介紹了 ESM 在瀏覽器、Webpack 等構件工具以及 Node.js 中未來的實現，然后討論了個人對于 ESM 未來發展以及對于程序開發本身的潛在影響。( https://parg.co/bi0 )

《WebAssembly 初體驗：重構簡單游戲引擎》：WebAssembly 為我們提供了構建高性能的前端應用的途徑，而本文則從零開始介紹如何使用 C 來覆寫簡單的 JavaScript 游戲引擎并且將其編譯為 WebAssembly。本文依次介紹了如何搭建基礎的 Emscription 工具鏈、使用 JavaScript 引入 wasm 模塊、覆寫并且優化某個小型游戲引擎、兩個引擎的性能評測等等部分。( http://blog.openbloc.fr/webas... )

《CSS 局部作用域變量詳解》：CSS 自定義屬性或者所謂的 CSS 變量，為我們帶來了真正的、不同于 SASS 等預處理框架中使用的類占位符的動態變量。本文介紹了 CSS 變量的基本定義語法與使用，以及如何使用 JavaScript 來動態修改 CSS 變量值從而動態地進行界面重渲染，最后闡述了目前瀏覽器對于 CSS 變量的支持情況以及可以使用的兼容方式。( https://parg.co/bLS )

《Flow 與 TypeScript》：本文主要對比了 Flow 與 TypeScript 這兩個常用的 JavaScript 靜態類型檢測工具，首先介紹了在簡單項目中如何使用 TypeScript 與 Flow。然后對比了二者在類型覆蓋率上的漸進對比，會發現使用 Flow 之后因為其較為嚴格的類型要求會相對較快地實現高覆蓋，而 TypeScript 則相對較為松弛。( http://thejameskyle.com/adopt... )

《JavaScript 中類的私有域定義》：目前對于類中的私有域定義已經達到了 Stage 2，本文即是詳細介紹 #private 語法的使用以及設計理念。顧名思義，我們可以使用 #privateFieldName 方式來定義類中的私有域，該私有域僅允許該類的方法訪問（包括靜態方法）。本文還介紹了使用這種 HashTag 方式而不是其他語言中常見的 private 關鍵字來定義的考量。( http://thejameskyle.com/javas... )

《CSS 的現狀》：毫無疑問我們正在見證著 JavaScript 社區與生態的極速變化，而與此同時可能很多人沒有關注到 CSS 社區的進展，本文作者則是對于 CSS 的現狀進行了綜述并且提出了個人的觀點。本文作者主要提出了五個論點：我們可以使用 CSS Module 來替代原有的 BEM 等命名方案、使用 Flexbox 來替代 float、使用 CSS Grid 來替代第三方網格庫、使用 CSS 內置的變量、計算函數等特性來替代 SASS 等預處理庫，乃至于最終我們完全可以使用 CSS-in-JS 來替代 CSS。本文具有極強的主觀色彩，請批判性閱讀。( https://parg.co/bLZ )

《billboard.js》：基于 D3 v4+ 的輕量級可重用的 JavaScript 圖表庫，支持 IE 9 以上瀏覽器。billboard.js 為我們提供了常見的柱狀圖、時序圖、餅圖等等多種圖表類型。( https://github.com/naver/bill... )

《如何用好 JavaScript console》：JavaScript 中最主要的的調試工具之一即是 console.log，而 console 對象還包含著其他幾個常用的調試方法。本文則是介紹了 console 對象，以及如何使用它進行簡單的時間消耗評測、優化數組或者對象輸出格式、通過 CSS 優化輸入等等。( https://parg.co/b9o )

《現代 Web 開發魔法書》：本書是對現代 JavaScript Web 開發中涉及知識的分類與介紹，來源于作者日常工作中發送給全棧 Web 團隊新人的資源；目前已經納入了超過兩千的涵蓋了項目、工具、插件、服務、文章、數據、站點等多方面的鏈接。本書包含了 Web 平臺概述、HTML5，CSS，JS 特性介紹、常用的 GUI 框架與架構介紹、應用開發流程中使用的工具介紹等等欄目。( https://parg.co/bv9 )

《基于 JavaScript 的機器學習》：人工智能與機器學習的浪潮洶涌而來，JavaScript 也并非旁觀者；可能有很多人認為 JavaScript 過于緩慢、缺乏大量的科學計算庫、僅適用于 Web 開發，而本文以及系列文章則深入淺出地介紹了如何利用 JavaScript 進行常見的深度學習操作。本文即以簡單的回歸擬合為例，從最基礎的庫安裝、數據導入、數據預處理到模型訓練、模型預測 介紹了如何使用 JavaScript 進行簡單的機器學習任務。( https://parg.co/b9K )

《JavaScript 內存管理速成》：本系列文章以漫畫的方式生動有趣地介紹了 JavaScript 中內存管理的相關知識，首先介紹了 JavaScript 與 C 這兩個風格迥異的語言是如何進行內存管理的，然后討論了 ArrayBuffers 與 ShardArrayBuffurs 存在的意義以及可能引起的臨界情況，最后討論了在未來 WebAssembly 開發中應該如何使用 Atomics 來處理并發情況下的臨界情況。( https://parg.co/b9p )

Rust、WebAssembly 與 Webpack：WebAssembly 是新的運行于 Web 平臺的二進制格式，我們能夠將 C、C++、Rust 這些語言編譯到 .wasm 文件格式中然后在瀏覽器環境下運行他們；通常這些編譯后的代碼在包體體積與運行速度上都會比 JavaScript 有明顯提升。而本文則著眼于介紹如何在瀏覽器中執行底層的 Rust 代碼，也可以參考這篇文章( https://parg.co/by4 )來了解更多的關于 WebAssembly 快速實踐的知識。( https://parg.co/byh )

JavaScript 在嵌入式設備與物聯網中的應用現狀：隨著近年來 Web 的發展與 JavaScript 的崛起，JavaScript 被應用到了許多原本不曾想象到的場景中，從服務端、工作站、數據庫、桌面環境到物聯網設備中，都可以見到 JavaScript 的身影。而本文則概括了 JavaScript 在不同的嵌入式微型設備中的應用現狀，并且選擇了具有代表性的設備介紹了具體的使用場景與實踐方法。( https://parg.co/byr )

基于 JavaScript 的機器學習：深入監督學習算法：本文是基于 JavaScript 的機器學習系列的第二部分，主要介紹監督學習算法 kNN。kNN 算法通常被用于分類或者回歸問題，本文首先介紹了 kNN 算法的基礎原理，然后介紹了如何利用 ml-knn、csvyojson、prompt 等庫對 Iris 數據集中的數據進行訓練與預測。( https://parg.co/byR )

JavaScript 中存在純函數嗎？：隨著函數式編程在前端界面開發中的流行，純函數的概念相信很多人都很熟悉，不過文本作者認為 JavaScript 中是否存在真正意義上的純函數還值得商榷。本文首先介紹了純函數的基本定義，然后給出了我們熟知的 JavaScript 中常見的純函數定義范式。不過作者認為函數是 JavaScript 中的一等公民，函數變量或者某個 Object 的屬性方法都有可能被重新賦值，因此 JavaScript 中無法構建真正嚴格的純函數。( https://parg.co/by6 )

基于 Headless Chrome 的自動化測試：本文介紹了如何在 Headless Chrome 環境中使用 Karma 作為測試驅動運行基于 Mocha 與 Chai 的自動化測試用例。Headless Chrome 允許我們在無界面環境下，使用特性完備的 Chrome 來執行 JavaScript 腳本并且渲染網頁。本文首先介紹了使用 karma-chrome-launcher 來搭建本地啟動 Chrome 環境，然后介紹了使用 Mocha 與 Chai 來編寫基礎測試用例，最后還討論了如何自定義 Headless Chrome 啟動器并且集成到 Travis CI 環境下。( https://parg.co/beo )

Webpack 中的作用域提升簡介：近日發布的 Webpack 3 中引入了所謂的 Scope Hoisting 新特性，從社區的反饋來看該特性已經在很多項目中成功地幫助開發者減少包體大小，提高首屏加載效率；本文則是簡要地介紹了 Webpack 3 中作用域提升的基礎原理。本文假設你對于 JavaScript 中閉包與模塊語法有所了解，首先介紹了在老版本 Webpack 中采用的作用域分割機制及其存在的額外的性能損耗，然后對比呈現了在引入作用域提升機制之后，打包而成的文件的形式，與其帶來的性能提升原理。( https://parg.co/beE )

為什么我們選擇 TypeScript：本文是 Reddit 工程師 Niranjan Ramadas 記述在前端技術選型時選用 TypeScript 的考慮過程。作者認為任何語言都有其優缺點，不過合適的語言應該具備如下特點：強類型、完備的工具鏈支持、能夠用于生產環境等。作者還特地比較了 TypeScript 與 Flow，TypeScript 是能夠編譯到 JavaScript 的超集語言，而 Flow 則是提供了一系列額外的注解來實現類型系統。Flow 能夠保證較好的類型覆蓋，但是其對于多態性的支持并不是很好，并且 TypeScript 的社區也相對活躍。( https://parg.co/beb )

TC39，ECMAScript 與 JavaScript 的未來：本文是 Nicolás Bevacqua 在騰訊前端大會上發表的同名演講的總結，介紹了 TC39 與 ECMAScript 的含義，概述了 ECMAScript 中提案的步驟以及部分代表性提案，同時還暢談了JavaScript 的未來發展方向。作者介紹了 Stage 0、Stage 1、Stage 2、Stage 3 這四個提案處理進度的具體含義與要求，并且列舉了 Array#includes、Named Captures 等具體的例子來闡述 JavaScript 不斷衍化的語法特性；作者還介紹了未來社區會持續關注的代碼轉譯與適配、代碼質量保證、代碼打包與發布等多個領域。( https://parg.co/bXD )

JavaScript 中的函數式編程就是反模式（*本文僅代表原作者個人意見）：作者在本文中對比討論了 JavaScript 與 Clojure，并且介紹了 ClojureScript 的基礎用法與優勢所在。作者首先討論了他認為的函數式腳本語言應該包含的特性，包括充分的 API、內建的不可變數據結構等；然后闡述了 lodash、fp、Rambda 這樣的單個庫存在的不足，譬如 ImmutableJS 雖然能較好地解決部分問題，但是卻會割裂使用者的開發體驗。最后筆者介紹了 ClojureScripe 的特性與優點，包括能夠在編輯器中單行運行、內建的大量轉化函數、較好地性能與代碼可讀性保證等等。( https://parg.co/beH )

JavaScript 項目開發樣式指南：開啟新的項目就好像在綠地上肆意撒歡，此時的開發者擁有極大的自由；不過如果缺乏良好的基石，未來的項目維護可能會成為你的夢魘。本文即搜集了來自 Hive 研發團隊的 JavaScript 項目開發指南，涵蓋了 Git、文檔規范、環境變量控制、依賴管理、測試、文件結構與命名、代碼樣式、日志、API 設計等多個方面；更多 JavaScript 工程實踐資料參考 https://parg.co/bIO 。( https://github.com/wearehive/... )

前端 JavaScript 面試問題總結：本文作者發現目前并沒有太多令人滿意的前端 JavaScript 面試問題列表，因此他基于自己的面試經歷與實踐總結出了本文。本文主要包含以下部分，首先是基礎概念的認知，譬如對于閉包、EventLoop、REST 等概念的介紹；然后是對于編碼能力的考量，譬如對于常見的數據結構與算法的實現、代碼調試能力與錯誤定位的評測等等；最后是對于整體系統設計能力的考量，譬如如何設計全棧的 Twitter 實現架構等等。( https://parg.co/bIL )

JavaScript 開發中常用的十大數據結構詳解：數據結構是軟件開發的重要組成部分之一，也是求職面試中常見的主題之一；本文將回顧介紹 JavaScript 中常用的十大數據結構，并且給出詳細的教程與在線實踐鏈接。本文涉及到的數據結構包括鏈表、棧、隊列、集合、映射、哈希表、二叉搜索樹、Trie 樹、二叉堆、圖等；更多數據結構與算法相關資料參考 https://parg.co/bIt 。( https://parg.co/bIC )

代碼風格約定與標準：本倉庫提供了一系列的各個語言的常用代碼風格約定與標準，與 JavaScript 相關的包含了來自 Google、Airbnb 等多個公司或者社區的樣式規范，還有包括 HTML、CSS、SCSS 等一系列 Web 相關的規范。

ES6 中的 JavaScript 工廠函數實現：本文歸屬于 Eric Elliott 發布的 Composing Software 系列，介紹在 JavaScript ES6 語法背景下如何實現工廠函數。所謂工廠函數即是非類或者構造函數的，能干會某個新創建對象的函數；工廠函數能夠簡化我們創建新對象的過程，本文即是詳細地介紹了如何實現工廠函數，也是一篇不錯的 ES6 函數語法講解；更多 JavaScript 相關資料參考 https://parg.co/bMI 。

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

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

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

JavaScript 設計模式學習：本書是 Addy Osmani 著作的開源書籍，主要介紹面向 JavaScript 語言的經典與現代的常用設計模式。所謂設計模式即是軟件設計中常見問題的可復用解決方案，對于任何一門編程語言都是非常值得探索的話題。本文首先概述了設計模式的基礎理論，然后介紹了 JavaScript 中常見的十余種類與對象的設計模式，接下來介紹了 JavaScript 界面設計相關的 MV* 設計模式，然后還介紹了 JavaScript 模塊化設計以及 jQuery 中的設計模式等內容；更多 JavaScript 設計模式相關參考 https://parg.co/bIO 。

V8 新的 Turbofan JIT 編譯器帶來的性能特性概述：V8 JavaScript 引擎最早是 Google 為 Chrome 瀏覽器開發的 JavaScript 虛擬機，其設計的初衷就是為了讓 JavaScript 能夠高速運行；而這種性能優化的保障就是所謂 JIT 編譯器。本文著眼于介紹 V8 新的 Turbofan JIT 編譯器提供的新的性能特性能夠為應用帶來的優化；本文依次介紹了使用 delete 操作符與設置為 undefined 這兩種不同的去除對象屬性的方式在新的編譯器下的表現差異、對于 Arguments 參數不同操作的對比、柯里函數與 bind 操作符的優化，以及對象遍歷、對象創建和對于新舊引擎中對于常見的 Winston 等日志框架的性能對比等內容。更多 JavaScript 引擎相關知識參考 https://parg.co/bgp

JavaScript 之路：本書希望為任何對 JavaScript 有興趣的開發者提供 JavaScript 的多領域知識，其兼具了入門簡單、對初學者友好、使用 ES2015 語法以及規范的樣式指南等特點。本書主要包含以下章節：JavaScript 語法基礎、利用 DOM 接口創建交互性的網頁、構建完整的 Web 應用等內容；更多 JavaScript 相關資料參考 https://parg.co/bMI 。

2017 Web 開發趨勢：Web 開發在 2016 年里得到了長足的發展與進步，而本文則高屋建瓴地分析了 2017 年中 Web 開發可能面臨的機遇與挑戰。作者首先討論了人工智能的前景以及 Web 與之相結合的案例，然后討論了物聯網行業中 Web 相關的開發案例；接下來作者分析了崛起的 JavaScript 以及目前流行的項目，然后又從靜態網站生成器、虛擬現實、GIFs、Bots 等角度討論其他的發展方向。

JavaScript 中有趣而又無語的例子：JavaScript 是一門有趣的語言，它有著簡單的語法、龐大的生態系統與社區，不過 JavaScript 中也有著很多令人無語的地方。本文即是對 JavaScript 中一些有趣的、出乎意料的用法收集，對于初學者是個不錯的深入教程，而對于資深開發者也可以拿來作為面試題目。本文中包含的例子譬如 [] == ![]、NaN 的用法注意、try-finally 等等；更多 JavaScript 相關資料參考 https://parg.co/bMI 。

基于 Proxy 的 PopUnder 庫反混淆：本視頻通過對某個商用的 Chrome 59 中 PopUnder 庫，的執行過程解析，來介紹如何利用 ES6 的 Proxy 進行，簡單的 JavaScript 混淆代碼逆向破解。視頻還是挺有意思的，作者首先分析了經過混淆的源代碼，發現無法下手；然后利用 Proxy 監聽常見的 Windows 中 createElement 等函數的調用來了解該庫的執行流程，最后再根據 API 的調用順序復現出該庫。更多 JavaScript 設計模式相關參考 https://parg.co/bIO 。

三周時間打造全棧 JavaScript Web 應用：本文記錄了某個編程初學者如何用三周時間，循序漸進地從零構建出，基于 JavaScript 的全棧電子商務應用。本文從最初的產品設計與原型圖構建開始，然后介紹了如何選擇合適的數據結構與數據庫。接下來介紹了如何創建 Github 倉庫并且使用敏捷開發流程，最后介紹了如何利用 Express 與 Firebase 搭建服務端、使用 React 以及 Victory.js 構建前端應用等內容；更多 JavaScript 相關學習參考現代 JavaScript 開發：語法基礎與實踐技巧。

基于 CSS 與 JavaScript 的幀動畫教程

《開源在線代碼演示網站 Dwitter 發布 》：Dwitter 是類似于 CodePen 這樣的，不過專注于 JavaScript 代碼片演示的網站，已經有很多開發者在上面貢獻了奇妙的基于 JavaScript 的動畫或者小程序。

《開源在線代碼演示網站 Dwitter 發布 》：Dwitter 是類似于 CodePen 這樣的，不過專注于 JavaScript 代碼片演示的網站，已經有很多開發者在上面貢獻了奇妙的基于 JavaScript 的動畫或者小程序。

《notie》：這是一個輕量級的、零依賴的面向 JavaScript 的通知、輸入以及選擇套件庫。它允許彈出警示信息、確認輸入框、允許用戶輸入信息、允許用戶進行選擇以及進行日期選擇等。( https://github.com/jaredreich... )

《在瀏覽器中實現自動駕駛汽車》：人工智能與深度學習的浪潮滾滾而來，也給我們帶來了很多有趣的應用。該項目利用 JavaScript 創建了一個完整的自我學習的代理，能夠在一個 2D 環境下控制某個車輛自動規避各種障礙 。用戶還可以通過鼠標繪制出新的障礙，而小車可以通過強化學習不斷進行自我更新，值得一試。( http://suo.im/4egERz )

《UnCSS》：UnCSS 能夠幫助你從樣式表中移除 HTML 中未被用到的樣式，它支持多文件以及 JavaScript 樣式定義，并且提供了接口、命令行、構建插件、POSTCSS 插件等多種使用方式。( https://github.com/giakki/uncss )

《wasm-loader》：wasm-loader 是能夠用于 Webpack 的 WASM 二進制模塊導入工具，其能夠允許你在 JavaScript 代碼中導入 wasm 格式文件并且將二進制文件打包成為 JS Bundle 的一部分 。( https://github.com/ballercat/... -loader )

《marky》：marky 是基于 performance.mark/measure 封裝的高性能 JavaScript 計時器，其相較于console.time()以及console.timeEnd()具有更好地性能表現，相較于簡單的Date.now()具有更好地準確度。( https://github.com/nolanlawso... )

《Planck.js》：Planck.js 是基于 JavaScript 的 2D 物理引擎，能夠用于創建跨平臺的 HTML 游戲。( http://piqnt.com/planck.js/ )

《Tippy.js》：Tippy.js 是基于純粹的 JavaScript 的輕量級無添加的 ToolTip 庫。( https://atomiks.github.io/tip...

《Fathom》：Fathom 是 Firefox 開源的用于提取網頁中有意義內容的 JavaScript 框架，其能夠有效識別頁面中的前進/后退按鈕、地址表單以及主文本內容等等。( https://github.com/mozilla/fa... )

《k6》：k6 是基于 Go 與 JavaScript 開發的現代壓測工具，它提供了非常清晰簡單的 JavaScript 接口；同時它基于 Go 提供了分布式的部署方案，支持云端部署與 REST 接口控制。( https://github.com/loadimpact/k6 )

《Mavo》：Mavo 是純粹的基于 HTML 標記的用來創建富客戶端 Web 應用的框架，它允許開發者在沒有服務端或者 JavaScript 腳本的情況下快速創建動態應用。( https://parg.co/b8n )

《Workbox》：Workbox 是來自 Google Chrome 團隊的快速將現有應用轉化為 Progressive Web Apps 的 JavaScript 庫；Workbox 允許我們通過 Webpack 插件、Gulp 插件以及 npm 腳本的方式快速地為當前應用的資源創建對應加載 ServiceWorker。( https://workboxjs.org/ )

《Birdview.js》：Birdview.js 是個非常有趣的 JavaScript 插件，它能將整個頁面以鳥瞰圖的方式呈現給用戶，并且允許用戶直接進入選中的點。( http://achrafkassioui.com/bir... )

decaffeinate：CoffeeScript 在很長一段時間內幫我們解決了傳統 JavaScript 中存在的痛點，不過隨著 ES6&ES7 的逐步流行，我們還是要從 CoffeeScript 中回歸到 JavaScript；decaffeinate 正是能夠方便地將 CoffeeScript 代碼轉化為現代的 JavaScript 代碼。( https://github.com/decaffeina... )

golden-layout：golden-layout 是非常強大的基于 JavaScript 的 Web 布局工具，它支持窗口的拖拽、縮放以及原生式的彈窗，同時 golden-layout 還提供了豐富的接口以方便動態增刪元素、修改布局或者自定義主題。golden-layout 官網還提供了與 RequireJS、React、Angular 等多種其他流行框架協同使用的示例。( http://golden-layout.com/ )

icaro：icaro 是輕量、高效地 JavaScript 對象觀察者實現，能夠自動監測 JavaScript 中對象的變化并且進行相應地譬如 DOM 更新等操作。icaro 使用了大量的 ES6 的特性，譬如 Proxies、WeakMaps、Maps 以及 Symbols，是非常不錯的可以用來學習利用最新的語言特性實現 JavaScript 響應式框架的開源庫。( https://github.com/GianlucaGu... )

Bundle Buddy：Bundle Buddy 能夠通過分析編譯生成的 SourceMap 來尋找 JavaScript 代碼塊之間的源代碼冗余情況。該工具能夠幫助開發者尋找合適的代碼分割點以降低最終發布應用的不穩定性，同時還能提升頁面加載性能。

gpu.js：在上周的前端每周清單中我們介紹過 GPGPU（General Purpose Computing on GPUs）的概念與基于 WebGL 的實現方式，而 gpu.js 就是提供了瀏覽器中快速實現 GPGPU 的單文件 JavaScript 庫。gpu.js 能夠自動地將某些特定的 JavaScript 函數編譯為中間語言，然后利用 WebGLS API 使其運行在 GPU 中；而在某些無法使用 GPU 的環境下，仍然會將這些函數以正常的 JavaScript 執行流運行。

Wade：Wade 是輕量級、高性能的 JavaScript 搜索庫，Wade 會在構建階段自動地為輸入數組中的每個字符串的字符構建反向索引，然后在搜索時候快速返回用戶輸入關鍵字對應地下標；Wade 優勢在于對于相同的數據集進行多次搜索時能夠避免冗余的遍歷。

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

Nano ID: Nano ID 是輕量級的、支持 URL 的 JavaScript 唯一 ID 生成器，它使用了強力密碼加密的隨機 API，能夠保證生成符號分布的平均性。

React 學習與實踐資料索引

React 與前端工程化實踐

前端每周清單半年盤點之 Vue.js 篇