概念

Web Components是为了解决HTML不支持组件导致的代码冗余。在没有组件的情况下，相同的HTML结构需要在代码出现多次，既不美观又严重影响维护，从而影响项目的开发进度。

然而借助Web Components，我们可以创建可重用、高度定制的组件。并且可以在现有的Web应用中使用。

技术组成

Web Components由三项主要技术组成：

Custom elements（自定义元素）：JavaScript API，允许定义custom elements及其行为，然后可以在我们的用户界面中按照需要使用它们。

Shadow DOM（影子DOM）：JavaScript API，用于将封装的“影子”DOM树附加到元素（与主文档DOM分开呈现）并控制其关联的功能。通过这种方式，开发者可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。

HTML templates（HTML模板）：和元素使开发者可以编写与HTML结构类似的组件和样式。然后它们可以作为自定义元素结构的基础被多次重用。

实现web component的基本方法通常如下所示：

1.创建一个类或函数来指定web组件的功能，如果使用类的方式编写Web Component，需要使用 ECMAScript 2015 的类语法。

2.使用 CustomElementRegistry.define() 方法注册新的自定义元素，并向其传递要定义的元素名称、指定元素功能的类、以及可选的其所继承自的元素。

生命周期

connectedCallback: 当自定义元素第一次被连接到文档DOM时被调用。

disconnectedCallback: 当自定义元素与文档DOM断开连接时被调用。

adoptedCallback: 当自定义元素被移动到新文档时被调用。

attributeChangedCallback: 当自定义元素的一个属性被增加、移除或更改时被调用。

示例

假设我们需要制作以下样式的组件，并将其制作成一个以其为内容的列表。

用原生的HTML代码，我们需要书写以下结构的代码：

<div id="list">  <div class=”container”>    <h3 class=”title”>型号：S3C2410</h3>    <div class=”baseInfo”>      <span>        <p>架构</p>        <p>ARM</p>      </span>      <span>        <p>处理器</p>        <p>ARM9系列</p>      </span>      <span>        <p>主频</p>        <p>200MHz</p>      </span>      <span>        <p>操作系统</p>        <p>Linux</p>      </span>    </div>    <div class=”extraInfo”>      <p>应用场景</p>      <div>        <span>共享单车</span>        <span>共享单车</span>        <span>共享单车</span>        <span>共享单车</span>      </div>    </div>  </div>    ....   <!-- 此处根据数据渲染与上相同结构内容 --></div>

我们可以看到以上一个简单的卡片就占用了30多行，若是复制相同代码结构来展示数据，势必会导致代码量的激增。

接下来使用Web Component重写该示例。

<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>Web Component</title>  </head>  <body>    <div id="list">      <user-card></user-card>      <user-card></user-card>    </div>  </body>  <script>    function getElement(elName, classList, innerText) {      let el = document.createElement(elName);      if( classList ) {        el.classList.add(...classList)      }      if( innerText ) {        el.innerHTML = innerText      }      return el;    }    class UserCard extends HTMLElement {      constructor() {        super();        let card = getElement('div', ['container']);        console.log(card)        let title = getElement('h3', ['title'], '型号：S3C2410');        let baseInfo = getElement('div', ['baseInfo']);        let extraInfo = getElement('div', ['extraInfo']);        let baseInfoList = [{            key: '架构',            value: 'ARM'          },          {            key: '处理器',            value: 'ARM9系列'          },          {            key: '主频',            value: '200MHz'          },          {            key: '操作系统',            value: 'Linux'          }        ]        let extraInfoList = ['共享单车', '共享单车', '共享单车', '共享单车']        baseInfo.append(...baseInfoList.map((item) => {          let span = getElement('span')          span.append(getElement('p', undefined, item.key))          span.append(getElement('p', undefined, item.value))          return span        }))        extraInfo.append(getElement('p', undefined, '应用场景'))        let tmpDiv = getElement('div')        tmpDiv.append(...extraInfoList.map((item) => {          return getElement('span', undefined,item)        }))        extraInfo.append(tmpDiv)        card.append(title, baseInfo, extraInfo)        this.append(card)      }    }    window.customElements.define('user-card', UserCard);  </script></html>

使用标签简化书写

使用 JavaScript 写DOM 结构很麻烦，Web Components API 提供了标签，可以在它里面使用 HTML 定义 DOM。

