前端每週清單第 36 期：深入 Vue 2.5 型別增強、Puppeteer 端到端測試、PayPal 跨域套裝

前端每週清單專注前端領域內容，以對外文資料的蒐集為主，幫助開發者瞭解一週前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源專案、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每週清單。

新聞熱點

國內國外，前端最新動態

• MSDN 將 7700 餘份文件重定向到 MDN: 為了更好地協同維護 Web 開發相關的文件，微軟決定將 MSDN 上 7700 餘份 Web 開發相關的文件重定向到 MDN；MDN 是 Mozilla 開源共享的核心部分，來保證 Internet 資源的開放性與可用性，從而幫助開發者更快地學習與成長；微軟也長期致力於維護 MDN 上相關地開發文件，包括整個 Microsoft Edge 的 Web API 介面也是完全構建在 MDN 上。

• Expo SDK v22.0.0 釋出：Expo SDK v22.0.0 基於近日釋出的 React Native 0.49 版本，進行了一系列的功能特性提升與優化。現在，Snacks 可以支援多檔案與多資源拖動上傳，並且能夠將自定義的 Snacks 持久化儲存到個人文件中；該版本還優化了 Android 中使用的 JavaScriptCore 以及 ARKit，同時增強了 Splash Screen API, WebBrowser.openAuthSessionAsync 等介面。

• Chrome 62 釋出：本週釋出的 Chrome 62 版本針對除錯工具中的 Network Information API 進行了重大升級，其提供了更多的效能評測資訊，而不再僅僅是統計結果；除此之外，該版本還開始支援 OpenType Variable Fonts 以及 DOM 元素中進行 Media 捕獲。另一個有趣的地方在於 Chrome 62 的 iOS 版本提供了 Payment Request API，儘管 iOS Webkit 本身都沒有提供這個功能；這也為自定義瀏覽器中希望新增 Payment Request API 的支援提供了思路。

開發教程

步步為營，掌握基礎技能

• 基於 Puppeteer 的端到端測試：Chrome 在 59 版本時推出了 Headless Chrome（無介面 Chrome），可用於自動化測試和不需要視覺化使用者介面的伺服器；Puppeteer 就是 Chrome 團隊推出的基於 Headless Chrome 開發的自動化工具，它可以用來做 UI 自動化測試。本文即是對如何利用 Jest 與 Puppeteer 進行介面的端到端測試進行介紹，本文首先討論了何為端到端測試及其在專案開發流程中的意義、如何使用 Puppeteer 編寫測試用例、如何在 Jest 中執行這些用例，文末還給出了數個編寫端到端測試用例的建議。如果有對於 Puppeteer 還不瞭解的同學也可以閱讀前端之巔專欄本週推薦文章：使用 Puppeteer 玩轉 Headless Chrome；更多 Puppeteer 相關資料參考這裡。

• Angular JWT 許可權驗證完整指南: 本文循序漸進地介紹如何設計與實現 Angular 應用中基於 JWT 的許可權驗證部分；本文不僅僅聚焦於如何寫程式碼，而是希望能夠帶領讀者一起來考慮如何設計基於 JWT 的許可權驗證，我們應該關心哪些設計要點並且如何將它們應用到具體的開發實踐中。本文首先討論了登入頁的設計、JWT 機制原理，然後利用 node-jsonwebtoken 來建立基於 JWT 的使用者 Session，接下來討論瞭如何將 JWT 返回給客戶端並且選擇合適的存放位置，最後分析瞭如何在客戶端中將 JWT 返回給服務端並且驗證使用者是否合規。更多 Angular 相關資料參考這裡。

• Vue.js 中高階概念介紹: Vue.js 毫無疑問是簡單易上手的框架，本文則長篇大論地對 Vue.js 中一些高階概念的理解與使用進行深入介紹，包括 Mixins、Custom Directives、Filters、Transitions、狀態管理、服務端渲染等。本文依次介紹瞭如何使用 Mixins 實現程式碼複用、如何建立自定義的指令、如何使用 Filters 來對展示資訊進行過濾、如何使用 Transitions 建立動畫、如何使用 Vuex 進行狀態管理等內容。更多 Vue.js 相關資料參考這裡。

• Flexbox 與 CSS Grid 系列教程: 本系列文章是對於 CSS 佈局中常用的 Flexbox 與 CSS Grid 進行深度介紹，首篇文章是對於 Flexbox 與 CSS Grid 的概念進行詳細介紹與對比；Flexbox 是面向一維佈局設計，適合於單純的行佈局或者列布局；而 CSS Grid 則面向二維佈局設計，能夠同時在行或列上進行元素排布。更多 CSS 佈局相關資料參考這裡。

工程實踐

立足實踐，提示實際水平

• 來自 PayPal 的開源跨域 JavaScript 套裝: PayPal 的工程師們編寫了很多執行於不同網頁、不同域名下的 JavaScript 程式碼，並且還為很多的第三方網站提供了便捷的程式碼嵌入方式，不過這樣也就導致了 PayPal 面臨著極為複雜的跨域問題：既需要提供跨瀏覽器的相容方案，也不能強制性的讓所有的後端介面允許 CORS 跨域請求等，本文即是 PayPal 對其日常業務中使用的跨域相關工具進行深度介紹，譬如有基於 Listener/Client 模式的客戶端跨域通訊工具、跨域 React 元件、跨域的安全 WeakMap、基於 iFrame 的 fetch 請求代理等等；更多跨域相關討論參考這裡。

