【W(wǎng)eb技術(shù)】1233- 秒懂 Web Component
是什么
Web Components 實(shí)際上一系列技術(shù)的組合，主要包含 3 部分：
自定義元素。 在 HTML 基礎(chǔ)標(biāo)簽外擴(kuò)展自定義標(biāo)簽元素 Shadow DOM。 主要用于將 Shadow DOM 的內(nèi)容與外層 document DOM 隔離 HTML 模板。 使用 來(lái)定義組件模板，使用
也正是因?yàn)樗且幌盗?API 的組合，所以在使用時(shí)，我們要同時(shí)關(guān)注這些 API 的兼容性：
將上面技術(shù)合理使用后，就可以 將功能、邏輯封裝到自定義標(biāo)簽中，通過(guò)復(fù)用這些自定義的組件來(lái)提高開(kāi)發(fā)效率。 聽(tīng)起來(lái)就像是 Vue.js 和 React 做的那一套，實(shí)際上，在使用 Web Components 的時(shí)候，也是很像的。
上手
接下來(lái)我們通過(guò)實(shí)現(xiàn)一個(gè)
自定義元素
首先，創(chuàng)建一個(gè) index.html，在里面直接調(diào)用
<body>
??<book-card>book-card>
??<script?src="./BookCard.js">script>
body>
因?yàn)闉g覽器不認(rèn)識(shí) BookCard.js 里注冊(cè)它，并在 index.html 中引入并執(zhí)行 BookCard.js。
class?BookCard?extends?HTMLElement?{
??constructor()?{
????super();
????const?container?=?document.createElement('div')
????container.className?=?'container'
????const?image?=?document.createElement('img')
????image.className?=?'image'
????image.src?=?"https://pic1.zhimg.com/50/v2-a6d65e05ec8db74369f3a7c0073a227a_200x0.webp"
????const?title?=?document.createElement('p')
????title.className?=?'title'
????title.textContent?=?'切爾諾貝利的祭禱'
????const?desc?=?document.createElement('p')
????desc.className?=?'desc'
????desc.textContent?=?'S·A·阿列克謝耶維奇'
????const?price?=?document.createElement('p')
????price.className?=?'price'
????price.textContent?=?`￥25.00`
????container.append(image,?title,?desc,?price)
????this.appendChild(container)
??}
}
customElements.define('book-card',?BookCard)
上面已經(jīng)實(shí)現(xiàn)了最基礎(chǔ)的 DOM 結(jié)構(gòu)了：
上面一直執(zhí)行
createElement并設(shè)置屬性值的行為是否有點(diǎn)像 React 的React.createElement呢？
HTML 模板
這樣一行一行地生成 DOM 結(jié)構(gòu)不僅寫(xiě)的累，讀的人也很難一下子看明白。為了解決這個(gè)問(wèn)題，我們可以使用 HTML 模板 。直接在 HTML 里寫(xiě)一個(gè) 模板：
<body>
??<template?id="book-card-template">
????<div?class="container">
??????<img?class="image"?src="https://pic1.zhimg.com/50/v2-a6d65e05ec8db74369f3a7c0073a227a_200x0.webp"?alt="">
??????<p?class="title">切爾諾貝利的祭禱p>
??????<p?class="desc">S·A·阿列克謝耶維奇p>
??????<p?class="price">￥25.00p>
????div>
??template>
??<book-card>book-card>
??<script?src="BookCard.js">script>
body>
然后在注冊(cè)組件中直接調(diào)用這個(gè)模板即可：
class?BookCard?extends?HTMLElement?{
??constructor()?{
????super();
????const?templateElem?=?document.getElementById('book-card-template')
????const?clonedElem?=?templateElem.content.cloneNode(true)
????this.appendChild(clonedElem)
??}
}
customElements.define('book-card',?BookCard)
這樣的
書(shū)寫(xiě)方式是不是又有點(diǎn)像我們熟悉的Vue框架了呢？
寫(xiě)樣式
搞定了 DOM 之后，我們就可以寫(xiě)樣式了，直接在 里面新加一個(gè)