初識Web Component
時間：2023-07-18 09:12:01 | 來源：網(wǎng)站運營
時間：2023-07-18 09:12:01 來源：網(wǎng)站運營
初識Web Component：
?概念
Web Components是為了解決HTML不支持組件導(dǎo)致的代碼冗余。在沒有組件的情況下，相同的HTML結(jié)構(gòu)需要在代碼出現(xiàn)多次，既不美觀又嚴重影響維護，從而影響項目的開發(fā)進度。
然而借助Web Components，我們可以創(chuàng)建可重用、高度定制的組件。并且可以在現(xiàn)有的Web應(yīng)用中使用。
技術(shù)組成
Web Components由三項主要技術(shù)組成：
Custom elements（自定義元素）：JavaScript API，允許定義custom elements及其行為，然后可以在我們的用戶界面中按照需要使用它們。
Shadow DOM（影子DOM）：JavaScript API，用于將封裝的“影子”DOM樹附加到元素（與主文檔DOM分開呈現(xiàn)）并控制其關(guān)聯(lián)的功能。通過這種方式，開發(fā)者可以保持元素的功能私有，這樣它們就可以被腳本化和樣式化，而不用擔(dān)心與文檔的其他部分發(fā)生沖突。
HTML templates（HTML模板）：和元素使開發(fā)者可以編寫與HTML結(jié)構(gòu)類似的組件和樣式。然后它們可以作為自定義元素結(jié)構(gòu)的基礎(chǔ)被多次重用。
實現(xiàn)web component的基本方法通常如下所示：
1.創(chuàng)建一個類或函數(shù)來指定web組件的功能，如果使用類的方式編寫Web Component，需要使用 ECMAScript 2015 的類語法。
2.使用 CustomElementRegistry.define() 方法注冊新的自定義元素 ，并向其傳遞要定義的元素名稱、指定元素功能的類、以及可選的其所繼承自的元素。
生命周期
connectedCallback: 當(dāng)自定義元素第一次被連接到文檔DOM時被調(diào)用。
disconnectedCallback: 當(dāng)自定義元素與文檔DOM斷開連接時被調(diào)用。
adoptedCallback: 當(dāng)自定義元素被移動到新文檔時被調(diào)用。
attributeChangedCallback: 當(dāng)自定義元素的一個屬性被增加、移除或更改時被調(diào)用。
示例
假設(shè)我們需要制作以下樣式的組件，并將其制作成一個以其為內(nèi)容的列表。
?
用原生的HTML代碼，我們需要書寫以下結(jié)構(gòu)的代碼：
<div id="list">
<div class=”container”>
<h3 class=”title”>型號：S3C2410</h3>
<div class=”baseInfo”>
<span>
<p>架構(gòu)</p>
<p>ARM</p>
</span>
<span>
<p>處理器</p>
<p>ARM9系列</p>
</span>
<span>
<p>主頻</p>
<p>200MHz</p>
</span>
<span>
<p>操作系統(tǒng)</p>
<p>Linux</p>
</span>
</div>
<div class=”extraInfo”>
<p>應(yīng)用場景</p>
<div>
<span>共享單車</span>
<span>共享單車</span>
<span>共享單車</span>
<span>共享單車</span>
</div>
</div>
</div>
....
<!-- 此處根據(jù)數(shù)據(jù)渲染與上相同結(jié)構(gòu)內(nèi)容 -->
</div>
我們可以看到以上一個簡單的卡片就占用了30多行，若是復(fù)制相同代碼結(jié)構(gòu)來展示數(shù)據(jù)，勢必會導(dǎo)致代碼量的激增。
接下來使用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: '架構(gòu)',
value: 'ARM'
},
{
key: '處理器',
value: 'ARM9系列'
},
{
key: '主頻',
value: '200MHz'
},
{
key: '操作系統(tǒng)',
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, '應(yīng)用場景'))
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 結(jié)構(gòu)很麻煩，Web Components API 提供了標簽，可以在它里面使用 HTML 定義 DOM。
< template id=”userCardTemplate” class=”container”>
<h3 class=”title”>型號：S3C2410</h3>
<div class=”baseInfo”>
<span>
<p>架構(gòu)</p>
<p>ARM</p>
</span>
<span>
<p>處理器</p>
<p>ARM9系列</p>
</span>
<span>
<p>主頻</p>
<p>200MHz</p>
</span>
<span>
<p>操作系統(tǒng)</p>
<p>Linux</p>
</span>
</div>
<div class=”extraInfo”>
<p>應(yīng)用場景</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天目全數(shù)字實時仿真軟件
由我司自主研發(fā)的
SkyEye天目全數(shù)字實時仿真軟件，具有基于系統(tǒng)虛擬機的仿真方式，能夠在通用的x86平臺中快速構(gòu)建一個虛擬的目標系統(tǒng)，運行各種架構(gòu)的嵌入式軟件如：PowerPC、DSP、ARM等。
在不具備目標硬件的情況下，利用SkyEye無需修改源代碼，就可以進行嵌入式軟件的開發(fā)和測試。經(jīng)過十多年的迭代開發(fā)，
SkyEye能夠仿真市面上絕大部分的嵌入式處理器，構(gòu)建了成百上千種外設(shè)設(shè)備，同時也支持部分國產(chǎn)嵌入式處理器，例如飛騰、龍芯等，能夠極大滿足客戶的仿真需求。
目前，軟件開發(fā)和驗證在軟件仿真、功能測試、性能分析、代碼調(diào)試、代碼覆蓋率幾方面遇到諸多挑戰(zhàn)，而
SkyEye天目全數(shù)字實時仿真軟件通過系統(tǒng)虛擬機仿真能夠有效解決，為軟件開發(fā)和驗證提供一個強大、高效、易用的平臺，從而有效提高軟件開發(fā)和驗證的質(zhì)量和效率。參考文獻MDN：
https://developer.mozilla.org/zh-CN/docs/Web/Web_Components?
??微信公眾號：迪捷數(shù)原
聯(lián)系電話：010-56131268，0575-88361699；13501153049、13260299730 （微信同號）
聯(lián)系郵箱：contact@digiproto.com
工作地址：杭州市海淀區(qū)中關(guān)村軟件園
杭州市松江區(qū)阿里云創(chuàng)新中心
浙江省杭州市越城區(qū)中關(guān)村?水木灣區(qū)科學(xué)園3#802
公司網(wǎng)址：www.digiproto.com
公司簡介：浙江迪捷軟件科技有限公司2013年成立于杭州，專注于安全關(guān)鍵領(lǐng)域數(shù)字化轉(zhuǎn)型，遵循中立開放的商業(yè)理念，為我國防務(wù)等安全關(guān)鍵領(lǐng)域提供MBSE和數(shù)字裝備等解決方案。我司軟件產(chǎn)品全部為自主研發(fā)，具有核心知識產(chǎn)權(quán)，涉及了高端裝備的設(shè)計、研發(fā)和測試等環(huán)節(jié)。??
在線咨詢