Web Components 系列（十一）—— 實現 MyCard 的可複用

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

前言

在上一節中，使用 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() 時，傳入的都是克隆節點。

~

~ 本文完，感謝閱讀！

~

學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！

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

相關文章