摘要：發(fā)布是由團(tuán)隊(duì)開(kāi)源的，操作接口庫(kù)，已成為事實(shí)上的瀏覽器操作標(biāo)準(zhǔn)。本周正式發(fā)布，為我們帶來(lái)了，，支持自定義頭部與腳部，支持增強(qiáng)，兼容原生協(xié)議等特性變化。新特性介紹日前發(fā)布了大版本更新，引入了一系列的新特性與提升，本文即是對(duì)這些變化進(jìn)行深入解讀。

前端每周清單專(zhuā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í)獲取前端每周清單。

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

ECharts 4.0 發(fā)布: 2018 年 1 月 16 日，百度的 ECharts 團(tuán)隊(duì)對(duì)產(chǎn)品進(jìn)行了更新，發(fā)布了時(shí)隔兩年的大版本 4.0。在 ECharts 4.0 新版本中，主要在性能功能、易用性及擴(kuò)大使用范圍三個(gè)大的方面進(jìn)行了八項(xiàng)升級(jí)：帶給用戶(hù)更強(qiáng)大的性能和功能，讓開(kāi)發(fā)者使用 ECharts 變得更加輕松，讓更多的人在更多的場(chǎng)景都能訪問(wèn)使用 ECharts 制作的可視化產(chǎn)品。

Puppeteer 1.0 發(fā)布: Puppeteer 是由 Google Chrome 團(tuán)隊(duì)開(kāi)源的，Headless Chrome 操作接口庫(kù)，已成為事實(shí)上的 Headless 瀏覽器操作標(biāo)準(zhǔn)。本周 Puppeteer 1.0 正式發(fā)布，為我們帶來(lái)了 Chromium 65，page.coverage API，page.pdf() 支持自定義頭部與腳部，XPath 支持增強(qiáng)，target.createCDPSession() 兼容原生協(xié)議等特性變化。

jQuery 3.3.0 發(fā)布: jQuery 仍然是很多 Web 開(kāi)發(fā)工作中不可或缺的部分，自上次 jQuery 大版本更新以來(lái)，其核心團(tuán)隊(duì)更多地著眼于應(yīng)該移除什么部分，而不是添加新的功能特性，來(lái)保證 jQuery 的小巧易用性。該版本中移除了部分過(guò)時(shí)的 API，并且為 .addClass(), .removeClass(), 以及 .toggleClass() 這幾個(gè)函數(shù)支持輸入某個(gè)樣式類(lèi)名數(shù)組作為參數(shù)。

Angular 5.2 發(fā)布: Angular 5.2 發(fā)布，其可以直接替代之前的 5.1 版本，包含了部分錯(cuò)誤修復(fù)與性能提升。新版本中，優(yōu)化了對(duì)于模板的類(lèi)型檢查，添加了對(duì)于 TypeScript 2.6 的支持，優(yōu)化了 Router 參數(shù)與數(shù)據(jù)繼承。

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

無(wú)縫為 create-react-app 項(xiàng)目添加 SSR + 代碼分割特性: create-react-app 是非常不錯(cuò)的原型化工具，能夠快速搭建 React 基礎(chǔ)應(yīng)用。本文即是介紹在無(wú)需彈出配置的情況下，為 create-react-app 創(chuàng)建的項(xiàng)目添加服務(wù)端渲染與代碼分割異步加載的特性；本文依次介紹了服務(wù)端渲染、基于 react-loadable 的代碼分割、服務(wù)端代碼分割、利用 Webpack 的 chunkNames 特性等內(nèi)容。更多 React 學(xué)習(xí)參考 React 與前端工程化實(shí)踐。

Vue Devtools 4.0 新特性介紹: 日前 Vue Devtools 發(fā)布了 4.0 大版本更新，引入了一系列的新特性與提升，本文即是對(duì)這些變化進(jìn)行深入解讀。本文介紹的新特性包括了組件數(shù)據(jù)可編輯、在外部編輯器中打開(kāi)組件、展示原始組件名、優(yōu)化組件審查方式、根據(jù)組件過(guò)濾事件、可伸縮的審查器等；更多 Vue.js 學(xué)習(xí)資料參考 Vue Reference。

CSS 命名規(guī)范，加速你的代碼調(diào)試: 維護(hù)大型的 CSS 代碼庫(kù)并非易事，特別是那些隨意散漫未經(jīng)組織的 CSS 代碼極易變成一團(tuán)亂麻；本文則深入淺出地介紹了 CSS 命名規(guī)范，來(lái)幫助開(kāi)發(fā)者編寫(xiě)優(yōu)質(zhì)的代碼。本文首先討論了連字符與 camelCase，然后介紹了 BEM 的含義與用法，最后討論了如何設(shè)置合適的 JS 操作類(lèi)；更多 CSS 學(xué)習(xí)資料參考 Web 開(kāi)發(fā)基礎(chǔ)與工程實(shí)踐。

