前端每周清單第68期：ECMAScript 2018語言規範發布最新版，蘋果三星專利案終和解！

07-12

來自專欄前端之巔13 人贊了文章

前端每周清單專註大前端領域內容，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目等欄目。歡迎關注【前端之巔】微信公眾號（ID: frontshow），及時獲取前端每周清單。

新聞熱點

國內國外，前端最新動態

三星蘋果專利案以和解告終：近日，根據美國加州地方法院的一份文件顯示，蘋果和三星長達7年的專利侵權案終於在最近達成了和解。不過，雙方具體的和解條款尚未公布。兩者有關專利的侵權糾紛最早可以追溯到2011年，當時蘋果公司起訴三星電子，表示三星有5款手機產品侵犯了蘋果的設計專利，三星被求償10億美元。

有分析認為，長時間訴訟的疲勞感和這項官司導致雙方訴訟的主要人物紛紛離職，是雙方握手言和的重要原因，而且，現在三星和蘋果甚至都把中國企業的「威脅」當做首要問題，而且三星和蘋果雖然是競爭對手，但同時也是相互提供零部件供應的合作商，面對長期訴訟的巨額花費，兩家公司最終握手言和。

ECMAScript 2018語言規範正式發布：6月底，ES2018的官方規範（第九版JS）發布了HTML和PDF兩種版本。今年1月，ECMAScript 2018曾確定了兩個新特性：

取消模板字面量的限制，以支持語言的嵌入，包括特定領域的語言(DSLs)。
為正則表達式添加s(dotAll)標誌，以提供一致的行為。

由於此次的更新涉及的新特性比較多，大家可以自行下載文件閱讀。

開發教程

步步為營，掌握基礎技能

大話大前端時代：Vue 與 iOS 的組件化（下）：上篇《大話大前端時代：Vue 與 iOS 的組件化（上）》主要描述了 Vue 的組件化，下篇將描述 iOS 的組件化，並對兩者做一個對比。經過對比，得出Vue和iOS組件化的區別主要表現在以下三方面：

兩者平台上開發方式存在差異：主要體現在單頁應用和類多頁應用的差異。現在前端比較火的一種應用就是單頁Web應用（single page web application，SPA），顧名思義，就是只有一張Web頁面的應用，是載入單個HTML 頁面並在用戶與應用程序交互時動態更新該頁面的Web應用程序。但是 iOS 開發更像類 MPA (Multi-Page Application)。
兩者解決的需求也存在差異：iOS 的組件化一部分也是解決了代碼復用性的問題，但是更多的是解決耦合性大，開發效率合作性低的問題。而 Vue 的組件化更多的是為了解決代碼復用性的問題。
兩者的組件化的方向也有不同：iOS 平台由於有 UIKit 這類蘋果已經封裝好的 Framework，所以基礎控制項已經封裝完成，不需要我們自己手動封裝了，所以 iOS 的組件著眼於一個大的功能，比如網路庫，購物車，我的錢包，整個業務塊。前端的頁面布局是在 DOM 上進行的，只有最基礎的 CSS 的標籤，所以控制項都需要自己寫，Vue 的組件化封裝的可復用的單文件組件其實更加類似於 iOS 這邊的 ViewModel。

React Native性能優化總結：作者最近在進行RN項目重構，通過查閱各種資料，從RN底層出發，思考總結了一些從react到react-native的性能優化相關問題。

作者總結了RN性能核心優化點主要體現在首屏渲染優化、UI更新優化和其他方面（代碼層面），具體看下圖：

一個Vue頁面的內存泄露分析：什麼是內存泄露？內存泄露是指new了一塊內存，但無法被釋放或者被垃圾回收。new了一個對象之後，它申請佔用了一塊堆內存，當把這個對象指針置為null時或者離開作用域導致被銷毀，那麼這塊內存沒有人引用它了在JS裡面就會被自動垃圾回收。但是如果這個對象指針沒有被置為null，且代碼裡面沒辦法再獲取到這個對象指針了，就會導致無法釋放掉它指向的內存，也就是說發生了內存泄露。

造成內存泄露的可能會有以下幾種情況：

（1）監聽在window/body等事件沒有解綁

（2）綁在EventBus的事件沒有解綁

（3）Vuex的$store watch了之後沒有unwatch

（4）模塊形成的閉包內部變數使用完後沒有置成null

（5）使用第三方庫創建，沒有調用正確的銷毀函數

可以藉助Chrome的內存分析工具進行快速排查，而本文主要是用到了內存堆快照的基本功能，讀者可以嘗試分析自己的頁面是否存在內存泄漏，方法是做一些操作如彈個框然後關了，拍一張堆快照，搜索detached，按distance排序，把非空的節點展開父級，找到標黃的字樣說明，那些就是存在沒有釋放的引用。也就是說這個方法主要是分析仍然存在引用的遊離DOM節點。因為頁面的內存泄露通常是和DOM相關的，普通的JS變數由於有垃圾回收所以一般不會有問題，除非使用閉包把變數困住了用完了又沒有置空。

工程實踐

立足實踐，提示實際水平

大前端時代前端監控的最佳實踐：本文來自阿里雲前端系統技術負責人彭偉春在今年GMTC大會上的演講，他主要從三個方面分享了這個主題：

大前端時代前端監控新的變化，講述了這些年來，前端監控一些新的視角以及最前沿的一些思考；
前端監控的最佳實踐，他認為前端監控的最佳實踐有主動監控、慢會話追蹤、搜索報錯明細和出錯行為還原。
阿里雲ARMS前端監控系統架構。
具體的實現方式，可點原文鏈接了解。

