ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
当前位置:首页 >> 网页制作 >> Javascript教程 >> Atag - Web Components 最佳实践

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

来源:网络整理     时间:2018-11-02     关键词:

本篇文章主要介绍了" Atag - Web Components 最佳实践",主要涉及到方面的内容,对于Javascript教程感兴趣的同学可以参考一下: 引子上一次社区中谈论起 Web Components 已经可以追溯到三四年前了,彼时 Web Components 仍处于不稳定的草案阶段,Polymer 的出。。。

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);

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

相关图片

相关文章

520彩票计划群 山东11选5走势 欢乐斗牛 e乐彩票计划群 彩票监察计划群 上海11选5计划 吉林快3 拉菲彩票计划群 极速赛车网站是多少 极速赛车怎么看特