純 CSS 的網(wǎng)頁(yè)追蹤方案: 我們經(jīng)常會(huì)從用戶(hù)訪問(wèn)的網(wǎng)頁(yè)中，采集某些用戶(hù)相關(guān)的偏好數(shù)據(jù)，譬如他們對(duì)于某些鏈接的點(diǎn)擊情況等等。本文則是提出了一種不使用 JS，純粹依賴(lài)于 CSS 來(lái)進(jìn)行網(wǎng)頁(yè)追蹤與分析的方案，其依賴(lài)于用戶(hù)點(diǎn)擊某個(gè)鏈接或者懸停在某個(gè)元素之后，瀏覽器添加的默認(rèn)樣式類(lèi)；該方案目前能夠用于采集用戶(hù)的訪問(wèn)與查看情況，更多 CSS 學(xué)習(xí)資料參考 Web 開(kāi)發(fā)基礎(chǔ)與工程實(shí)踐。

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

菜鳥(niǎo)網(wǎng)絡(luò)前端全?；? WEB 前端開(kāi)發(fā)在開(kāi)發(fā)體系里面是一個(gè)特殊的群體，阿里早期給前端的定義是“D2”，D2 的含義是：developer & designer。這么一個(gè)定位就直接導(dǎo)致了基礎(chǔ)教育階段的人才是空白的，也導(dǎo)致了前端優(yōu)秀人才特別少，招聘難的問(wèn)題，隨之帶來(lái)的問(wèn)題往往會(huì)成為整個(gè)研發(fā)鏈路的瓶頸。另外近幾年隨著無(wú)線的快速發(fā)展，前端在 PC 傳統(tǒng)流域的優(yōu)勢(shì)逐漸在喪失，而無(wú)線端隨著無(wú)線動(dòng)態(tài)化技術(shù)的發(fā)展，web 前端又再次受到發(fā)展空間的擠壓。在這樣的情況下前端這個(gè)崗位其實(shí)需要一些比較大的突破和改變。而 web 前端傳統(tǒng)價(jià)值的中臺(tái)化和新領(lǐng)域的拓展變的尤為重要。今天我要分享的就是菜鳥(niǎo)是如何實(shí)施前端技術(shù)中臺(tái)化和推動(dòng)開(kāi)發(fā)全棧的一些經(jīng)驗(yàn)。

來(lái)自 Slack 的 Webpack 構(gòu)建性能優(yōu)化: Webpack 已然是主流的前端打包工具之一，不過(guò)其繁榮的第三方插件生態(tài)反而會(huì)使得，優(yōu)化 Webpack 的構(gòu)建性能成為了一件不容易的事情。本文即是來(lái)自 Slack 的工程師，分享的他們?cè)谥貥?gòu)整個(gè)前端過(guò)程中累積的，如何優(yōu)化 Webpack 構(gòu)建性能的經(jīng)驗(yàn)；本文主要從衡量并且分析構(gòu)建耗時(shí)的組成、并行化構(gòu)建流程、減少構(gòu)建工作、使用緩存、優(yōu)化硬件等幾個(gè)方面。更多 Webpack 學(xué)習(xí)資料參考 Webpack Reference。

編寫(xiě) Vue.js 單元測(cè)試時(shí)需要規(guī)避的五個(gè)陷阱: 單元測(cè)試是應(yīng)用開(kāi)發(fā)中不可或缺的部分，本文作者會(huì)循序漸進(jìn)地，以具體的例子來(lái)介紹日常開(kāi)發(fā)中會(huì)用到的 Vue.js 單元測(cè)試的例子。作者希望在本文中講清楚如何測(cè)試、應(yīng)該測(cè)試哪些，并提醒開(kāi)發(fā)者注意避免五個(gè)坑：等到最后再測(cè)試，測(cè)試了不恰當(dāng)?shù)膬?nèi)容，搞混了 Test Doubles，結(jié)構(gòu)過(guò)度耦合，過(guò)度追求測(cè)試覆蓋率等；更多 Vue.js 學(xué)習(xí)資料參考 Vue Reference。

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

理解 React 源代碼: React 為我們提供了直接易用的，以狀態(tài)為核心的前端應(yīng)用開(kāi)發(fā)方式，本系列文章則著眼于分析 React 內(nèi)部工作原理。依次討論了 React 中簡(jiǎn)單組件、類(lèi)組件等渲染流程；更多 React 學(xué)習(xí)參考 React 與前端工程化實(shí)踐。

