Web Components系列(一) —— 概述
前言
如果我们选择不使用任何框架的情况下来进行前端开发,那么针对一个完整的网页,我们需要开发以下代码:
- HTML 代码
- CSS 代码
- JavaScript 代码
就几年之前来说,HTML 部分的代码基本不存在复用的可能,这就导致我们可能需要开发大量重复的 HTML 代码,即使使用 CV 法,代码的冗余却是不可避免的。
Web Components 诞生的背景
近几年,我们在使用前端框架(比如 Vue)时,都知道有个“组件”的概念,通过使用组件可以提高代码复用率,一次创建多处使用,在一定程度上简化了开发流程。
既然组件化开发这么流行,又能给开发带来极大的便利,那么浏览器就当然有理由来原生支持组件化,Web Components
就应运而生,它的诞生使得浏览器有了原生支持组件化的能力。
Web Components 的概念
何为 Web Components ?顾名思义,就是“网页组件”,引用 MDN 上的话来说就是:
Web Components 是一套不同的技术,允许您创建可重用的定制元素(它们的功能封装在您的代码之外)并且在您的web 应用中使用它们。
注意其中的关键词:可重用、定制,这也是我们乐于使用第三方框架中组件功能的理由。
Web Components 的组成
Web Components不是单一的规范,而是一系列的技术组成,包括Custom Element、Shadow DOM、HTML templates 三种技术规范。它们可以一起使用来创建封装功能的定制元素,可以在你喜欢的任何地方重用,不必担心代码冲突。
Custom elements(自定义元素)
一组JavaScript API,允许您定义custom elements
及其行为,然后可以在您的用户界面中按照需要使用它们。
Shadow DOM(影子DOM)
一组JavaScript API,用于将封装的“影子”DOM树附加到元素(与主文档DOM分开呈现)并控制其关联的功能。通过这种方式,您可以保持元素的功能私有,这样它们就可以被脚本化和样式化,而不用担心与文档的其他部分发生冲突。
HTML templates(HTML模板)
<templete>
和 <slot>
元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。
Web Components 的兼容性
兼容性是检验一项技术能否用于生产环境的标准,我们来看一下 Web Components 各项技术的兼容性:
通过上图可以看到,Web Components 在主流浏览器上的支持已经极其良好,如果对向下兼容要求不严格的话,完全可以在生产环境中使用了。
总结
技术的发展总是以“提供便利”为方向的,Web Components 的出现可以说是前端技术发展的必然结果,而我们需要做的就是想办法善用它为自己服务。
- ~
- 本文完,感谢阅读!
~
学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!