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

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

《2017 前端開(kāi)發(fā)手冊(cè)》：Front-End Developer Handbook 2017 由 Cody Lindley 編寫，面向每一個(gè)希望學(xué)習(xí)前端的開(kāi)發(fā)者。該手冊(cè)概括地討論了前端工程化的相關(guān)實(shí)踐：在 2017 年中我們應(yīng)該使用哪些前端工具以及如何學(xué)習(xí)去使用這些數(shù)據(jù)。該手冊(cè)的內(nèi)容包含了 Web 技術(shù)的基礎(chǔ)：HTML、CSS、DOM 以及 JavaScript，以及基于這些技術(shù)構(gòu)建的優(yōu)秀開(kāi)源項(xiàng)目。

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

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

《GraphicsJS:輕量級(jí)繪圖庫(kù)》：目前 Web 開(kāi)發(fā)中最常用的創(chuàng)建交互式圖片的技術(shù)選型當(dāng)屬 SVG 與 Canvas，傳統(tǒng)的 Flash 與 Silverlight 已經(jīng)慢慢淡出歷史的舞臺(tái)。而對(duì)于 SVG 與 Canvas 的對(duì)比也顯示，如果是想創(chuàng)建與操作簡(jiǎn)單的交互性圖片，那么 SVG 當(dāng)屬首選。SVG 本身是基于 XML 的向量圖，任何通過(guò)svg標(biāo)簽載入的圖片都會(huì)成為 SVG DOM 中可操作的對(duì)象。而 GraphicsJS 正是基于 SVG 的簡(jiǎn)單易用的 JavaScript 繪圖庫(kù)。

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

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