• 訪談：Bustle的 GraphQL 實踐：Facebook 將 GraphQL 定義成“一門 API 查詢語言以及一個支援查詢現有資料的執行時”。REST 通過向 REST 端點傳送請求獲取資料，而 GraphQL 允許客戶端指定它們想要的資料。
  當 Facebook 公司內部開始大規模使用 GraphQL 時，社群才剛剛開始使用 GraphQL。InfoQ 採訪了來自 Bustle 的工程總監 Steve Faulkner，談論了 GraphQL 的相關問題以及 Bustle 如何使用 GraphQL，併為想要採用 GraphQL 的團隊提供了一些建議。更多 GraphQL 相關資料參考這裡。

• 現代 JavaScript 技術棧: 本文是對於現代 JavaScript 技術棧的高屋建瓴的盤點，希望能夠為那些還停留在舊時代的開發者提供完整的 2017 年 JavaScript 技術概念。本文首先闡述了所謂傳統開發方式的面貌，然後依次介紹了包管理器 npm、JavaScript 模組打包工具 Webpack、程式碼語法轉換工具 Babel、任務執行工具 Npm Scripts 等；更多 JavaScript 相關資料參考這裡。

深度閱讀

深度思考，昇華開發智慧

• 深入 Vue.js 2.5 型別支援: Vue.js 2.5 著重提升了 TypeScript 的型別支援，使得開發者不僅僅能通過類元件介面來獲得正確的型別定義，還能直接從內建的介面中獲取型別，本文則是對於 Vue.js 2.5 中的型別支援進行詳細闡述，展示了 TypeScript 中強大的型別系統是如何被用於流行的框架。本文依次討論了 this 物件、Mapping Computed、Prop Types 以及相容性等內容；更多 Vue.js 相關資料參考這裡。

• Napa.js: Napa.js 是 Microsoft 開源的基於 V8 的多執行緒 JavaScript 執行時，其最初被用於解決 Bing 中高 CPU 佔用的服務。隨著該專案的不斷髮展，開發團隊發現其同樣能夠被用於解決 Node.js 中 CPU 密集型的任務，即將 JavaScript 程式碼執行在多個隔離的 V8 執行時中，並且為不同執行時之間提供資料通訊服務。Napa.js 能夠像普通的 Node.js Module 一樣被引入到專案中，同時也能不依賴於 Node.js 而被嵌入到某個宿主程式中。更多 JavaScript 相關資料參考這裡。

• Key Reinstallation Attacks: 本週，所謂的 KRACK 攻擊佔據了新聞頭條，其能夠突破大部分 WiFi 硬體裝置上使用的 WPA2 加密體系，竊聽使用者機密；雖然很多的裝置商已經更新了他們的系統或者提供了軟體更新，這起事件也為我們敲響了警鐘。在本次事件中使用 HSTS 預載入的網頁並沒有受到影響，也提醒了我們應該考慮是否將該頭部宣告新增到網站中。

開源專案

樂於分享，共推前端發展

• accessibilityjs: accessibilityjs 是由 GitHub 開源的介面可訪問性錯誤掃描工具，其被用於了開發與生產環境下頁面中不可訪問的元素發現。accessibilityjs 會將那些不可訪問的元素新增錯誤標識，包括了 ImageWithoutAltAttributeError, ElementWithoutLabelError,LinkWithoutLabelOrRoleError, LabelMissingControlError, InputMissingLabelError, ButtonWithoutLabelError, ARIAAttributeMissingError。

• design-blocks: 基於 Bootstrap 構建的超過 170 個設計塊，能夠幫助設計師快速設計現代網站；design-blocks 主要包括了響應、通訊錄、內容、特性、頁尾、表單、頁頭、價格、團隊、證明書等等元件。

• Electron Webpack Dashboard：Electron Webpack Dashboard 對於 Webpack Dashboard 的擴充套件，為了方便各個平臺的使用者都能穩定、便捷地使用美觀的 Webpack 控制檯。Electron Webpack Dashboard 1.0 版本能夠穩定支援 Webpack 2 與 Webpack 3，同時修復了早前版本存在的一些問題；而下一步 Electron Webpack Dashboard 將會專注於提供單機多例項併發的功能，同時針對 macOS 提供多 Tab 頁，針對 Linux 與 Windows 提供多視窗的支援。

• Smooth Scrollbar: Smooth Scrollbar 允許我們自定義跨瀏覽器的高效能滾動條，它使用 CSS3 的 translate3d 屬性來實現慣性滾動。Smooth Scrollbar 還提供了豐富的外掛系統與易用的外掛介面，方便開發者根據自身地業務需要靈活定製。

巔峰人生

• 程式設計師是手藝人，如何讓自己的技能變現？: 本文摘自陳皓（左耳朵耗子）在極客時間 App 開設的付費專欄“左耳聽風”，是他對自身技術成長道路的分享。本文聚焦於如何讓自己的技能變現，從千里之行基於跬步、關注有價值的東西、找到能體現價值的地方、動手能力很重要、關注技術付費點、提升自己的能力和經歷、找到有價值的資訊源等幾個方面進行考慮。

前端之巔

「前端之巔」是 InfoQ 旗下關注前端技術的垂直社群，加入前端之巔學習群請關注「前端之巔」公眾號後回覆“加群”。投稿請發郵件到 editors@cn.infoq.com，註明“前端之巔投稿”。