更新时间:2024-05-06 11:45
Web组件是一套不同的技术,允许开发者创建可复用的自定义元素 (它们的功能封装在代码之外)并且在web应用中使用它们。
历史Alex Russell在2011年的Fronteers大会上首次提出Web组件。Google在2013年发布了一个基于Web组件的程序库“Polymer”。
封装性在面向对象编程方法中,封装是指,一种将抽象性函数接口的实现细节部分包装、隐藏起来的方法。同时,它也是一种防止外界调用端,去访问对象内部实现细节的手段,这个手段是由编程语言本身来提供的。这两个概念有一些不同,但通常被混合使用。封装被视为是面向对象的四项原则之一。适当的封装,可以将对象使用接口的程序实现部分隐藏起来,不让用户看到,同时确保用户无法任意更改对象内部的重要数据。它可以让代码更容易理解与维护,也加强了代码的安全性。
互操作性互操作性作为一种特性,它指的是不同的系统和组织机构之间相互合作,协同工作(即互操作)的能力。技术系统工程设计(technical systems engineering)方面常常会用到这条术语;另外,广义地说,还会考虑到那些影响系统间性能(system to system performance)的社会、政治和组织机构因素。另外,Interop还是几个年度网络产品贸易展览会的名称(英文:annual networking product trade shows)。
Web组件由四大部分组成,可单独或组合使用。
Custom element(自定义元素)一组 JavaScript API,允许定义 custom elements 及其行为,然后可以在用户界面中按照需要使用它们。
Shadow DOM(影子 DOM):一组 JavaScript API,用于将封装的“影子”DOM 树附加到元素(与主文档 DOM 分开呈现)并控制其关联的功能。通过这种方式,可以保持元素的功能私有,这样它们就可以被脚本化和样式化,而不用担心与文档的其他部分发生冲突。
HTML template(HTML模板): 和
自定义元素,定义新HTML元素的API。元素,允许文档包含惰性的DOM块浏览器Google Chrome、Mozilla Firefox、Microsoft Edge、Safari和Opera已支持HTML模板。
影子DOM,封装的DOM和样式,配以组合化。自定义元素和影子DOM的一个早期版本(称为v0)已在某些基于Blink的浏览器(例如Google Chrome和Opera)以及Mozilla Firefox(需要手动修改配置)中支持。较新版的自定义元素和影子DOM(v1)API正在Safari10、Google Chrome (53.0.2785)以及Mozilla Firefox中开发。Microsoft Edge尚未开始实现自定义元素和影子DOM。对旧版浏览器的向后兼容性可以使用基于JavaScript的polyfill实现。
HTML导入,将HTML文档导入其他文档的声明方法,HTML模板程序库已有多个程序库在创建自定义元素时基于Web组件以提高抽象度。几个比较为人熟知的是:X-Tag、Slim.js、Polymer和Bosonic。其中的Bosonic和Polymer提供可免费使用的现成组件。这些组件可交替使用,因为它们都基于开放的Web技术。