< template id=”userCardTemplate” class=”container”>  <h3 class=”title”>型号：S3C2410</h3>  <div class=”baseInfo”>    <span>      <p>架构</p>      <p>ARM</p>    </span>    <span>      <p>处理器</p>      <p>ARM9系列</p>    </span>    <span>      <p>主频</p>      <p>200MHz</p>    </span>    <span>      <p>操作系统</p>      <p>Linux</p>    </span>  </div>  <div class=”extraInfo”>    <p>应用场景</p>    <div>      <span>共享单车</span>      <span>共享单车</span>      <span>共享单车</span>      <span>共享单车</span>    </div>  </div></ template >

然后加载这个template

class UserCard extends HTMLElement {  constructor() {    super();    var templateElem = document.getElementById('userCardTemplate');    var content = templateElem.content.cloneNode(true);    this.appendChild(content);  }}

SkyEye天目全数字实时仿真软件

由我司自主研发的SkyEye天目全数字实时仿真软件，具有基于系统虚拟机的仿真方式，能够在通用的x86平台中快速构建一个虚拟的目标系统，运行各种架构的嵌入式软件如：PowerPC、DSP、ARM等。在不具备目标硬件的情况下，利用SkyEye无需修改源代码，就可以进行嵌入式软件的开发和测试。

经过十多年的迭代开发，SkyEye能够仿真市面上绝大部分的嵌入式处理器，构建了成百上千种外设设备，同时也支持部分国产嵌入式处理器，例如飞腾、龙芯等，能够极大满足客户的仿真需求。

目前，软件开发和验证在软件仿真、功能测试、性能分析、代码调试、代码覆盖率几方面遇到诸多挑战，而SkyEye天目全数字实时仿真软件通过系统虚拟机仿真能够有效解决，为软件开发和验证提供一个强大、高效、易用的平台，从而有效提高软件开发和验证的质量和效率。

参考文献

MDN：

https://developer.mozilla.org/zh-CN/docs/Web/Web_Components

初识Web Component相关推荐

国内SAP UI5使用者关于性能优化和UI5 Web Component的讨论
有朋友提问:有UI5性能优化或者代码压缩的文章吗?UI5什么都好就是第一次加载太慢答:如果是UI5库文件的加载性能,我觉得应用开发人员没有啥可以做的.这是框架开发人员的任务问: 那UI5 Web ...
SAP UI5 web Component里的条件渲染机制
我的SAP UI5 web Component同时定义了两个图表标签,即BarChart和LineChart: 运行时效果如下: 现在我想针对这两个图表控件做一个条件显示,即点击屏幕一次,显示A图表, ...
如何实现SAP UI5 Web Component React控件的加载效果
假设我使用SAP UI5 Web Component的React控件, 比如柱状图和折线图: 导入useState函数,默认加载状态为false: 每次点击屏幕后,首先将Loading状态使用切换函数 ...
SAP UI5 Web Component的图标实现
例子:我的SAP UI5 Web Component开发而成的React应用上,显示了这个加号图标: 在React Component里引入加号图标: 在此处给ShellBarItem的icon属性赋 ...
[译] 用 Shadow DOM v1 和 Custom Elements v1 实现一个原生 Web Component
原文地址:Make a Native Web Component with Custom Elements v1 and Shadow DOM v1 原文作者:Pearl Latteier 译文出自: ...
amazeui学习笔记二（进阶开发2）--Web组件简介Web Component
amazeui学习笔记二(进阶开发2)--Web组件简介Web Component 一.总结 1.amaze ui:amaze ui是一个web 组件, 由模板(hbs).样式(LESS).交互(JS ...
你真的了解Web Component吗？
为什么使用框架? 对框架的理解作为现代前端开发者,拥抱框架是生存的不二法则,有些人一入场便投身框架的海洋,有些人则有幸见证过变革,从原生,到jq,到各种框架大行其道的今天.而当前,国内占领市场份额最 ...
Web Component 探索之旅
Web Component 是什么? 简介 Web Components 是一套不同的技术,允许您创建可重用的定制元素(它们的功能封装在您的代码之外)并且在您的 web 应用中使用它们. -- Web ...
Web Component 详解
Web Component 是Html5 推出的一个新特征,即web 组件.提到web组件有一定前端开发经验的人对这个词汇并不陌生,在这个严重依赖前端框架来开发项目的时代,我们推崇使用组件化的思路来编 ...

初识Web Component

概念