講解Web Components實(shí)現(xiàn)類Element UI中的Card卡片

3403771864 發(fā)布于2023-02-27 22:27 / 1314人閱讀

　　眾所周知 Web Components 是一個(gè)瀏覽器原生支持的組件化方案，這個(gè)能夠創(chuàng)建新的自定義、可封裝、可重用的HTML 標(biāo)記。同時(shí)也可以不用加載任何外部模塊，能夠直接在瀏覽器中查看。今天我們想講的就是如何使用 Web Components 實(shí)現(xiàn)一個(gè)類 Element UI 中的 Card 卡片組件。

　　先進(jìn)變成如雨后春筍，出現(xiàn)了很多優(yōu)秀的框架，如：Vue、React、Angular等等，對(duì)于開(kāi)發(fā)效益有大大提升。

　　其中我們知道在組件化開(kāi)發(fā)發(fā)揮了至關(guān)重要的作用，但要注意在組件化開(kāi)發(fā)都需要依賴第三方框架，編譯打包之后才能在瀏覽器正常使用。

　　這里給大家給提出原生組件Web Components，與之第三方框架使用起來(lái)更簡(jiǎn)單直接，符合直覺(jué)，不用加載任何外部模塊，代碼量小。

　　Web Components 核心組成

　　自定義元素（custom element），使用window.customElements.defineAPI注冊(cè)

　　Shadow DOM隔離，影藏標(biāo)記結(jié)構(gòu)、樣式和行為

　　這里要說(shuō)<template>中定義標(biāo)記結(jié)構(gòu)、樣式，多次重用。利用slot插槽、命名插槽，可以傳入定制化的結(jié)構(gòu)UI，使用上類似Vue中的slot插槽

　　1. Custom Elements

　　自定義的 HTML 標(biāo)簽，稱為自定義元素（custom element）。根據(jù)規(guī)范，自定義元素的名稱必須包含連詞線-，用與區(qū)別原生的 HTML 元素。所以，<com-card>不能寫成<comcard>。

　　<div id="custom-card" class="com-card">
　　<div class="com-card-head">
　　<slot name="head"></slot>
　　</div>
　　<div class="com-card-body">
　　<slot></slot>
　　<div class="link-wrap">
　　<a class="link" href="" title=" rel="external nofollow" rel="external nofollow" "></a>
　　</div>
　　</div>
　　</div>
　　<script>
　　class ComCard extends HTMLElement {
　　constructor() {
　　super()
　　var tplEle = document.getElementById('custom-card')
　　this.append(tplEle)
　　}
　　}
　　window.customElements.define('com-card', ComCard)
　　</script>

　　以上就可以注冊(cè)了瀏覽器可識(shí)別渲染的一個(gè)自定義元素標(biāo)簽。

　　2. Shadow DOM

　　Shadow DOM 是對(duì)DOM的一個(gè)封裝。可以將標(biāo)記結(jié)構(gòu)、樣式和行為隱藏起來(lái)，并與頁(yè)面上的其他代碼相隔離，保證不同的部分不會(huì)混在一起，可使代碼更加干凈、整潔。

　　使用自定義元素的this.attachShadow()方法可以開(kāi)啟Shadow DOM。

　　class ComCard extends HTMLElement {
　　constructor() {
　　super()
　　var shadow = this.attachShadow({mode: 'closed'}) // open
　　var tplEle = document.getElementById('custom-card')
　　shadow.appendChild(tplEle)
　　}
　　}
　　window.customElements.define('com-card', ComCard);

　　其中參數(shù){ mode: 'closed' }，表示Shadow DOM是封閉的，外部是無(wú)法訪問(wèn)的。

　　3. templates 和 slots

　　因?yàn)榻M件的樣式應(yīng)該與代碼封裝在一起，只對(duì)自定義元素生效，不影響外部的全局樣式。所以，可以把樣式寫在<template>里面，這樣作為自定義元素結(jié)構(gòu)的基礎(chǔ)可以被多次重用。

　　<template id="custom-card-template">
　　<style>
　　.com-card {
　　}
　　</style>
　　<div class="com-card">
　　</div>
　　</template>
　　<script>
　　class ComCard extends HTMLElement {
　　constructor() {
　　super();
　　var shadow = this.attachShadow({mode: 'closed'}) // open
　　var tplEle = document.getElementById('custom-card-template')
　　var content = tplEle.content.cloneNode(true)
　　shadow.appendChild(content)
　　}
　　}
　　window.customElements.define('com-card', ComCard);
　　</script>

　　完整代碼