閑魚Flutter實踐效果訪談：Flutter是Google下一代操作系統Fuchsia的UI框架，在保持原生性能的條件下實現了跨端編程，為未來的移動開發格局變革提供了巨大的機會和想像力。

Flutter在業界雖然還沒有成熟的先例，閑魚做了個大膽的嘗試，挑選重要且複雜商品詳情頁作為第一個遷移到Flutter的頁面。通過這個方式，快速暴露和解決Flutter相關問題，最終項目順利成功。閑魚已經遷移完成的頁面，目前是商品的詳情頁。詳情頁用到的Flutter介面和功能，目前已經線上驗證OK，達到生產穩定性的要求。

閑魚表示會繼續與Google和社區緊密合作，完善Flutter，並基於Flutter建設全新的一體化研發模式。

美團外賣iOS多端復用的推動、支撐與思考：美團外賣2013年11月開始起步，隨後高速發展，不斷刷新多項行業記錄。隨著用戶數與訂單數的高速增長，美團外賣逐漸有了流量平台的特徵，兄弟業務紛紛嘗試接入美團外賣進行推廣和發布，期望提供統一標準化服務平台。因此，基礎能力標準化，推進多端復用，同時輸出成熟穩定的技術服務平台，一直是美團技術團隊追求的核心目標。

多端復用之後對PM-RD-QA都有較大的變化，美團代碼復用率由最初的2.4%達到了84.1%，讓更多的PM投入到了新需求的吞吐中，但研發效率提升增大了QA的工作量。一個大的嘗試需要RD不斷與PM和QA保持溝通，選擇三方都能接受的最優方案。

深度閱讀

深度思考，升華開發智慧

Web前端框架：是解藥還是毒藥？：要使用現代的前端框架，你需要下載開發環境和依賴，編譯代碼，然後在瀏覽器上運行。這個是好是壞？究竟是什麼導致了這種不必要的複雜性？是因為我們構建的網站太複雜，還是因為框架本身就很複雜？本文作者從過去的 Web 前端開發、人們使用框架的原因、框架失效時等幾個方面來分析，最後他得出的結論是：不使用框架有可能是你的項目的最佳解決方案，但也可能是其他項目的噩夢。就像使用工具一樣，關鍵的不只是學習如何使用它們，還要知道在什麼時候使用它們更合適，以及它們都有哪些優點和缺點。在純 JS 中進行編碼就像使用框架一樣，在感覺遊刃有餘之前，需要花點時間掌握它。

框架一直在變化，即使某個框架可以流行很長一段時間，不同版本之間也會發生巨大變化。純 JS 將是一個更長期的選擇，除非它被一些其他語言所取代。即便如此，從一種語言切換到另一種語言要比從一種框架切換到另一個框架要容易得多。在項目耗費的時間和精力大致相當的情況下，如何減少知識貶值以及可以帶到下一個項目的經驗才是更重要的考慮因素。

React Native VS Flutter評測：作者在對比評測中提供了儘可能多的數據，並不是想證明Flutter和原生比有多爛，而是想告訴大家如果選擇了Flutter你的App包會增長多少倍、對App啟動速度的影響會有多少秒，好讓大家將來在定技術棧的時候能夠盡量心中有數。這份評測報告的結果如下：

安裝包大小：Flutter的安裝包大小是React Native的8倍左右；
啟動速度：React Native的運行速率比Flutter高3倍以上；
內存佔用：無論是首頁還是搜索頁，Flutter的內存都比React Native多將近一倍；
流暢度：RN得益於UIKit的加持，整體流暢度和原生非常接近，比聲稱60幀的Flutter要好。

開源項目

樂於分享，共推前端發展

react-from-zero：該項目涵蓋了React的16個基礎教程，主要包括對象元素、JSX、組件重構等課程。

Buefy：Buefy基於 Bulma（https://bulma.io）提供了一組輕量級的 UI 組件。Vue.js 和 Bulma 是這個庫唯一的兩個內部依賴。它的大小約為 60KB（壓縮後的大小，並且包含了 Bulma）。你可以查看實時文檔網站（https://buefy.github.io/#/documentation/start）並在 Codepen 上運行代碼。

Vux：Star 數超過 13K，是一個流行的社區庫，基於 WeUI 和 Vue 2.0。該庫還支持 webpack+vue-loader+vux 的工作流，它的文檔也是中文的。

招聘專欄

美團前端研發工程師

地點北京望京，負責後台系統 / 微信小程序 / 移動端H5項目開發；負責建設前端系統架構。要求三年以上前端開發經驗，能獨立完成前端開發任務；精通 Javascript, CSS, HTML 等前端相關技術，熟悉W3C標準和ES規範；熟悉 Nodejs 使用並研究過至少 1 個 Nodejs HTTP 框架(express/koa/egg)等；熟悉至少一種前端框架(Vue/React/Angular)，了解至少一種非前端語言（PHP/Java/Python/Ruby）等，並有一定的實戰經驗；了解 webpack, gulp 等能提高開發效率的工具使用；簡歷可發送至：dinglei06@meituan.com

Android 基礎架構工程師 by 知乎移動平台團隊

地點北京海淀。工作職責建設移動端基礎設施和共享服務，提升移動端整體工程效率和質量，參與DevOps建設。要求熟練的Java和Android開發經驗，有提升工程效率經驗。薪資面議。簡歷發送至 xingtianyu@zhihu.com

iOS 基礎架構工程師 by 知乎移動平台團隊

地點北京海淀。工作職責建設移動端基礎設施和共享服務，解決開發中關鍵問題，客戶端SDK開發維護。要求熟練的OC或Swift和iOS開發經驗，熟悉至少一門腳本語言，有開發自動化工具經驗，有iOS端APM經驗加分。薪資面議。簡歷發送至 xingtianyu@zhihu.com