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

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

前端 前端每周清單

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

國(guó)內(nèi)國(guó)外，前端最新動(dòng)態(tài)

《Firefox 54 發(fā)布》：在近日發(fā)布的 Firefox 54 版本中完成了對(duì)于 Firefox 的多進(jìn)程版本升級(jí)，大大提升了穩(wěn)定性，在未來(lái)會(huì)保證即使某個(gè)頁(yè)卡崩潰了也不會(huì)影響其他頁(yè)卡。此外，F(xiàn)irefox 54 中還引入了新的 WebExtension API，允許使用 WebExtension 來(lái)創(chuàng)建自定義的開(kāi)發(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 等新特性，同時(shí)優(yōu)化了證書(shū)管理、支付請(qǐng)求接口等功能。我們可以方便地使用 Paint Timing API 來(lái)對(duì)網(wǎng)頁(yè)的加載指標(biāo)中的，首屏繪制與首屏內(nèi)容繪制進(jìn)行計(jì)算，具體可以參考 Leveraging the Performance Metrics that Most Affect User Experience 這篇文章。( https://parg.co/b9q )

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

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

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

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

《如何用好 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 )

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

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

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

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

立足實(shí)踐，提示實(shí)際水平

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

《現(xiàn)代 Web 開(kāi)發(fā)魔法書(shū)》：本書(shū)是對(duì)現(xiàn)代 JavaScript Web 開(kāi)發(fā)中涉及知識(shí)的分類(lèi)與介紹，來(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 )

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

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

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

《基于 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 )

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

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

《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 )

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

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

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

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

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

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

「前端之巔」是InfoQ旗下關(guān)注前端技術(shù)的垂直社群，加入前端之巔學(xué)習(xí)群請(qǐng)關(guān)注「前端之巔」公眾號(hào)后回復(fù)“加群”。投稿請(qǐng)發(fā)郵件到[email protected]，注明“前端之巔投稿”。