1. HTML import

如下

22c2a45db499

上面的代码,一眼就能看出语义。

如果将元素的样式与脚本,封装在一个 HTML 文件share-buttons.html之中,这个元素就可以复用了。

使用的时候,先引入share-buttons.html。

然后就可以在网页中使用了。HTML Imports 是一个非常新的技术以至于目前只有 Chrome 31 及以上才支持。

2. Custom Elements 标准

Custom Elements 标准对自定义元素的名字做了限制。

"自定义元素的名字必须包含一个破折号(-)所以、和都是正确的名字,而和是不正确的。这样的限制使得 HTML 解析器可以分辨那些是标准元素,哪些是自定义元素。"

注意,一旦名字之中使用了破折号,自定义元素就不是HTMLUnknownElement的实例了。

Custom Elements 标准规定了,自定义元素的定义可以使用 ES6 的class语法。

22c2a45db499

上面代码中,原生的window.customElements对象的define方法用来定义 Custom Element。该方法接受两个参数,第一个参数是自定义元素的名字,第二个参数是一个 ES6 的class。

这个class使用get和set方法定义 Custom Element 的某个属性。

22c2a45db499

如此网页中就可以插入

22c2a45db499

处理脚本即可

22c2a45db499

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