Node.js 內(nèi)建模塊加載機(jī)制: 本系列文章著眼于分析 Node.js 內(nèi)部原理，首篇文章討論了 Node.js 的主進(jìn)程是如何啟動(dòng)的。接下來(lái)作者又分析了在主進(jìn)程初始化過(guò)程中，是如何加載內(nèi)建模塊的，然后還深度分析了 os 包的實(shí)現(xiàn)；更多 Node.js 學(xué)習(xí)參考深入淺出 Node.js 全棧架構(gòu)。

不曾了解的 JS 特性: 本文作者在通讀了 MDN 文檔之后，驚訝地發(fā)現(xiàn)了很多他不曾了解的 JS 特性與 API；本文即是作者的讀后總結(jié)分享，JS 也是學(xué)無(wú)止境啊。作者在本文中介紹了 Label Statements，void 操作符，Comma 操作符，with 條件操作符，國(guó)際化 API，管道操作符，setTimeout 參數(shù)等等；更多 JavaScript 學(xué)習(xí)參閱現(xiàn)代 JavaScript 開(kāi)發(fā)基礎(chǔ)。

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

After.js: After.js 是類(lèi)似于 Next.js 的 React 服務(wù)端渲染框架，不過(guò)其是由了 React Router 作為路由系統(tǒng)，而不像 Next.js 那樣自建路由系統(tǒng)。After.js 同樣踐行了組件即路由的理念，支持基于路由的代碼分割、基于路由的變換、分析、數(shù)據(jù)加載、數(shù)據(jù)預(yù)加載等。

dialog-polyfill: 上周的清單中我們介紹過(guò) HTML 5.2 中引入的 dialog 標(biāo)簽，dialog-polyfill 則是由 Google 開(kāi)源的，dialog 的適配庫(kù)。不同于第三方組件或者框架提供的彈窗功能，原生的 dialog 標(biāo)簽更為簡(jiǎn)單易用，并且其可訪問(wèn)性也更好，瀏覽器也能夠針對(duì)該標(biāo)簽進(jìn)行優(yōu)化。

JARVIS: J.A.R.V.I.S. (Just A Rather Very Intelligent System) 是 Webpack 實(shí)時(shí)監(jiān)控工具，其能夠?qū)㈤_(kāi)發(fā)環(huán)境或生產(chǎn)環(huán)境下的 Webpack 構(gòu)建信息實(shí)時(shí)展示到瀏覽器中。JARVIS 借鑒了 Webpack Dashboard 等流行的 Webpack 監(jiān)控工具，然后提供了可優(yōu)化的 ES Harmony 模塊統(tǒng)計(jì)、將資源分割為不同的類(lèi)別等擴(kuò)展功能。

1Backend: 1Backend 是自部署的 Serverless 平臺(tái)，其設(shè)計(jì)目標(biāo)是簡(jiǎn)化 Lambda 函數(shù)與微服務(wù)的部署、運(yùn)行、維護(hù)流程。1Backend 使得開(kāi)發(fā)者能夠快速開(kāi)發(fā)服務(wù)，其支持 Go，JavaScript，TypeScript，MySQL 等常見(jiàn)的技術(shù)棧。

Prisma: Prisma 能夠?qū)?shù)據(jù)庫(kù)轉(zhuǎn)化為 GraphQL API；其允許用戶(hù)自定義數(shù)據(jù)模型，然后快速地轉(zhuǎn)化為可用的 GraphQL 服務(wù)器。Prisma GraphQL API 提供了強(qiáng)大的數(shù)據(jù)抽象與構(gòu)建塊，來(lái)輔助開(kāi)發(fā)靈活可擴(kuò)展的 GraphQL 服務(wù)端，包括了類(lèi)型安全的 API，聲明式 DSL 的數(shù)據(jù)模型、實(shí)時(shí)接口、與流行前端框架無(wú)縫兼容等。

對(duì)話(huà) AI 專(zhuān)家洪亮劼：這次，我們?nèi)轿涣牧娜斯ぶ悄? 洪亮劼，極客時(shí)間《AI 技術(shù)內(nèi)參》專(zhuān)欄作者，電子商務(wù)平臺(tái) Etsy 數(shù)據(jù)科學(xué)主管，前雅虎研究院高級(jí)研發(fā)經(jīng)理。長(zhǎng)期從事機(jī)器學(xué)習(xí)與人工智能的基礎(chǔ)以及應(yīng)用研究，積累了豐富的學(xué)術(shù)研究和工業(yè)實(shí)踐經(jīng)驗(yàn)，對(duì)推薦系統(tǒng)、搜索引擎、計(jì)算廣告學(xué)、社交網(wǎng)絡(luò)以及自然語(yǔ)言處理等領(lǐng)域有非常深入的理解。本文從人工智能的落地、觀點(diǎn)、人才培養(yǎng)與招聘、學(xué)習(xí)等幾個(gè)角度來(lái)聊聊人工智能。

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