继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Web Components系列(一) —— 概述

编程三昧
关注TA
已关注
手记 87
粉丝 28
获赞 84

前言

如果我们选择不使用任何框架的情况下来进行前端开发,那么针对一个完整的网页,我们需要开发以下代码:

  • HTML 代码
  • CSS 代码
  • JavaScript 代码

就几年之前来说,HTML 部分的代码基本不存在复用的可能,这就导致我们可能需要开发大量重复的 HTML 代码,即使使用 CV 法,代码的冗余却是不可避免的。

Web Components 诞生的背景

近几年,我们在使用前端框架(比如 Vue)时,都知道有个“组件”的概念,通过使用组件可以提高代码复用率,一次创建多处使用,在一定程度上简化了开发流程。

既然组件化开发这么流行,又能给开发带来极大的便利,那么浏览器就当然有理由来原生支持组件化,Web Components 就应运而生,它的诞生使得浏览器有了原生支持组件化的能力。

img

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 各项技术的兼容性:

image-20220206221625474

image-20220206222054931

image-20220206222122783

通过上图可以看到,Web Components 在主流浏览器上的支持已经极其良好,如果对向下兼容要求不严格的话,完全可以在生产环境中使用了。

总结

技术的发展总是以“提供便利”为方向的,Web Components 的出现可以说是前端技术发展的必然结果,而我们需要做的就是想办法善用它为自己服务。

~
本文完,感谢阅读!

~

学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP