2019-01-21

前端快爆

• 微軟 Edge 開發者意圖為?Chrome 實現 HTML Modules，該規范用來替代之前的 HTML Imports。其優點是基于 ES Modules，可以避免全局對象污染、腳本解析阻塞等問題。?
  

點評：舉報，有人在「秀恩愛」！

<!- 早期的 HTML Imports -> <link rel="import" href="myfile.html"><!- HTML Modules -> <!- module.html -> <div id="blogPost"><p>Content...</p> </div> <script type="module">let blogPost = import.meta.document.querySelector("#blogPost")export {blogPost} </script> 復制代碼<!- blog.html -> <script type="module">import {blogPost} from "module.html"document.body.appendChild(blogPost) </script> 復制代碼

• Firefox 66 中，CSS grid-template-columns/rows?屬性現在支持動畫了。?

點評：Firefox 是第一個支持該特性的瀏覽器，其他瀏覽器應該會很快跟進，Demo

• Chrome Canary 73 的開發者工具實現了新的懸停工具，可以快速預覽當前選中元素的一些 CSS 屬性和對比度。?

點評：如果可以直接提示當前文本所實際使用的字體就更好啦。

優秀 Demo

• 純 CSS 實現的滑塊

• 五種 CSS 彩帶效果

專題：跨端開發的三條路線

2018 年跨端開發對于選擇恐懼癥來說不是很友好。本刊秉持著一貫抵抗熵增的思路，為大家梳理了跨端開發的三條路線。

路線1: 重量級 App

重量級 App 的開發方式可以控制容器層。這條線路始整體發展思路是：在更動態化的同時，提升性能。參考：?

原生開發：問題在于需要開發多端，開發效率和動態化能力弱

WebView 能力擴展：WebView 用于渲染，能力擴展通過橋接層，主要問題是性能差

• 包括 PhoneGap、Cordova、Ionic、Xamarin 等

跨平臺橋接：橋接層同時負責渲染和能力擴展

• React Native

Facebook 開源，這條思路的開創者，主要問題是應用體積大、啟動慢、雙端接口不統一、穩定性差

• Weex

阿里開源，在 Vue 技術棧之上的類似方案

• Hippy

騰訊閉源，針對 React Native 的主要問題進行了優化

• Picasso

美團閉源，從介紹來看主要優化在于布局算法方面，附贈 PPT?一枚

Flutter：通過編譯，取消橋接層，減少通信消耗

Google 開源，利用 Dart 語言編譯到原生

路線2: 輕量級 App

如果將對容器的控制權給出，掛載到更大平臺如 Android 系統或超級應用，則是 18 年時興的小程序或快應用了。

• 應用級別跨端

微信小程序、支付寶小程序、百度小程序?、淘寶輕應用等

• PWA

Google 主推，掛載于 Android 系統

• 快應用

廠商聯盟主推，掛載于國產 Android 手機的系統，架構有參考 Weex，附 PPT

路線3: 開發方式整合

在上述兩條線路的發展之下，前端兼容線再度陷入碎片化：安卓 App、蘋果 App、Web、小程序、快應用……為了彌合這樣的碎片化，一個可能性即是通過一套 DSL 來編譯到各個不同端，這中間包含了多個公司不同方向的努力：

• Taro

京東開源，DSL 基于 JSX，通過 React Native 兼容原生開發

• Rax

阿里開源，DSL 基于 JSX，通過 Weex 兼容原生開發，附贈介紹一枚

• Mpx

滴滴開源，DSL 借鑒 Vue，支持微信、支付寶小程序

• mpVue

美團開源，DSL 借鑒 Vue，支持 Web 和美團小程序

• UniApp

DCloud 開源，DSL 借鑒 Vue，融合 mpVue 的小程序能力，通過 Weex 兼容原生開發

• Wepy

騰訊開源，DSL 借鑒 Vue，支持 Web 和微信小程序

---

本期編輯：@壹絲；專題供稿：@承虎、@龍笛。

首發地址：zhuanlan.zhihu.com/mm-fe

總結

以上是生活随笔為你收集整理的前端技术周刊 2019-01-21：跨端开发的三条路线的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。