Atag - Web Components 最佳实践_Javascript教程_网页制作_码蚁之家_www.codes51.com
返回首页
专题
网络编程
ASP教程 .NET教程 PHP教程 JSP教程 C#教程 Java教程 Delphi教程 VB教程 C/C++教程 Android开发 IOS开发 Windows Phone开发 Python教程 Ruby教程 移动开发 其他编程教程
网页制作
HTML教程 CSS教程 Dreamweaver教程 FrontPages教程 Javascript教程 web前端
数据库
SqlServer MySql Oracle Access DB2 SQLite 其他数据库
图形设计
photoshop教程 Fireworks教程 CorelDraw教程 Illustrator教程 AutoCad教程 FLASH教程
操作系统
Windows xp教程 Windows 7教程 Windows 8教程 Windows 2003教程 Windows Server 2008教程 Linux教程 Windows 10
网站运营
建站经验 SEO优化 站长心得 网赚技巧 网站推广 站长故事
手机学院
手机速递 安卓教程 iphone教程 手机评测 手机技巧 手机知识 手机应用 手机游戏 手机导购
网店宝典
开店指导 开店经验 网店装修 网店推广 网店seo 网购技巧
软件教程
办公软件 系统工具 媒体工具 压缩工具 图文处理 文件管理
范文之家
自我介绍 自我鉴定 写作模板 合同范本 工作总结 贺词祝福语 演讲致辞 思想汇报 入党申请书 实习报告 心得体会 工作计划 简历模板 工作报告 导游词 评语寄语 口号大全 策划书范文
信息工程
软件工程 企业开发 系统运维 软件测试
移民之家
移民动态 移民政策 移民百科 移民生活 技术移民 投资移民
知识大全
母婴 数码 摄影 装修 美文 常识 时尚 婚嫁 美食 养生 旅游 兴趣 职场 教育 文学 健康
问答大全
电脑网络 手机数码 QQ专区 生活 游戏 体育运动 娱乐明星 休闲爱好 文化艺术 社会民生 教育科学 健康医疗 商业理财 情感家庭 地区问题 其他
编程问答
IOS Android .NET Java C/C++ Delphi VC/MFC 其他语言 PHP MSSQL MYSQL Oracle 其他数据库 Web开发 Windows Linux 硬件/嵌入开发 网络通信 移动开发 云计算 企业IT 游戏开发
笑话大全
幽默笑话 爱情笑话 成人笑话 校园笑话 爆笑笑话 综合笑话 古代笑话 现代笑话 国外笑话

Atag - Web Components 最佳实践(2/12)

来源:互联网  时间:2018/11/1 14:11:46

https://g.alicdn.com/code/npm/@webcomponents/webcomponentsjs/2.0.4/bundles/webcomponents-sd-ce-pf.js

polymer 3

Github 地址

在 Web Components 的实践中,Polymer 不是必须的,但有了它会让我们轻松很多。强烈建议使用最新版本的 Polymer 3,在这个版本不再使用 html 定义和引入组件,官方推荐使用 JS 模块的方式进行文件组织,同时抛弃了 bower 迎接 npm,这使得很多现代的前端工具能派上用场,比如使用 webpack 和 babel 进行打包,使用 ESLint 对代码进行规则校验,使用 prettier 对代码进行美化等。

安装 polymer 3:

1
npm i @polymer/polymer --save

官方推荐的 polymer-cli 工具比较鸡肋,可以不用。

在使用之前强烈建议对 polymer 的文档 或者本文进行一番了解,避免踩坑。

构建配置

为什么要把构建配置单独拿出来讲呢,当然是因为有坑?。开发组件过程中 ES 678 已经是标配,运行在低版本浏览器还得依赖 Babel。Web Components 中每一个 Component,对应一个类 (class)。Babel 的转换逻辑如下:

1
2
3
4
classMyTagextendsHTMLElement{}
customElements.define('my-tag', MyTag);
document.createElement('my-tag');

