Web Components (预览版)
为什么 Web Components?
早期在我们构建web页面时,基本上都是通过组合HTML提供的标签来实现的,再简单点我们还可以拷贝黏贴bootstrap的css代码。随着页面中相同或类似UI的增加,使得代码冗余度增加,UI的重用性问题日益彰显。
尽管像angular这样的Javascript框架可以解决标签复用的问题,但是框架间的组件重用显得无能为力了。
这时 Web Components 的概念就出现了。
什么是 Web Components?
它是一系列web平台APIs(浏览器提供),允许你创建自定义的,可复用的,封装的HTML标签。简单点说就是一系列接口规则,希望浏览器们可以提供,但是由于浏览器政治存在,进度是缓慢的。
既然是接口规则,也就有了四个规范:
- 自定义标签
自定义一些新的HTML标签,声明其行为和样式。可以分为两类:自定义标签和自定义内置元素; (HTML5添加了更多的语义化标签)
- 影子DOM
为Web Components中的DOM和CSS提供封装。影子DOM使得这些与主文档的DOM保持分离。分离的原因大型页面没有很好的CSS组织结构(样式容易覆盖)
- HTML导入
<link ref="import" href="components.html">
- HTML模板
支持<template>模板标签
怎么实现 Web Components?
使用 ECMAScript 2015 类语法创建一个类,指定组件的功能
customElements.define(‘your-component’, YourComponentClass)注册自定义的标签
Element.attachShadow() 将一个影子DOM附加到自定义元素上
<template>和<slot>定义模板
接下来或分析: 添加跟多的例子 Polymer和X-tag源码
原文链接:https://segmentfault.com/a/1190000015617837
本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。
转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]
本文地址:https://www.javascriptcn.com/read-35864.html
文章标题:Web Components (预览版)