【W(wǎng)eb技術(shù)】1233- 秒懂 Web Component
是什么
Web Components 實際上一系列技術(shù)的組合，主要包含 3 部分：
自定義元素。 在 HTML 基礎(chǔ)標(biāo)簽外擴展自定義標(biāo)簽元素 Shadow DOM。 主要用于將 Shadow DOM 的內(nèi)容與外層 document DOM 隔離 HTML 模板。 使用 來定義組件模板，使用
也正是因為它是一系列 API 的組合，所以在使用時，我們要同時關(guān)注這些 API 的兼容性：
將上面技術(shù)合理使用后，就可以 將功能、邏輯封裝到自定義標(biāo)簽中，通過復(fù)用這些自定義的組件來提高開發(fā)效率。 聽起來就像是 Vue.js 和 React 做的那一套，實際上，在使用 Web Components 的時候，也是很像的。
上手
接下來我們通過實現(xiàn)一個
自定義元素
首先，創(chuàng)建一個 index.html，在里面直接調(diào)用
<body>
??<book-card>book-card>
??<script?src="./BookCard.js">script>
body>
因為瀏覽器不認識 BookCard.js 里注冊它，并在 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)實現(xiàn)了最基礎(chǔ)的 DOM 結(jié)構(gòu)了：
上面一直執(zhí)行
createElement并設(shè)置屬性值的行為是否有點像 React 的React.createElement呢？
HTML 模板
這樣一行一行地生成 DOM 結(jié)構(gòu)不僅寫的累，讀的人也很難一下子看明白。為了解決這個問題，我們可以使用 HTML 模板 。直接在 HTML 里寫一個 模板：
<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>
然后在注冊組件中直接調(diào)用這個模板即可：
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)
這樣的
書寫方式是不是又有點像我們熟悉的Vue框架了呢？
寫樣式
搞定了 DOM 之后，我們就可以寫樣式了，直接在 里面新加一個