　　<!DOCTYPE html>
　　<html>
　　<head>
　　<meta charset="UTF-8">
　　<title>Web Component</title>
　　<style>
　　* {
　　box-sizing: border-box;
　　}
　　body {
　　font-size: 14px;
　　}
　　.box {
　　padding: 5px 0 30px;
　　}
　　.box .caption {
　　display: none;
　　}
　　.box h1 {
　　text-align: center;
　　}
　　.box li {
　　color: #666;
　　font-size: 14px;
　　line-height: 1.8;
　　margin-top: 15px;
　　}
　　.img {
　　display: block;
　　width: 80%;
　　margin: 0 !important;
　　}
　　.card-head {
　　display: flex;
　　justify-content: space-between;
　　align-items: center;
　　}
　　.card-title {
　　color: #333;
　　font-size: 16px;
　　}
　　.card-head-btn {
　　color: #409eff;
　　cursor: pointer;
　　text-decoration: none !important;
　　}
　　.card-head-btn:hover {
　　text-decoration: none;
　　}
　　</style>
　　</head>
　　<body>
　　<div class="box">
　　<h1>Web Component</h1>
　　<com-card data-show-head="0" data-url="https://tiven.cn" data-title="天問(wèn)博客">
　　<div slot="head" class="card-head">
　　<div class="card-title">卡片名稱</div>
　　<a class="card-head-btn">操作按鈕</a>
　　</div>
　　<img class="img" src="https://tiven.cn/static/img/kpl-sunwukong-a3Lt-ed2NG9r4NFDm_9DA.jpg" alt="天問(wèn)">
　　</com-card>
　　<com-card data-show-head="1" data-url="https://tiven.cn/p/de241e23/" data-title="Vite+Vue3+Vant快速構(gòu)建項(xiàng)目">
　　<div slot="head" class="card-head">
　　<div class="card-title">卡片名稱</div>
　　<a class="card-head-btn" onclick="hello()">操作按鈕</a>
　　</div>
　　<img class="img" src="https://tiven.cn/static/img/kpl-xuance-JqX71qH7aTflHV_gqvhIc.jpg" alt="天問(wèn)">
　　<ol>
　　<li>君不見(jiàn)黃河之水天上來(lái)，奔流到海不復(fù)回。</li>
　　<li>君不見(jiàn)高堂明鏡悲白發(fā)，朝如青絲暮成雪。</li>
　　<li>天生我材必有用，千金散盡還復(fù)來(lái)。</li>
　　</ol>
　　</com-card>
　　</div>
　　<template id="custom-card-template">
　　<style>
　　.com-card {
　　min-width: 200px;
　　min-height: 100px;
　　border-radius: 4px;
　　border: 1px solid #ebeef5;
　　background-color: #fff;
　　overflow: hidden;
　　color: #303133;
　　transition: .3s;
　　box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
　　}
　　.com-card-head {
　　padding: 10px 20px;
　　border-bottom: 1px solid #ebeef5;
　　box-sizing: border-box;
　　}
　　.com-card-body {
　　padding: 20px;
　　}
　　.link-wrap {
　　text-align: left;
　　padding-top: 20px;
　　}
　　.link {
　　display: inline-block;
　　height: 42px;
　　line-height: 43px;
　　padding: 0 30px;
　　text-align: center;
　　cursor: pointer;
　　color: #fff;
　　background-color: #409eff;
　　border-color: #409eff;
　　-webkit-appearance: none;
　　box-sizing: border-box;
　　outline: none;
　　transition: .1s;
　　font-weight: 500;
　　-moz-user-select: none;
　　-webkit-user-select: none;
　　-ms-user-select: none;
　　font-size: 14px;
　　border-radius: 4px;
　　text-decoration: none !important;
　　}
　　</style>
　　<div class="com-card">
　　<div class="com-card-head">
　　<slot name="head"></slot>
　　</div>
　　<div class="com-card-body">
　　<slot></slot>
　　<div class="link-wrap">
　　<a class="link" href="" title=" rel="external nofollow" rel="external nofollow" "></a>
　　</div>
　　</div>
　　</div>
　　</template>
　　<script>
　　class ComCard extends HTMLElement {
　　constructor() {
　　super();
　　var shadow = this.attachShadow({mode: 'closed'}) // open
　　var tplEle = document.getElementById('custom-card-template')
　　var content = tplEle.content.cloneNode(true)
　　var attrList = Array.from(this.attributes);
　　var props = attrList.reduce((prev, item)=>{
　　prev[item.name] = item.value
　　return prev
　　}, {})
　　if (props['data-show-head']!=='1') {
　　var head = content.querySelector('.com-card-head')
　　head.remove()
　　}
　　var urlEle = content.querySelector('.link')
　　if (props['data-url'] && props['data-title']) {
　　urlEle.href = props['data-url']
　　urlEle.title = props['data-title']
　　urlEle.innerText = props['data-title']
　　} else {
　　urlEle.remove()
　　}
　　shadow.appendChild(content)
　　}
　　connectedCallback(){
　　//在這里發(fā)送數(shù)據(jù)請(qǐng)求（Ajax）
　　console.log('connectedCallback')
　　}
　　//被從文檔DOM中刪除時(shí)調(diào)用
　　disconnectedCallback(){
　　console.log('disconnectedCallback')
　　}
　　//被移動(dòng)到新的文檔時(shí)調(diào)用
　　adoptedCallback(){
　　console.log('adoptedCallback')
　　}
　　//當(dāng)增加、刪除、修改自身的屬性時(shí)被調(diào)用
　　attributeChangedCallback(){
　　console.log('attributeChangedCallback')
　　}
　　}
　　window.customElements.define('com-card', ComCard);
　　function hello() {
　　alert('Hello，Web Component')
　　}
　　</script>
　　</body>
　　</html>

