初识Web Component
时间：2023-07-18 09:12:01 | 来源：网站运营
时间：2023-07-18 09:12:01 来源：网站运营
初识Web Component：
概念
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
微信公众号：迪捷数原
联系电话：010-56131268，0575-88361699；13501153049、13260299730 （微信同号）
联系邮箱：contact@digiproto.com
工作地址：杭州市海淀区中关村软件园
杭州市松江区阿里云创新中心
浙江省杭州市越城区中关村•水木湾区科学园3#802
公司网址：www.digiproto.com
公司简介：浙江迪捷软件科技有限公司2013年成立于杭州，专注于安全关键领域数字化转型，遵循中立开放的商业理念，为我国防务等安全关键领域提供MBSE和数字装备等解决方案。我司软件产品全部为自主研发，具有核心知识产权，涉及了高端装备的设计、研发和测试等环节。
在线咨询
