來(lái)源 |?http://www.ruanyifeng.com/blog/2019/08/web_components.html組件是前端的發(fā)展方向，現(xiàn)在流行的React和Vue都是組件框架。谷歌公司由于掌握了Chrome瀏覽器，一直在推動(dòng)瀏覽器的原生組件，即Web組件API。部分第三方框架，原生組件簡(jiǎn)單直接，符合直覺，不用加載任何外部模塊，代碼量小。因此，它還在不斷發(fā)展，但已經(jīng)可用于生產(chǎn)環(huán)境。Web組件API內(nèi)容很多，這里不是全面的教程，只是一個(gè)簡(jiǎn)單的演示，讓大家看一下怎么用它開發(fā)組件。

1、自定義元素

下圖是一個(gè)用戶卡片。本文演示如何把這個(gè)卡片，寫成Web Components組件，這里是最后的完整代碼。網(wǎng)頁(yè)只要插入以下的代碼，就會(huì)顯示用戶卡片。這種自定義的HTML標(biāo)簽，稱為自定義元素(custom element)。根據(jù)規(guī)范，自定義元素的名稱必須包含連詞線，用與區(qū)別原生的HTML元素。所以，不能寫成。

2、customElements.define()

自定義元素需要使用JavaScript定義一個(gè)類，所有都會(huì)是這個(gè)類的實(shí)例。class UserCard extends HTMLElement {constructor() {super(); }}上面代碼中，UserCard就是自定義元素的類。注意，這個(gè)類的父類是HTMLElement，因此繼承了HTML元素的特性。接著，使用瀏覽器原生的customElements.define()方法，告訴瀏覽器元素與這個(gè)類關(guān)聯(lián)。window.customElements.define('user-card', UserCard);

3、自定義元素的內(nèi)容

自定義元素目前還是空的，下面在類里面稱為這個(gè)元素的內(nèi)容。class UserCard extends HTMLElement {constructor() {super();var image = document.createElement('img'); image.src = 'https://semantic-ui.com/images/avatar2/large/kristy.png'; image.classList.add('image');var container = document.createElement('div'); container.classList.add('container');var name = document.createElement('p'); name.classList.add('name'); name.innerText = 'User Name';var email = document.createElement('p'); email.classList.add('email'); email.innerText = 'yourmail@some-email.com';var button = document.createElement('button'); button.classList.add('button'); button.innerText = 'Follow'; container.append(name, email, button);this.append(image, container); }}上面的代碼最后一行，this.append()的this表示自定義元素實(shí)例。完成這一步以后，自定義元素內(nèi)部的DOM結(jié)構(gòu)就已經(jīng)生成了。

4、標(biāo)簽

使用JavaScript寫上一級(jí)的DOM結(jié)構(gòu)很麻煩，Web Components API提供了標(biāo)簽，可以在它里面使用HTML定義的DOM。

User Name

yourmail@some-email.com

Follow然后，改寫一下自定義元素的類，為自定義元素加載。class UserCard extends HTMLElement {constructor() {super();var templateElem = document.getElementById('userCardTemplate');var content = templateElem.content.cloneNode(true);this.appendChild(content); }} 上面的代碼中，獲取上游以后，克隆了它的所有子元素，這是因?yàn)榭赡苡卸鄠€(gè)自定義元素的實(shí)例，這個(gè)模板還要留給其他實(shí)例使用，所以不能直接移動(dòng)它的子元素。到這一步為止，完整的代碼如下。...class UserCard extends HTMLElement {constructor() {super();var templateElem = document.getElementById('userCardTemplate');var content = templateElem.content.cloneNode(true);this.appendChild(content); } }window.customElements.define('user-card', UserCard);

5、添加樣式

