前端每週清單半年盤點之 JavaScript 篇

前端每週清單專一前端領域內容，以對外文資料的蒐集爲主，幫助開發者瞭解一週前端熱點；分爲新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峯人生等欄目。歡迎關注【前端之巔】微信公衆號（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 一、Stage 二、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 篇