前端清單：Vue2 響應式原理，RN 執行內建 Node，JS 巧用 Proxy 反混淆，GraphQL 優劣思辨

王下邀月熊_Chevalier發表於2017-08-07
前端VueJS

前端每週清單第 25 期：Vue2 響應式原理，RN 執行內建 Node，JS 巧用 Proxy 反混淆，GraphQL 優劣思辨，深入 React 動畫

作者：王下邀月熊 編輯：徐川

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

新聞熱點

國內國外，前端最新動態

  • Storybook 3.2 釋出：Storybook 允許我們在現代元件化開發中快速地瀏覽獨立元件；在近日釋出的 Storybook 3.2 版本中，新增了對於 Vue.js 的支援。除此之外，本版本還引入了層次化的 Story 佈局，允許開發者更加靈活地定義元件的展現層次；同時還允許在移動裝置中直接瀏覽 React Native 元件，還修復了之前的部分錯誤。
  • Webpack 著手為 WebAssembly 新增頭等支援：目前 Webpack 中僅將 JavaScript 作為頭等公民看待，其他的資源（HTML、CSS 等）都需要轉化為 JavaScript 表示式進行處理；而近日 Webpack 渲染與 Mozilla 基金會達成合作，獲得了來自 MOSS 專案的 $125,000 資金支援。Webpack 著手為 WebAssembly 新增頭等支援，我們也可以在 Issue Tracker 中瞭解最新的進展。
  • Webkit 著手開發 PWA 特性支援：Progressive Web Applications（PWAs）通過建立 Service Worker 來使 Web 使用者能享受到推送、離線支援等原生應用的特性，是現代 Web 開發中重要的組成。不過令人遺憾的是 Safari 一直未表態支援 PWAs 相關特性，這一點讓很多開發者也頗為不滿，在 Apple’s refusal to support Progressive Web Apps is a detriment to future of the web 此文中就進行了許多的討論；不過近日有開發者發現，在 Webkit 的 BugList 與 Changelog 上出現了有關 PWA 的內容，儘管可能還需要數月乃至於更長的時間，我們相信未來 Safari 會給予 PWA 更好的支援。
  • TensorFire：基於 WebGL 的瀏覽器端高效能神經網路框架：深度學習與人工智慧技術正在逐步地改變人們的生活，以 TensoFlow 為代表的一系列深度學習與神經網路框架也是如日中天，迅猛發展。 TensorFire 是基於 WebGL 的，執行在瀏覽器中的神經網路框架。使用 TensorFire 編寫的應用能夠在實現前沿深度學習演算法的同時，不需要任何的安裝或者配置就直接執行在現代瀏覽器中。

開發教程

步步為營，掌握基礎技能

  • Vue.js 與 NativeScript 初窺：NativeScript 框架最值得稱道的即是其擴充套件性，它目前已經支援原生 JavaScript、Angular、Vue.js 等多種框架或者編碼方式，同時未來還計劃支援 Preact 等框架。本文即是介紹如何使用 NativeScript 與 Vue.js 協同開發，首先介紹瞭如何使用 NativeScript 命令列工具建立專案，然後引入 Vue.js 外掛以及如何執行該專案；更多 Vue.js 相關資料參考 https://parg.co/byL 。
  • Node.js 實踐教程：本教程是希望以一些有名的模組/功能為基礎, 在實現的過程中講解各項知識點，主要分為控制流、Web、儲存等幾個部分。目前完成的模組包括 async 介紹、Promise 實現、coroutine 實現、co 模組介紹、HTTP Client 實現、HTTP Server 實現等；更多 Node.js 相關資料參考 https://parg.co/be0 。
  • Airbnb React VR 實踐：Airbnb 自 2014 年以來一直使用 React 構建使用者互動介面，並且為社群貢獻了很多優秀的開源專案；而隨著 React VR 的釋出，Airbnb 也利用其來快速原型化與測試 VR 相關的創意。本文即是介紹 Airbnb 在 React VR 實踐方面的一些經驗總結，本文首先闡述了 React、React Native 與 React VR 三者之間的關係與差異，然後介紹了 React VR 在佈局、基礎元件方面的語法，最後還討論了 React VR、WebVR 以及 VR 技術本身的發展可能性。更多 WebVR 相關資料參考 https://parg.co/bFR。
  • 突破 CSS 前端面試：不同於傳統的軟體工程師面試比較注重演算法，前端面試可能更多的注重綜合能力以及領域語言的掌握；本文即著眼於對於面試中常見的 CSS 問題的總結與介紹。本文列舉的問題譬如 Resetting 與 Normalizing 區別、floats 工作機制闡述、z-index 與 stacking context 比較、BFC 描述等等；更多 CSS/SCSS 相關資料參考 https://parg.co/baH 。

工程實踐

