组件是目前前端的发展方向。
Web Components 是可以不用预处理,直接运行再浏览器上的原生组件。相比于目前流行框架(React, Vue)的组件, Web Components组件不引用外部模块,因此代码量小,而且得到了google的支持,国内也有一些公司再使用,如腾讯的Omi。目前Web Components已经可以用于生产环境。
Web Components主要包含三项技术:
- **Custom elements(自定义元素):**一组JavaScript API,允许您定义custom elements及其行为,然后可以在您的用户界面中按照需要使用它们。
- Shadow DOM(影子DOM):一组JavaScript API,用于将封装的“影子”DOM树附加到元素(与主文档DOM分开呈现)并控制其关联的功能。通过这种方式,可以保持元素的功能私有,这样它们就可以被脚本化和样式化,而不用担心与文档的其他部分发生冲突。
- HTML templates(HTML模板):
<template>
和<slot>
元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。
实现web component的基本方法如下:
- 创建一个类或函数来指定web组件的功能,如果使用类,请使用 ECMAScript 2015 的类语法。
- 使用
CustomElementRegistry.define()
方法注册您的新自定义元素 ,并向其传递要定义的元素名称、指定元素功能的类、以及可选的其所继承自的元素。 - 如果需要的话,使用
Element.attachShadow()
方法将一个shadow DOM附加到自定义元素上。使用通常的DOM方法向shadow DOM中添加子元素、事件监听器等等。 - 如果需要的话,使用
<template>
和<slot>
定义一个HTML模板。再次使用常规DOM方法克隆模板并将其附加到您的shadow DOM中。 - 在页面任何您喜欢的位置使用自定义元素,就像使用常规HTML元素那样。
目前Web Components可以应用于绝大部分现代浏览器和移动端。
Web Components编写的组件也可以用于其他其他第三方框架的组件(Vue, React , Angular)。
在使用Web Components时,也要注意一些问题:目前Web Components对IE的支持并不太好,而且没有提供数据和状态管理方案,因此不太适合基于此搭建一个功能完善的产品中,但是可以基于此来开发可复用组件。Web Componnets和 Vue, React , Angular是为了解决不同的问题而生,二者应该是互补和共生的关系。
参考链接
1.www.ruanyifeng.com/blog/2019/0…