Web Components 系列(十一)—— 實現 MyCard 的可複用

程式設計三昧發表於2022-02-18

MyCard可複用.001

前言

在上一節中,使用 Templates 實現了 MyCard 的基本佈局,並且在文章結尾我也說過,因為不可複用,其實用性基本為零。

今天我們透過使用具名 Slots 在 Templates 中佔位,然後再在自定義元素中給 Slots 傳值,提高自定義元素的靈活性。

傳值分析

因為每一個人的各項資訊都不盡相同,而對應到 Templates 中,就是所有 className 為 .info-content 的 div 中的內容都是可變的,所有可變值總結一下就是:

  • userName
  • gender
  • nation
  • birthYear
  • birthMonth
  • birthDay
  • address
  • cardNO

就是說,針對每一張 Card,以上這些屬性值都需要在自定義元件中傳遞。

使用 HTML 標籤自定義屬性

要給自定義元件,除了 Slots,也可以藉助 HTML 標籤的自定義屬性。

第一步:我們給 Templates 內部的可變項父標籤新增 id 標識,比如:

<div class="info-content" id="user_name">程式設計三昧</div>

第二步:在自定義元件內部獲取它本身的使用者自定義屬性:

class MyCard extends HTMLElement {
    constructor () {
        super();
        this.shadow = this.attachShadow({mode: "open"});
        let tempEle = document.getElementById("card_layout");
        this.shadow.appendChild(tempEle.content);
        // 獲取並填充姓名
        let userName = this.getAttribute("userName") || "程式設計三昧";
        this.shadow.querySelector("#user_name").textContent = userName;
        // 剩餘可變項的獲取和設定是一樣的流程
    }
}

第三步:在自定義元素的標籤上新增對應的自定義屬性:

<my-card userName="隱逸王"></my-card>

透過以上步驟,也是可以實現自定義元件傳值的效果的,從而達到元件複用的目的。

使用具名 Slots 傳值

雖然上面使用 HTML 標籤的自定義屬性達到了傳值的目的,但是 JS 部分的程式碼看起來不太美觀,下面我們就用 Slots 傳值的方式實現一版。

第一步:給 Templates 增加具名插槽進行佔位。

<template id="card_layout">
    <style>
        * {
            box-sizing: border-box;
        }

        :host {
            display: inline-block;
            width: 400px;
            height: 240px;
            border: 1px solid black;
            border-radius: 10px;
            box-shadow: -2px -2px 5px 0px #7a8489;
        }

        .container {
            display: flex;
            flex-direction: column;
            padding: 10px;
            height: 100%;
        }

        .card-body {
            flex: 1;
            display: flex;
        }

        .card-footer {
            padding: 10px 0;
        }

        .main-info {
            flex: 2;
        }

        .photo {
            flex: 1;
            display: flex;
            align-items: center;
        }

        .photo img {
            width: 100%;
        }

        .info-row {
            display: flex;
            padding-top: 15px;
        }

        .info-column {
            display: flex;
            align-items: center;
        }

        .info-title {
            padding: 0 10px;
            color: #0e5bd3;
            font-size: 12px;
            word-break: keep-all;
        }

        .info-content {
            letter-spacing: 2px;
        }
    </style>
    <div class="container">
        <div class="card-body">
            <div class="main-info">
                <div class="info-row">
                    <div class="info-column">
                        <div class="info-title">姓名</div>
                    </div>
                    <div class="info-content">
                        <slot name="userName">隱逸王</slot>
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-column">
                        <div class="info-title">性別</div>
                        <div class="info-content">
                            <slot name="gender"></slot>
                        </div>
                    </div>
                    <div class="info-column">
                        <div class="info-title">民族</div>
                        <div class="info-content">
                            <slot name="nation"></slot>
                        </div>
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-column">
                        <div class="info-title">出生</div>
                        <div class="info-content">
                            <slot name="birthYear">2022</slot>
                        </div>
                    </div>
                    <div class="info-column">
                        <div class="info-title"></div>
                        <div class="info-content">
                            <slot name="birthMonth">12</slot>
                        </div>
                    </div>
                    <div class="info-column">
                        <div class="info-title"></div>
                        <div class="info-content">
                            <slot name="birthDay"></slot>
                        </div>
                    </div>
                    <div class="info-column">
                        <div class="info-title"></div>
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-column">
                        <div class="info-title">住址</div>
                    </div>
                    <div class="info-content">
                        <slot name="address">xx省xx市xx區xx街道xx小區xx樓xx單元xx樓xx室</slot>
                    </div>
                </div>
            </div>
            <div class="photo">
                <img src="./static/photo.jpg">
            </div>
        </div>
        <div class="card-footer">
            <div class="info-row">
                <div class="info-column">
                    <div class="info-title">公民身份號碼</div>
                </div>
                <div class="info-content">
                    <slot name="cardNO">12345678901234567X</slot>
                </div>
            </div>
        </div>
    </div>
</template>

第二步:在自定義元素標籤內插入帶有 slot=‘’ 屬性的標籤及內容。

<my-card>
    <span slot="userName">程式設計三昧</span>
    <span slot="gender"></span>
    <span slot="nation"></span>
    <span slot="birthYear">2002</span>
    <span slot="birthMonth">2</span>
    <span slot="birthDay">2</span>
    <span slot="address">銀河系太陽系地球村亞洲中國美麗小區</span>
    <span slot="cardNO">134098567432129485-ZH</span>
</my-card>

最終實現的效果如下:

image-20220218203827480

實現一個網頁顯示多張 MyCard

如果想要同時展示多個卡片到同一頁面,你使用上面程式碼的話會發現:只有第一個有內容,其餘的都為空。這是因為第一個 MyCard 例項將 Templates 的內容都追加在了自己內部,其餘的例項獲取到的 tempEle.content 都為空節點。

想要解決這個問題,就需要在 MyCard 建構函式內部對 Templates 內容進行克隆,而不是直接使用:

class MyCard extends HTMLElement {
    constructor () {
        super();
        this.shadow = this.attachShadow({mode: "open"});
        let tempEle = document.getElementById("card_layout");
        this.shadow.appendChild(document.importNode(tempEle.content,true));
    }
}
customElements.define("my-card", MyCard);

總結

本文使用了兩種方式向自定義元件傳值:

  • HTML 標籤的自定義屬性傳值
  • 具名 Slots 傳值

兩種都可以使用,看情況及個人喜好而定吧。

另外,還有一個細節需要注意:appendChild() 方法會將傳入的節點整個的移動位置,傳入的那個 Node 在 DOM 中的位置會發生變化,我們一般在呼叫 appendChild() 時,傳入的都是克隆節點。

~

~ 本文完,感謝閱讀!

~

學習有趣的知識,結識有趣的朋友,塑造有趣的靈魂!

大家好,我是〖程式設計三昧〗的作者 隱逸王,我的公眾號是『程式設計三昧』,歡迎關注,希望大家多多指教!

本作品採用《CC 協議》,轉載必須註明作者和本文連結

相關文章