《深入了解 JavaScript 中錯(cuò)誤對(duì)象與堆棧跟蹤》：JavaScript 中 Error 對(duì)象的堆棧跟蹤信息包含了從異常拋出點(diǎn)到構(gòu)造函數(shù)的所有棧幀信息，而手動(dòng)地去捕獲與操作堆棧跟蹤信息有助于我們?cè)陂_(kāi)發(fā)測(cè)試或者異常處理相關(guān)的框架時(shí)有更好地實(shí)踐。( http://suo.im/MiMWd )

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

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

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

《Slack 是如何減少其客戶端內(nèi)存占用的》：本文是 Slack 在其桌面應(yīng)用的開(kāi)發(fā)過(guò)程中探索出的如何減少應(yīng)用內(nèi)存開(kāi)銷的經(jīng)驗(yàn)介紹。Slack 最初為用戶的每個(gè)登錄團(tuán)隊(duì)都啟動(dòng)了相同的處理進(jìn)程，而后根據(jù)調(diào)研發(fā)現(xiàn)僅有部分用戶會(huì)同時(shí)使用多個(gè)團(tuán)隊(duì)；因此 Slack 從卸載后臺(tái)團(tuán)隊(duì)的 DOM 樹(shù)、分拆 JavaScript 代碼進(jìn)行優(yōu)雅降級(jí)、重構(gòu) JavaScript 代碼庫(kù)等多個(gè)方式來(lái)優(yōu)化桌面應(yīng)用的內(nèi)存占用。( http://6me.us/z0XSh3 )

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

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

《面向“遠(yuǎn)古” Web 開(kāi)發(fā)者的現(xiàn)代 JavaScript 教程》：本文主要是面向那些從 PHP、JSP、Rails 占據(jù)統(tǒng)治地位時(shí)開(kāi)始進(jìn)行 Web 技術(shù)的開(kāi)發(fā)者進(jìn)行常見(jiàn)的現(xiàn)代 JavaScript 基礎(chǔ)概念的介紹。( https://parg.co/bsF )

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

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

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

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

《JavaScript 中構(gòu)建響應(yīng)式引擎》：本系列文章介紹了如何在 JavaScript 中構(gòu)建高性能的響應(yīng)式引擎，對(duì)于有興趣了解 MobX 底層原理的同學(xué)來(lái)說(shuō)也是個(gè)不錯(cuò)的教程，目前包含了對(duì)于可觀測(cè)對(duì)象的構(gòu)造解釋、屬性推導(dǎo)與依賴追蹤等內(nèi)容（ https://parg.co/bhR ）

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

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

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

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

《使用 Inline Cache 優(yōu)化動(dòng)態(tài) JavaScript 代碼》：本文是作者在開(kāi)發(fā) JSIL 開(kāi)源庫(kù)時(shí)使用的一系列優(yōu)化手段的總結(jié)，主要關(guān)于如何使用多態(tài)在線緩存（Polymorphic Inline Cache）來(lái)優(yōu)化代碼執(zhí)行速度，不過(guò)這種方式也有可能造成意外的變化。作者介紹了何謂 Inline Cache 及其優(yōu)化原理和帶來(lái)的性能提升評(píng)測(cè)等內(nèi)容。( https://parg.co/b4a )

《基于 JavaScript 構(gòu)建數(shù)據(jù)表達(dá)式分詞器》：本文是一篇挺有意思的文章，介紹如何利用 JavaScript 解構(gòu)常見(jiàn)數(shù)學(xué)表達(dá)式并且從中提取出相關(guān)實(shí)體。本文涉及到的內(nèi)容包括對(duì)于分詞器的簡(jiǎn)單介紹、對(duì)于抽象語(yǔ)法樹(shù) AST 的介紹以及最終如何使用代碼來(lái)實(shí)現(xiàn)分詞算法。( https://parg.co/bRO )

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

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

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

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

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

《8 小時(shí)內(nèi)學(xué)習(xí) Node.js》：Node.js 是基于 Google Chrome V8 引擎的 JavaScript 框架，其能夠用于開(kāi)發(fā)類似于視頻直播、單頁(yè)應(yīng)用等 IO 密集型的 Web 項(xiàng)目。而本文則是提供了完整的從零到一的 Node.js 學(xué)習(xí)路線圖，包含了基礎(chǔ)的環(huán)境構(gòu)建、Console 使用、核心模塊使用、基本的 Web 服務(wù)器搭建等等內(nèi)容。( https://parg.co/bNy )

《CSS-in-JavaScript：基于組件的樣式組織》：通過(guò)使用內(nèi)聯(lián)樣式，我們能夠利用 JavaScript 帶來(lái)的可編程性的便利來(lái)組織樣式代碼。它能夠?yàn)槲覀兲峁╊愃朴?CSS 預(yù)處理器、命名空間等多方面的輔助。本文則是介紹了幾個(gè)常見(jiàn)的適用于 CSS-in-JS 技術(shù)的場(chǎng)景，譬如排版、空格等。( https://parg.co/bNe )

《從零開(kāi)始基于 JavaScript 構(gòu)建簡(jiǎn)單神經(jīng)網(wǎng)絡(luò)》：本文不是純粹的前端開(kāi)發(fā)文章，對(duì)于聽(tīng)說(shuō)過(guò)人工智能與神經(jīng)網(wǎng)絡(luò)并且有興趣的開(kāi)發(fā)者不妨一讀。而本文則是漸進(jìn)地介紹神經(jīng)網(wǎng)絡(luò)與深度學(xué)習(xí)理論基礎(chǔ)、如何使用 JavaScript 實(shí)現(xiàn)簡(jiǎn)單的數(shù)學(xué)公式、如何實(shí)現(xiàn)簡(jiǎn)單的神經(jīng)網(wǎng)絡(luò)等內(nèi)容。( https://parg.co/bNa )

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

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

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

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

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

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

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

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

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

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

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

《JavaScript 單元測(cè)試框架大亂斗：Jasmine、Mocha、AVA、Tape 以及 Jest》：在開(kāi)始新的前端項(xiàng)目時(shí)，我們常常會(huì)考慮應(yīng)該使用哪一個(gè)單元測(cè)試框架，或者考慮應(yīng)該為哪些代碼添加單元測(cè)試。而本文則對(duì)于常用的 Web 開(kāi)發(fā)中的單元測(cè)試框架 Jasmie、Mocha、AVA、Tape 以及 Jest 進(jìn)行了橫向?qū)Ρ龋⑶一谧约旱慕?jīng)驗(yàn)給出了不同應(yīng)用場(chǎng)景與需求下不同的單元測(cè)試框架選項(xiàng)建議。( https://parg.co/bJ5 )

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

《面向 Web 設(shè)計(jì)師與開(kāi)發(fā)者的免費(fèi)電子書(shū)合集》：本文介紹了十?dāng)?shù)本優(yōu)秀的面向 Web 設(shè)計(jì)師與開(kāi)發(fā)者的免費(fèi)的電子書(shū)，涵蓋了 CSS&HTML 基礎(chǔ)、現(xiàn)代 JavaScript 開(kāi)發(fā)、Git、PHP 等多個(gè)領(lǐng)域。( https://parg.co/bis )

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

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

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

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

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

《Flow 與 TypeScript》：本文主要對(duì)比了 Flow 與 TypeScript 這兩個(gè)常用的 JavaScript 靜態(tài)類型檢測(cè)工具，首先介紹了在簡(jiǎn)單項(xiàng)目中如何使用 TypeScript 與 Flow。然后對(duì)比了二者在類型覆蓋率上的漸進(jìn)對(duì)比，會(huì)發(fā)現(xiàn)使用 Flow 之后因?yàn)槠漭^為嚴(yán)格的類型要求會(huì)相對(duì)較快地實(shí)現(xiàn)高覆蓋，而 TypeScript 則相對(duì)較為松弛。( http://thejameskyle.com/adopt... )

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

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

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

《如何用好 JavaScript console》：JavaScript 中最主要的的調(diào)試工具之一即是 console.log，而 console 對(duì)象還包含著其他幾個(gè)常用的調(diào)試方法。本文則是介紹了 console 對(duì)象，以及如何使用它進(jìn)行簡(jiǎn)單的時(shí)間消耗評(píng)測(cè)、優(yōu)化數(shù)組或者對(duì)象輸出格式、通過(guò) CSS 優(yōu)化輸入等等。( https://parg.co/b9o )

《現(xiàn)代 Web 開(kāi)發(fā)魔法書(shū)》：本書(shū)是對(duì)現(xiàn)代 JavaScript Web 開(kāi)發(fā)中涉及知識(shí)的分類與介紹，來(lái)源于作者日常工作中發(fā)送給全棧 Web 團(tuán)隊(duì)新人的資源；目前已經(jīng)納入了超過(guò)兩千的涵蓋了項(xiàng)目、工具、插件、服務(wù)、文章、數(shù)據(jù)、站點(diǎn)等多方面的鏈接。本書(shū)包含了 Web 平臺(tái)概述、HTML5，CSS，JS 特性介紹、常用的 GUI 框架與架構(gòu)介紹、應(yīng)用開(kāi)發(fā)流程中使用的工具介紹等等欄目。( https://parg.co/bv9 )

《基于 JavaScript 的機(jī)器學(xué)習(xí)》：人工智能與機(jī)器學(xué)習(xí)的浪潮洶涌而來(lái)，JavaScript 也并非旁觀者；可能有很多人認(rèn)為 JavaScript 過(guò)于緩慢、缺乏大量的科學(xué)計(jì)算庫(kù)、僅適用于 Web 開(kāi)發(fā)，而本文以及系列文章則深入淺出地介紹了如何利用 JavaScript 進(jìn)行常見(jiàn)的深度學(xué)習(xí)操作。本文即以簡(jiǎn)單的回歸擬合為例，從最基礎(chǔ)的庫(kù)安裝、數(shù)據(jù)導(dǎo)入、數(shù)據(jù)預(yù)處理到模型訓(xùn)練、模型預(yù)測(cè) 介紹了如何使用 JavaScript 進(jìn)行簡(jiǎn)單的機(jī)器學(xué)習(xí)任務(wù)。( https://parg.co/b9K )

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

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

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

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

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

基于 Headless Chrome 的自動(dòng)化測(cè)試：本文介紹了如何在 Headless Chrome 環(huán)境中使用 Karma 作為測(cè)試驅(qū)動(dòng)運(yùn)行基于 Mocha 與 Chai 的自動(dòng)化測(cè)試用例。Headless Chrome 允許我們?cè)跓o(wú)界面環(huán)境下，使用特性完備的 Chrome 來(lái)執(zhí)行 JavaScript 腳本并且渲染網(wǎng)頁(yè)。本文首先介紹了使用 karma-chrome-launcher 來(lái)搭建本地啟動(dòng) Chrome 環(huán)境，然后介紹了使用 Mocha 與 Chai 來(lái)編寫基礎(chǔ)測(cè)試用例，最后還討論了如何自定義 Headless Chrome 啟動(dòng)器并且集成到 Travis CI 環(huán)境下。( https://parg.co/beo )

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

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

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

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

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

前端 JavaScript 面試問(wèn)題總結(jié)：本文作者發(fā)現(xiàn)目前并沒(méi)有太多令人滿意的前端 JavaScript 面試問(wèn)題列表，因此他基于自己的面試經(jīng)歷與實(shí)踐總結(jié)出了本文。本文主要包含以下部分，首先是基礎(chǔ)概念的認(rèn)知，譬如對(duì)于閉包、EventLoop、REST 等概念的介紹；然后是對(duì)于編碼能力的考量，譬如對(duì)于常見(jiàn)的數(shù)據(jù)結(jié)構(gòu)與算法的實(shí)現(xiàn)、代碼調(diào)試能力與錯(cuò)誤定位的評(píng)測(cè)等等；最后是對(duì)于整體系統(tǒng)設(shè)計(jì)能力的考量，譬如如何設(shè)計(jì)全棧的 Twitter 實(shí)現(xiàn)架構(gòu)等等。( https://parg.co/bIL )

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

代碼風(fēng)格約定與標(biāo)準(zhǔn)：本倉(cāng)庫(kù)提供了一系列的各個(gè)語(yǔ)言的常用代碼風(fēng)格約定與標(biāo)準(zhǔn)，與 JavaScript 相關(guān)的包含了來(lái)自 Google、Airbnb 等多個(gè)公司或者社區(qū)的樣式規(guī)范，還有包括 HTML、CSS、SCSS 等一系列 Web 相關(guān)的規(guī)范。

ES6 中的 JavaScript 工廠函數(shù)實(shí)現(xiàn)：本文歸屬于 Eric Elliott 發(fā)布的 Composing Software 系列，介紹在 JavaScript ES6 語(yǔ)法背景下如何實(shí)現(xiàn)工廠函數(shù)。所謂工廠函數(shù)即是非類或者構(gòu)造函數(shù)的，能干會(huì)某個(gè)新創(chuàng)建對(duì)象的函數(shù)；工廠函數(shù)能夠簡(jiǎn)化我們創(chuàng)建新對(duì)象的過(guò)程，本文即是詳細(xì)地介紹了如何實(shí)現(xiàn)工廠函數(shù)，也是一篇不錯(cuò)的 ES6 函數(shù)語(yǔ)法講解；更多 JavaScript 相關(guān)資料參考 https://parg.co/bMI 。

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

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

自定義基于 JavaScript 的 16 位虛擬機(jī)：本文介紹了如何利用 JavaScript 自定義 16 位虛擬機(jī)，主要包括如何設(shè)計(jì)某個(gè)簡(jiǎn)單的匯編語(yǔ)言、如何構(gòu)建某個(gè)編譯器能夠?qū)?*.asm 文件編譯為可執(zhí)行格式、如何構(gòu)建某個(gè)能夠模擬內(nèi)存、CPU 以及部分 I/O 操作的虛擬機(jī)。文章內(nèi)容依次介紹了虛擬硬件的基礎(chǔ)、限制、匯編語(yǔ)言、編譯器、調(diào)試器、編碼與解碼等內(nèi)容；更多 JavaScript 相關(guān)資料參考 https://parg.co/bMI 。

JavaScript 設(shè)計(jì)模式學(xué)習(xí)：本書(shū)是 Addy Osmani 著作的開(kāi)源書(shū)籍，主要介紹面向 JavaScript 語(yǔ)言的經(jīng)典與現(xiàn)代的常用設(shè)計(jì)模式。所謂設(shè)計(jì)模式即是軟件設(shè)計(jì)中常見(jiàn)問(wèn)題的可復(fù)用解決方案，對(duì)于任何一門編程語(yǔ)言都是非常值得探索的話題。本文首先概述了設(shè)計(jì)模式的基礎(chǔ)理論，然后介紹了 JavaScript 中常見(jiàn)的十余種類與對(duì)象的設(shè)計(jì)模式，接下來(lái)介紹了 JavaScript 界面設(shè)計(jì)相關(guān)的 MV* 設(shè)計(jì)模式，然后還介紹了 JavaScript 模塊化設(shè)計(jì)以及 jQuery 中的設(shè)計(jì)模式等內(nèi)容；更多 JavaScript 設(shè)計(jì)模式相關(guān)參考 https://parg.co/bIO 。

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

JavaScript 之路：本書(shū)希望為任何對(duì) JavaScript 有興趣的開(kāi)發(fā)者提供 JavaScript 的多領(lǐng)域知識(shí)，其兼具了入門簡(jiǎn)單、對(duì)初學(xué)者友好、使用 ES2015 語(yǔ)法以及規(guī)范的樣式指南等特點(diǎn)。本書(shū)主要包含以下章節(jié)：JavaScript 語(yǔ)法基礎(chǔ)、利用 DOM 接口創(chuàng)建交互性的網(wǎng)頁(yè)、構(gòu)建完整的 Web 應(yīng)用等內(nèi)容；更多 JavaScript 相關(guān)資料參考 https://parg.co/bMI 。

2017 Web 開(kāi)發(fā)趨勢(shì)：Web 開(kāi)發(fā)在 2016 年里得到了長(zhǎng)足的發(fā)展與進(jìn)步，而本文則高屋建瓴地分析了 2017 年中 Web 開(kāi)發(fā)可能面臨的機(jī)遇與挑戰(zhàn)。作者首先討論了人工智能的前景以及 Web 與之相結(jié)合的案例，然后討論了物聯(lián)網(wǎng)行業(yè)中 Web 相關(guān)的開(kāi)發(fā)案例；接下來(lái)作者分析了崛起的 JavaScript 以及目前流行的項(xiàng)目，然后又從靜態(tài)網(wǎng)站生成器、虛擬現(xiàn)實(shí)、GIFs、Bots 等角度討論其他的發(fā)展方向。

JavaScript 中有趣而又無(wú)語(yǔ)的例子：JavaScript 是一門有趣的語(yǔ)言，它有著簡(jiǎn)單的語(yǔ)法、龐大的生態(tài)系統(tǒng)與社區(qū)，不過(guò) JavaScript 中也有著很多令人無(wú)語(yǔ)的地方。本文即是對(duì) JavaScript 中一些有趣的、出乎意料的用法收集，對(duì)于初學(xué)者是個(gè)不錯(cuò)的深入教程，而對(duì)于資深開(kāi)發(fā)者也可以拿來(lái)作為面試題目。本文中包含的例子譬如 [] == ![]、NaN 的用法注意、try-finally 等等；更多 JavaScript 相關(guān)資料參考 https://parg.co/bMI 。

基于 Proxy 的 PopUnder 庫(kù)反混淆：本視頻通過(guò)對(duì)某個(gè)商用的 Chrome 59 中 PopUnder 庫(kù)，的執(zhí)行過(guò)程解析，來(lái)介紹如何利用 ES6 的 Proxy 進(jìn)行，簡(jiǎn)單的 JavaScript 混淆代碼逆向破解。視頻還是挺有意思的，作者首先分析了經(jīng)過(guò)混淆的源代碼，發(fā)現(xiàn)無(wú)法下手；然后利用 Proxy 監(jiān)聽(tīng)常見(jiàn)的 Windows 中 createElement 等函數(shù)的調(diào)用來(lái)了解該庫(kù)的執(zhí)行流程，最后再根據(jù) API 的調(diào)用順序復(fù)現(xiàn)出該庫(kù)。更多 JavaScript 設(shè)計(jì)模式相關(guān)參考 https://parg.co/bIO 。

三周時(shí)間打造全棧 JavaScript Web 應(yīng)用：本文記錄了某個(gè)編程初學(xué)者如何用三周時(shí)間，循序漸進(jìn)地從零構(gòu)建出，基于 JavaScript 的全棧電子商務(wù)應(yīng)用。本文從最初的產(chǎn)品設(shè)計(jì)與原型圖構(gòu)建開(kāi)始，然后介紹了如何選擇合適的數(shù)據(jù)結(jié)構(gòu)與數(shù)據(jù)庫(kù)。接下來(lái)介紹了如何創(chuàng)建 Github 倉(cāng)庫(kù)并且使用敏捷開(kāi)發(fā)流程，最后介紹了如何利用 Express 與 Firebase 搭建服務(wù)端、使用 React 以及 Victory.js 構(gòu)建前端應(yīng)用等內(nèi)容；更多 JavaScript 相關(guān)學(xué)習(xí)參考現(xiàn)代 JavaScript 開(kāi)發(fā)：語(yǔ)法基礎(chǔ)與實(shí)踐技巧。

基于 CSS 與 JavaScript 的幀動(dòng)畫(huà)教程

《開(kāi)源在線代碼演示網(wǎng)站 Dwitter 發(fā)布 》：Dwitter 是類似于 CodePen 這樣的，不過(guò)專注于 JavaScript 代碼片演示的網(wǎng)站，已經(jīng)有很多開(kāi)發(fā)者在上面貢獻(xiàn)了奇妙的基于 JavaScript 的動(dòng)畫(huà)或者小程序。

《開(kāi)源在線代碼演示網(wǎng)站 Dwitter 發(fā)布 》：Dwitter 是類似于 CodePen 這樣的，不過(guò)專注于 JavaScript 代碼片演示的網(wǎng)站，已經(jīng)有很多開(kāi)發(fā)者在上面貢獻(xiàn)了奇妙的基于 JavaScript 的動(dòng)畫(huà)或者小程序。

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

《在瀏覽器中實(shí)現(xiàn)自動(dòng)駕駛汽車》：人工智能與深度學(xué)習(xí)的浪潮滾滾而來(lái)，也給我們帶來(lái)了很多有趣的應(yīng)用。該項(xiàng)目利用 JavaScript 創(chuàng)建了一個(gè)完整的自我學(xué)習(xí)的代理，能夠在一個(gè) 2D 環(huán)境下控制某個(gè)車輛自動(dòng)規(guī)避各種障礙 。用戶還可以通過(guò)鼠標(biāo)繪制出新的障礙，而小車可以通過(guò)強(qiáng)化學(xué)習(xí)不斷進(jìn)行自我更新，值得一試。( http://suo.im/4egERz )

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

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

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

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

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

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

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

《Mavo》：Mavo 是純粹的基于 HTML 標(biāo)記的用來(lái)創(chuàng)建富客戶端 Web 應(yīng)用的框架，它允許開(kāi)發(fā)者在沒(méi)有服務(wù)端或者 JavaScript 腳本的情況下快速創(chuàng)建動(dòng)態(tài)應(yīng)用。( https://parg.co/b8n )

《Workbox》：Workbox 是來(lái)自 Google Chrome 團(tuán)隊(duì)的快速將現(xiàn)有應(yīng)用轉(zhuǎn)化為 Progressive Web Apps 的 JavaScript 庫(kù)；Workbox 允許我們通過(guò) Webpack 插件、Gulp 插件以及 npm 腳本的方式快速地為當(dāng)前應(yīng)用的資源創(chuàng)建對(duì)應(yīng)加載 ServiceWorker。( https://workboxjs.org/ )

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

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

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

icaro：icaro 是輕量、高效地 JavaScript 對(duì)象觀察者實(shí)現(xiàn)，能夠自動(dòng)監(jiān)測(cè) JavaScript 中對(duì)象的變化并且進(jìn)行相應(yīng)地譬如 DOM 更新等操作。icaro 使用了大量的 ES6 的特性，譬如 Proxies、WeakMaps、Maps 以及 Symbols，是非常不錯(cuò)的可以用來(lái)學(xué)習(xí)利用最新的語(yǔ)言特性實(shí)現(xiàn) JavaScript 響應(yīng)式框架的開(kāi)源庫(kù)。( https://github.com/GianlucaGu... )

Bundle Buddy：Bundle Buddy 能夠通過(guò)分析編譯生成的 SourceMap 來(lái)尋找 JavaScript 代碼塊之間的源代碼冗余情況。該工具能夠幫助開(kāi)發(fā)者尋找合適的代碼分割點(diǎn)以降低最終發(fā)布應(yīng)用的不穩(wěn)定性，同時(shí)還能提升頁(yè)面加載性能。

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

Wade：Wade 是輕量級(jí)、高性能的 JavaScript 搜索庫(kù)，Wade 會(huì)在構(gòu)建階段自動(dòng)地為輸入數(shù)組中的每個(gè)字符串的字符構(gòu)建反向索引，然后在搜索時(shí)候快速返回用戶輸入關(guān)鍵字對(duì)應(yīng)地下標(biāo)；Wade 優(yōu)勢(shì)在于對(duì)于相同的數(shù)據(jù)集進(jìn)行多次搜索時(shí)能夠避免冗余的遍歷。

swagger-decorator：swagger-decorator 是旨在一處注解多處使用的 JavaScript & Node.js 應(yīng)用中實(shí)體類與方法注解庫(kù)，其能夠用于實(shí)體類生成與校驗(yàn)、Sequelize ORM 實(shí)體類生成、面向 Koa 的路由注解與 Swagger 文檔自動(dòng)生成的場(chǎng)景。

Nano ID: Nano ID 是輕量級(jí)的、支持 URL 的 JavaScript 唯一 ID 生成器，它使用了強(qiáng)力密碼加密的隨機(jī) API，能夠保證生成符號(hào)分布的平均性。

React 學(xué)習(xí)與實(shí)踐資料索引

React 與前端工程化實(shí)踐

前端每周清單半年盤點(diǎn)之 Vue.js 篇