摘要：本文即以簡單的回歸擬合為例，從最基礎(chǔ)的庫安裝數(shù)據(jù)導入數(shù)據(jù)預處理到模型訓練模型預測介紹了如何使用進行簡單的機器學習任務(wù)。

前端每周清單第 18 期：Firefox、Chrome、React、Angular發(fā)布新版本；提升RN應(yīng)用性能的方法 為InfoQ中文站特供稿件，首發(fā)地址為這里；如需轉(zhuǎn)載，請與InfoQ中文站聯(lián)系。從屬于筆者的  Web 前端入門與工程實踐的前端每周清單系列系列；部分文章需要自備梯子。

前端 前端每周清單

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

國內(nèi)國外，前端最新動態(tài)

《Firefox 54 發(fā)布》：在近日發(fā)布的 Firefox 54 版本中完成了對于 Firefox 的多進程版本升級，大大提升了穩(wěn)定性，在未來會保證即使某個頁卡崩潰了也不會影響其他頁卡。此外，F(xiàn)irefox 54 中還引入了新的 WebExtension API，允許使用 WebExtension 來創(chuàng)建自定義的開發(fā)者面板；Firefox 54 中還加入了 CSS 的 clip-path 屬性支持等新特性。( https://parg.co/b9c )

《Chrome 60 Beta 發(fā)布，新增 Patint Timing API》：近日發(fā)布的 Chrome 60 Beta 版本中添加了 Paint Timing API、CSS font-display 等新特性，同時優(yōu)化了證書管理、支付請求接口等功能。我們可以方便地使用 Paint Timing API 來對網(wǎng)頁的加載指標中的，首屏繪制與首屏內(nèi)容繪制進行計算，具體可以參考 Leveraging the Performance Metrics that Most Affect User Experience 這篇文章。( https://parg.co/b9q )

《React 15.6.0 發(fā)布》：React 15.6.0 中主要帶來了輸入域的提升以及對于 Deprecation 提示的優(yōu)化。該版本中 onChange 事件響應(yīng)會變得更加穩(wěn)定，并且能夠處理 IE11 中存在的部分臨界情況；同時該版本還優(yōu)化了對于使用廢棄接口的提示，不再強行使用 console.error 提示，而是替換為了 console.warn。( https://parg.co/b9m )

《Angular 4.2 發(fā)布》：該版本可以無縫替換之前的 4.x.x 系列版本，主要包含了對于 Angular Form 中的極值校驗、提升了 i18n 工具等等內(nèi)容；之外我們還可以參考 Angular 的現(xiàn)狀與 Angular 5 的預定日期這篇文章來了解更多關(guān)于 Angular 的訊息。( https://parg.co/b9Y )

《ESLint 4.0.0 發(fā)布》：作為大版本更新，ESLint 4.0.0 中添加了很多的新特性，并且針對之前版本中包含的錯誤進行了修正；可以點擊查看原文了解具體的規(guī)則更新情況以及升級指南。( https://parg.co/b9P )

步步為營，掌握基礎(chǔ)技能

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

《九個 React Native 動畫指南》：本文通過介紹九個 React Native 動畫地實現(xiàn)從零到一的介紹了 React Native 中的動畫機制。包含了通過 Animated.timing 來添加樣式動畫、創(chuàng)建可伸縮的按鈕、創(chuàng)建可拖拽的卡片、動態(tài)地變換元素的顏色、角度、序列位置等等實例。( https://parg.co/b9d )

《Airbnb: 從 Mocha 遷移到 Jest 帶來的測試性能優(yōu)化》：本文介紹了 Airbnb 在將單元測試框架從 Mocha 遷移到 Jest 之后帶來的性能提升，原本的測試時間從超過十二分鐘降低到了不到五分鐘。本文首先介紹了通過簡單地全局設(shè)置來避免大量地測試代碼更改，然后討論了如何構(gòu)建測試架構(gòu)以提供測試速度并且減少不確定性。

《在 Vue.js 中使用 Mixins》：在項目開發(fā)中我們經(jīng)常會碰到兩個組件的業(yè)務(wù)邏輯有所相似，可能共享相同的底層業(yè)務(wù)邏輯；此時我們就需要考慮如何來合理地劃分代碼，即避免冗余代碼，也不能過度抽象。而本文則介紹了如何在 Vue.js 中使用 Mixins 來編寫可重復使用的功能代碼片；Mixin 允許我們將部分代碼片封裝到函數(shù)中然后動態(tài)地在多個組件中使用。( https://parg.co/b9S )

《構(gòu)建 React 組件庫》：本系列文章循序漸進地介紹如何設(shè)計編寫自己的小型組件庫并且將其發(fā)布到 NPM 倉庫中；第一篇文章著眼于如何從零開始搭建開發(fā)環(huán)境，第二篇文章則介紹如何利用 styled-components 來為組件添加樣式、添加調(diào)色板、構(gòu)建高效開發(fā)流程以及如何實踐 Atomic Design 原則。( https://parg.co/b9u )

立足實踐，提示實際水平

《為什么我選擇了 React 而不是 Vue？》：本文作者闡述了自己在技術(shù)選型過程中更傾向于 React 的原因，本文帶有較強的主觀色彩，請讀者批判性閱讀。本文作者認為 React 與 Vue 雖然是相似的前端組件型庫，但是 Vue、Angular、Knockout 等框架依舊是以 HTML 為中心，使用指令來描述部分邏輯；而 React 則是以 JavaScript 為中心，完全使用 JavaScript 代碼來描述邏輯。本文從模板、工具、狀態(tài)的可變性等角度來論證自己的觀點。( https://parg.co/b9H )

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

《使用 Webpack 的 Magic Comment 特性簡化代碼分割》：新近發(fā)布的 Webpack 2.4.0 版本中引入了所謂的 Magic Comment 特性，該特性允許我們在動態(tài)導入時手動指定塊名，從而能夠幫助我們簡化代碼分割與服務(wù)端渲染的邏輯。本文則是以在 Universal Component 中實現(xiàn) SSR 為例，介紹如何利用該特性來顯式地關(guān)聯(lián)需要導入的組件與塊名。( https://parg.co/b9A )

《5 個提升 React Native 應(yīng)用性能的方法》：本文作者分享了自己在過去一段時間內(nèi)嘗試提升公司 React Native 應(yīng)用性能的實踐經(jīng)驗，包括如何設(shè)置有效的性能測試、強制啟動 no-bind 規(guī)則、使用函數(shù)式組件、重制 TabMap 的邏輯等等。( https://parg.co/b93 )

深度思考，升華開發(fā)智慧

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

《京東 618：如何配合業(yè)務(wù)打造 JDReact 三端融合開發(fā)平臺？》：良好解決多終端開發(fā)問題是提升團隊開發(fā)效率的有效方法，本文全面解析了京東 JDReact 三端融合平臺。本文首先回顧了傳統(tǒng)無線開發(fā)的痛點，然后討論了 React Native 的優(yōu)勢與局限，最后介紹了 JDReact 三端融合平臺的整體架構(gòu)、在功能、加載性能、內(nèi)存方面的改進與優(yōu)化以及發(fā)布到生產(chǎn)環(huán)境中的流程等內(nèi)容。( https://parg.co/b9U )

《談爬蟲反爬蟲套路，以及前端工程師在該領(lǐng)域的逆襲》：本文首先介紹了爬蟲與反爬蟲的現(xiàn)狀，造成目前爬蟲流量泛濫的原因，然后討論了，爬蟲反爬蟲技術(shù)的現(xiàn)狀以及雙方相互套路的方式，最后聊了下前端工程師在該領(lǐng)域會起到的作用。( https://parg.co/b9b )

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

《詳解 HTTPS 基礎(chǔ)以及如何從 HTTP 切換到 HTPPS》：HTTPS 已經(jīng)成為了現(xiàn)代站點不可或缺的部分，Chrome 與 Firefox 等瀏覽器會為沒有使用 HTTPS 的網(wǎng)站設(shè)置警告標識，搜索引擎也會給 HTTPS 的站點進行額外加分。本文則是先詳細地解釋 HTTPS 的底層原理，然后介紹如何為 Apache 站點添加證書并且啟用 HTTPS 連接。( https://parg.co/b9Z )

樂于分享，共推前端發(fā)展

《Amplitude.js》：Amplitude.js 是輕量級、零依賴的現(xiàn)代 HTML5 音頻播放器，。( https://github.com/521dimensi... )

《WCDB》：WCDB 是由微信開源的，一個高效、完整、易用的移動數(shù)據(jù)庫框架，基于 SQLCipher，支持 iOS, macOS 和Android。( https://github.com/Tencent/wcdb )

《flubber》：flubber 是用于平滑形狀變換動畫的工具庫。在 Web 開發(fā)中，如果我們需要在基于 SVG 或者 Canvas 構(gòu)建的兩個圖形之間進行變換；如果這兩個圖形本身毫無關(guān)聯(lián)，那么可能會出現(xiàn)異常的中間狀態(tài)。而 flubber 則內(nèi)置了一些推測算法來幫我們平滑這個變換過程。

《collect.js》：collect.js 提供了便捷且零依賴的操作數(shù)組與對象的多個工具函數(shù)，譬如 combine 函數(shù)可以將兩個數(shù)組合并為對象列表，groupBy 可以根據(jù)鍵來進行分組等等。( https://github.com/ecrmnn/col... )

「前端之巔」是InfoQ旗下關(guān)注前端技術(shù)的垂直社群，加入前端之巔學習群請關(guān)注「前端之巔」公眾號后回復“加群”。投稿請發(fā)郵件到editors@cn.infoq.com，注明“前端之巔投稿”。