Web Components 入門實(shí)例教程

來源 |?http://www.ruanyifeng.com/blog/2019/08/web_components.html

組件是前端的發(fā)展方向，現(xiàn)在流行的React和Vue都是組件框架。

谷歌公司由于掌握了Chrome瀏覽器，一直在推動(dòng)瀏覽器的原生組件，即Web組件API。部分第三方框架，原生組件簡單直接，符合直覺，不用加載任何外部模塊，代碼量小。因此，它還在不斷發(fā)展，但已經(jīng)可用于生產(chǎn)環(huán)境。

Web組件API內(nèi)容很多，這里不是全面的教程，只是一個(gè)簡單的演示，讓大家看一下怎么用它開發(fā)組件。

1、自定義元素

下圖是一個(gè)用戶卡片。

本文演示如何把這個(gè)卡片，寫成Web Components組件，這里是最后的完整代碼。

網(wǎng)頁只要插入以下的代碼，就會(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 = '';    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 = '[email protected]';
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、