—>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var MyTag = function (_HTMLElement) {
_inherits(MyTag, _HTMLElement);
functionMyTag() {
_classCallCheck(this, MyTag);
return _possibleConstructorReturn(this, (MyTag.__proto__ || Object.getPrototypeOf(MyTag)).apply(this, arguments));
}
return MyTag;
}(HTMLElement);
customElements.define('my-tag', MyTag);
document.createElement('my-tag');

这样执行的话浏览器会显示如下报错 Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function,大意就是被继承的类 HTMLElement 必须使用 new 来初始化,不能使用函数调用 + apply 的使用方式。

针对这个问题 webcomponentsjs 额外提供了一份 custom-elements-es5-adapter-index.js 的 polyfill 来解决,这个文件的具体代码见此。引入这个文件可以通过在组件库的 webpack 配置中添加或者额外在使用的 html 文件中通过 script 标签引入,只要在组件被注册之前执行这段脚本就可以避免报错。

兼容性

特性ImportShadowDOMCustomElementTemplate
Chrome 最新版 (66)YYYY
Firefox 最新版NNNY
iOS 最新版 (12)NYYY
Android (UC 11.6.0.960)YYYY

其中 import 特性在整个体系下比较鸡肋,可以通过 webpack 打包的方式来替代。

结论是在移动端下,99% 以上的用户可以通过 polyfill 的方式来获得比较好的 Web Components 特性支持。

性能

(单位 ms)注册 1W 个组件渲染 1W 个组件
pure web-components55.5ms 48.6ms 47.2ms934.3ms 889.0ms 915.1ms
polymer184.9ms 191.9ms 197.8ms768.0ms 858.4ms 785.0ms
React 16.2.038.9ms 38.0ms 40.60ms1834.8ms 1754.8ms 1869.5ms
Rax 使用 View 和 Text 组件86.4ms 73.9ms 82.4ms11587.4ms 11238.0ms 11289.6ms
Rax使用 append={‘tree’} 模式82.5ms 67.3ms 81.4ms798.0ms 823.5ms 878.0ms

可以看到,由于 React JSX 的 VDOM 在构建时解析的加持,React 的注册时间是最短的,但是放大到 1W 个组件的渲染时,原生 DOM 的性能就发挥出来了,web-components 获得了比较优秀的表现。对原生 web-components 和 polymer,后者只是在注册的时候由于需要在运行时解析模板字符串,牺牲了一些性能,但是如果组件数量有限,这个性能差距可以忽略不计,加上 polymer 本身提供的一些组件化开发的便利,整体来看使用 polymer 获得的收益还是比较高的。

基准环境:

  • Chrome 66
  • macOS 10.13.1
  • Macbook Pro 15’ late 2015

组件化

个人认为,Web Components 在整个前端的语境下更偏向于提供符合 DOM 标准的规范,而 Polymer 则是在这种规范之上的一种框架封装,使用 Polymer 可以带来更便利的组件化开发体验。因此这里就不多介绍如何使用标准的 custom element 来创建自定义标签,下文都使用 Polymer 来封装自定义标签。文章中的组件、自定义标签、自定义组件其实描述的是同一个东西。

推荐使用以下模式创建一个自定义组件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { PolymerElement, html } from'@polymer/polymer';
classCustomElementextendsPolymerElement{
static get is() {
return'custom-element';
}
static get template() {
return html`
<style>:host { color: red; }</style>
<slot></slot>
`;
}
}

使用以下方式注册自定义组件。

1
customElements.define(CustomElement.is, CustomElement);

使用以下或任意方式使用自定义组件。


上一篇Redis只往zset有序集合添加不存在的数据:关键字索引查询构建+源码分析
下一篇:没有了
明星图片
相关文章
《 Atag - Web Components 最佳实践》由码蚁之家搜集整理于网络,
联系邮箱:mxgf168#qq.com(#改为@)