前端技术周刊 2019-01-21：跨端开发的三条路线

最新推荐文章于 2024-04-23 20:28:45 发布

weixin_33686714

最新推荐文章于 2024-04-23 20:28:45 发布

阅读量105

点赞数

文章标签：前端 javascript 移动开发 ViewUI

原文链接：https://segmentfault.com/a/1190000017977116

版权

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 语言编译到原生