自定義元素還沒有樣式，可以給它指定細(xì)分樣式，類似下面這樣。user-card {/* ... */}但是，組件的樣式應(yīng)該與代碼封裝在一起，只對(duì)自定義元素實(shí)施，不影響外部的布局樣式。所以，可以把樣式寫在里面。:host {display: flex;align-items: center;width: 450px;height: 180px;background-color: #d4d4d4;border: 1px solid #d5d5d5;box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);border-radius: 3px;overflow: hidden;padding: 10px;box-sizing: border-box;font-family: 'Poppins', sans-serif; }.image {flex: 0 0 auto;width: 160px;height: 160px;vertical-align: middle;border-radius: 5px; }.container {box-sizing: border-box;padding: 20px;height: 160px; }.container > .name {font-size: 20px;font-weight: 600;line-height: 1;margin: 0;margin-bottom: 5px; }.container > .email {font-size: 12px;opacity: 0.75;line-height: 1;margin: 0;margin-bottom: 15px; }.container > .button {padding: 10px 25px;font-size: 12px;border-radius: 5px;text-transform: uppercase; }

User Name

yourmail@some-email.com

Follow上方代碼中，樣式里面的:host偽類，指代自定義元素本身。

6、自定義元素的參數(shù)

內(nèi)容現(xiàn)在是在里面設(shè)定的，為了方便使用，把它改成參數(shù)。image="https://semantic-ui.com/images/avatar2/large/kristy.png"name="User Name"email="yourmail@some-email.com">代碼也相應(yīng)改造。Follow John最后，改一下類的代碼，把參數(shù)加到自定義元素里面。class UserCard extends HTMLElement {constructor() {super();var templateElem = document.getElementById('userCardTemplate');var content = templateElem.content.cloneNode(true); content.querySelector('img').setAttribute('src', this.getAttribute('image')); content.querySelector('.container>.name').innerText = this.getAttribute('name'); content.querySelector('.container>.email').innerText = this.getAttribute('email');this.appendChild(content); }}window.customElements.define('user-card', UserCard);

7、影子DOM

我們不希望用戶能夠看到的內(nèi)部代碼，Web組件允許內(nèi)部代碼隱藏起來(lái)，這叫做Shadow DOM，即這部分DOM默認(rèn)與外部DOM隔離，內(nèi)部任何代碼都無(wú)法影響外部。自定義元素的this.attachShadow()方法開啟Shadow DOM，詳見下面的代碼。class UserCard extends HTMLElement {constructor() {super();var shadow = this.attachShadow( { mode: 'closed' } );var templateElem = document.getElementById('userCardTemplate');var content = templateElem.content.cloneNode(true); content.querySelector('img').setAttribute('src', this.getAttribute('image')); content.querySelector('.container>.name').innerText = this.getAttribute('name'); content.querySelector('.container>.email').innerText = this.getAttribute('email'); shadow.appendChild(content); }}window.customElements.define('user-card', UserCard);上面的代碼中，this.attachShadow()方法的參數(shù){ mode: 'closed' }，表示Shadow DOM是封閉的，永久外部訪問。至此，這個(gè)Web組件組件就完成了，完整代碼可以訪問這里。可以看到，整個(gè)過(guò)程還是很簡(jiǎn)單的，不像第三方框架那樣有復(fù)雜的API。

8、組件的擴(kuò)展

在前面的基礎(chǔ)上，可以對(duì)組件進(jìn)行擴(kuò)展。(1)與用戶互動(dòng)用戶卡片是一個(gè)靜態(tài)組件，如果要與用戶互動(dòng)，也很簡(jiǎn)單，就是在類里面監(jiān)聽各種事件。this.$button = shadow.querySelector('button');this.$button.addEventListener('click', () => {// do something});(2)組件的封裝上面的例子中，與網(wǎng)頁(yè)代碼放在一起，可以其實(shí)用腳本把注入|網(wǎng)頁(yè)。這樣的話，JavaScript的跟腳本就能封裝一個(gè)分類中翻譯JS文件，成為獨(dú)立的組件文件。網(wǎng)頁(yè)只要加載這個(gè)腳本，使用就能組件。這里就不展開了，更多Web Components的高級(jí)用法，可以接著學(xué)習(xí)下面兩篇文章。

• Web組件初學(xué)者教程
• 自定義元素v1：可重用的Web組件

九，參考鏈接

• Web組件剖析，Uday Hiwarale

(完)

總結(jié)

以上是生活随笔為你收集整理的webcomponents安装了没有用_Web Components 入门实例教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。