初识Web Component

2021-12-24 10:17:16 digiproto

概念

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: 当自定义元素的一个属性被增加、移除或更改时被调用。


示例

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


image.png


用原生的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,HTML,SkyEye
首页
产品
新闻
联系