　　最終效果如上圖所示

　　Web Components vs Vue Components

Vue Component	Web Component
data	實(shí)例屬性
props	attributes
watch	observedAttributes、attributeChangedCallback
computed	getters
methods	class methods
mounted	connectedCallback
destroyed	disconnectedCallback
style scoped	template中的style
template	template

　　Web Components 生命周期回調(diào)函數(shù)

　　connectedCallback：當(dāng) custom element首次被插入文檔DOM時(shí)，被調(diào)用。

　　disconnectedCallback：當(dāng) custom element從文檔DOM中刪除時(shí)，被調(diào)用。

　　adoptedCallback：當(dāng) custom element被移動(dòng)到新的文檔時(shí)，被調(diào)用。

　　attributeChangedCallback: 當(dāng) custom element增加、刪除、修改自身屬性時(shí)，被調(diào)用。

　　優(yōu)點(diǎn) and 缺點(diǎn)

　　優(yōu)點(diǎn)：

　　瀏覽器原生支持，無(wú)需第三方庫(kù)

　　語(yǔ)義化

　　復(fù)用性，移植性高

　　在不同的tema也可以共用組件

　　缺點(diǎn)：

　　需要操作DOM

　　不同瀏覽器無(wú)法兼容，體驗(yàn)不好

　　和外部css交互比較難

　　基于web components的框架

　　LitElement是一個(gè)快速、輕量級(jí)的 Web UI 框架。使用lit-html來(lái)渲染元素。

　　Polymer是一款實(shí)用、基于事件驅(qū)動(dòng)、封裝性和交互性強(qiáng)的 Web UI 框架。

　　Omi是基于 Web 組件的跨框架跨平臺(tái)框架。移動(dòng)端 & 桌面 & 小程序。

本篇內(nèi)容已全部講述完畢，歡迎關(guān)注更多后續(xù)精彩內(nèi)容！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/130322.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

3403771864

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

匯總有關(guān)JS對(duì)象的創(chuàng)建與繼承

閱讀 561·2023-03-27 18:33
小程序有關(guān)手寫板簽名具體代碼

閱讀 748·2023-03-26 17:27
剖析Vue3中偵聽(tīng)器watch的使用教程

閱讀 645·2023-03-26 17:14
JavaScript取消請(qǐng)求有哪些方法

閱讀 602·2023-03-17 21:13
解析React SSR 中的限流案例

閱讀 537·2023-03-17 08:28
解析微信小程序如何實(shí)現(xiàn)日期范圍選擇

閱讀 1822·2023-02-27 22:32
講解Web Components實(shí)現(xiàn)類Element UI中的Card卡片

閱讀 1315·2023-02-27 22:27
JavaScript使用export和import的兩個(gè)報(bào)錯(cuò)如何解決

閱讀 2198·2023-01-20 08:28

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

講解Web Components實(shí)現(xiàn)類Element UI中的Card卡片

相關(guān)文章

**使用純粹的JS構(gòu)建 Web Component**

**使用純粹的JS構(gòu)建 Web Component**

**使用純粹的JS構(gòu)建 Web Component**

利用 Css 制作精美的卡片UI

發(fā)表評(píng)論

0條評(píng)論

3403771864

男|高級(jí)講師

TA的文章

匯總有關(guān)JS對(duì)象的創(chuàng)建與繼承

小程序有關(guān)手寫板簽名具體代碼

剖析Vue3中偵聽(tīng)器watch的使用教程

JavaScript取消請(qǐng)求有哪些方法

解析React SSR 中的限流案例

解析微信小程序如何實(shí)現(xiàn)日期范圍選擇

講解Web Components實(shí)現(xiàn)類Element UI中的Card卡片

JavaScript使用export和import的兩個(gè)報(bào)錯(cuò)如何解決

最新活動(dòng)