立足實踐，提示實際水平

  • Angular 效能優化：本文介紹了些常見的 Angular 開發中可用的效能優化建議，包括了利用 ChangeDetectionStrategy.OnPush 來顯式宣告元件間依賴、利用 trackBy 來追蹤唯一識別符號和避免冗餘的增刪、避免模板中的計算推導、禁用變化監測、使用懶載入等。
  • Vue.js 2 單元測試指南：本文主要介紹如何利用 Jasmine 為 Vue.js 2 應用搭建完整的單元測試；這裡選用 Jasmine 的原因是它本身的效能較好，並且 Vue.js 本身也是使用該測試框架。本文首先介紹了環境搭建與待測試的元件構成，然後依次介紹了配置測試環境、如何根據元件的業務功能邏輯選定測試點、如何編寫不同目標的測試用例等內容；更多 Vue.js 相關資料參考 https://parg.co/byL 。
  • 深入 React 動畫實踐：本文介紹了在 React 開發中多種建立動畫效果的途徑，包括了基於 React 元件狀態的 CSS 動畫、基於 React 元件狀態的 JavaScript 樣式動畫以及第三方依賴的 React Motion、Animated、Velocity-React 等庫。本文最後還討論瞭如何用 GreenSock 等經典強大的動畫庫來輔助 React 元件動畫開發；更多 React 相關資料參考 https://parg.co/bM1 。
  • Node.js 如何解析 Form 上傳？：NPM 和 GitHub 裡的開源元件幫我們解決了很多繁瑣的工作，但是也讓我們失去了很多深入技術細節的機會。在現有元件無法滿足我們需求的時候，就需要我們來自己動手豐衣足食了。 作者前段時間遇到了一個需要手動解析 Form 表單上傳的機會，也藉此為各位解析一下 Node.js 解析 Form 上傳的實現細節。更多 Node.js 相關資料參考 https://parg.co/be0 。

深度閱讀

深度思考，昇華開發智慧

  • JavaScript 中有趣而又無語的例子：JavaScript 是一門有趣的語言，它有著簡單的語法、龐大的生態系統與社群，不過 JavaScript 中也有著很多令人無語的地方。本文即是對 JavaScript 中一些有趣的、出乎意料的用法收集，對於初學者是個不錯的深入教程，而對於資深開發者也可以拿來作為面試題目。本文中包含的例子譬如 [] == ![]、NaN 的用法注意、try-finally 等等；更多 JavaScript 相關資料參考 https://parg.co/bMI 。
  • 安息吧 REST APIs，GraphQL 長存：GraphQL 是 Facebook 針對複雜關係的資料獲取與操作開源的資料查詢語言，本文則是對比了傳統的 REST APIs 與 GraphQL 各自的優劣，討論了 GraphQL 相較於 REST APIs 更適合應用的場景；不過本文並非提倡使用 GraphQL 完全替代 REST APIs，也陳述了 GraphQL 存在的不足與缺陷。本文首先概括性地總結了 GraphQL 解決地三個問題，然後介紹了 GraphQL 的由來和其內部原理，最後討論了 GraphQL 這種靈活性本身的代價。更多 GraphQL 相關資料參考 https://parg.co/b1e 。
  • 基於 Proxy 的 PopUnder 庫反混淆：本視訊通過對某個商用的 Chrome 59 中 PopUnder 庫，的執行過程解析，來介紹如何利用 ES6 的 Proxy 進行，簡單的 JavaScript 混淆程式碼逆向破解。視訊還是挺有意思的，作者首先分析了經過混淆的原始碼，發現無法下手；然後利用 Proxy 監聽常見的 Windows 中 createElement 等函式的呼叫來了解該庫的執行流程，最後再根據 API 的呼叫順序復現出該庫。更多 JavaScript 設計模式相關參考 https://parg.co/bIO 。
  • 深入 Vue.js 響應式原理：本文作者從 Java 與 C# 中經典的 Getters/Setters 引入，討論了 Vue.js 中從元件渲染函式、資料的 Getter、Setter 劫持、監聽器的控制以及重渲染觸發整個生命流程。更多 Vue.js 相關資料參考 https://parg.co/byL 。

開源專案

樂於分享，共推前端發展

  • Hazel: Hazel 是 Zeit 開源的輕量級 Electron 應用更新伺服器，它支援 macOS 與 Windows 應用的同步更新。Hazel 基於 micro 庫構建，能夠自動地從 Github Releases 抓取資料並且快取在記憶體中，並且沒十五分鐘自動重新整理下資料。
  • React Native Node: React Native Node 能夠在基於 React Native 開發的 Android 應用中啟動後臺 Node.js 程式，從而可以利用 Node.js 中的流、檔案系統介面等特性來進行功能操作；React Native Node 主要依靠 Node.js 7.1.0 版本能夠被獨立編譯為 bin_node_v710 可執行檔案。另一方面，儘管 iOS 並不支援直接執行 V8，但是該專案正在致力於為 ChakraCore 打造類 V8 特性支援。
  • react-simple-maps: react-simple-maps 是基於 d3-geo 與 topojson 的 React 地圖元件庫，允許開發者快捷方便地構建自定義的 SVG 地圖；目前的特性包括了縮放、標記、自定義 SVG 標記、自定義著色、氣泡圖、動畫支援等等。
  • Vuestic Admin Dashboard: 基於 Vue.js 與 BootStrap 4 的響應式管理控制檯，包含了 36 個元素、18 個頁面、18 個自定義圖示等內容；其使用 Chart.js 構建了響應式圖示、利用 Leaflet 與 amMap 構建視覺化地圖元件等內容。

巔峰人生

  • 股權、期權有哪些坑？從技術創業的角度說開去：本文整理自知道創宇 CTO 兼 COO 楊冀龍在 GTLC 全球領導力峰會上的演講，原題為《技術創業那些事兒》。本文從依賴獨特技術領先與依賴業務領先等不同型別的創業公司的股權分配、期權分配、投融資以及創業人自己的堅持等方面分享創業經歷過哪些坑、該怎麼處理。

前端之巔

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

相關文章