微前端之Web元件自定義元素範例詳解

2022-08-23 18:02:05

我們知道的

第一：我們熟知的HTML標籤有 a, p, div, section, ul, li, h2, article, head, body, strong, video, audio 等等

第二：我們知道，a標籤是連結，p標籤是段落，div是塊級，h2是字型，strong 是粗體，video 可以播放視訊，標籤可以新增click等事件等等

所以，那麼顯然我們知道這些標籤的名稱，而且知道他們的預設的css樣式，而且知道他們預設的js事件

由此，我們是否可以自定義標籤呢，由我們自己規定名稱，規定預設css樣式，規定標籤預設顯示dom結構，規定預設事件呢？

答案當然是肯定的！！下面就介紹主角Web元件

Web元件使用

名稱規範

在定義它們時必須使用至少兩個單詞和一個連字元
必須小寫
自定義元素不能自閉合

class UserCard extends HTMLElement {
  constructor() {
    super();
  }
}
window.customElements.define('user-card', UserCard);

元件傳引數並可以寫模板包括js和css

元件的樣式應該與程式碼封裝在一起，只對自定義元素生效，不影響外部的全域性樣式，:host偽類，指代自定義元素本身

<html>
    <head></head>
    <body>
        <user-card name="Marty Mcfly"></user-card>
        <template id="userCardTemplate">
          <div class="profile-picture">
            <img src="marty.png" alt="Marty Mcfly" />
          </div>
          <div class="name"></div>
          <style>
           :host {
             display: flex;
             align-items: center;
             width: 450px;
             height: 180px;
             background-color: #d4d4d4;
             border: 1px solid #d5d5d5;
             box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
             border-radius: 3px;
             overflow: hidden;
             padding: 10px;
             box-sizing: border-box;
             font-family: 'Poppins', sans-serif;
           }
           .image {
             flex: 0 0 auto;
             width: 160px;
             height: 160px;
             vertical-align: middle;
             border-radius: 5px;
           }
        </style>
        </template>
        <script>
            class UserCard extends HTMLElement {
              constructor() {
                super();
                var templateElem = document.getElementById('userCardTemplate');
                var content = templateElem.content.cloneNode(true);
                // 使用name引數
                content.querySelector('.container>.name').innerText = this.getAttribute('name');
                this.appendChild(content);
              }
            }
            window.customElements.define('user-card', UserCard);    
        </script>
    </body>
</html>

Shadow Dom 影子節點

沒有開啟Shadow Dom 前template的內容會直接append到user-card節點上
開啟Shadow Dom後，template和user-card中間多了一個節點叫shadowRoot
attachShadow 的mode引數有 open 和 closed 兩個不同引數，區別是open時，外部能存取內部節點，closed時完全隔離
attachShadow 是大多數標籤都支援的，比如 div，p，selection，但是a，ul，li等不支援

<script>
    class UserCard extends HTMLElement {
      constructor() {
        super();
        var shadow = this.attachShadow( { mode: 'closed' } );   /******這行開啟shadow*****/
        var templateElem = document.getElementById('userCardTemplate');
        var content = templateElem.content.cloneNode(true);
        // 使用name引數
        content.querySelector('.container>.name').innerText = this.getAttribute('name');
        shadow.appendChild(content);         /******這行template新增到shadow*****/
      }
    }
    window.customElements.define('user-card', UserCard);    
</script>

類中的建構函式和勾點函數

class UserCard extends HTMLElement {
  // attributeChangedCallback 能監聽的屬性
  static get observedAttributes() {return ['name', 'url']; }
  constructor() {
    super();
    // 可以創Shadom，通過this.shadowRoot獲取
    // this.attachShadow({ mode: 'open' })
  }
  connectedCallback (){
      console.log('勾點，元素append到ducument觸發')
  }
  disconnectedCallback (){
      console.log('勾點，元素從document刪除觸發')
  }
  // 只有observedAttributes 中監聽的屬性name,url變化會觸發下面回撥
  attributeChangedCallback (attr, oldVal, newVal){
      console.log('勾點，元素屬性改變時觸發')
  }
}
window.customElements.define('user-card', UserCard);

姓名	何時呼叫
constructor	元素的一個範例被建立。對於初始化狀態、設定事件監聽器或建立shadow Dom。
connectedCallback	每次將元素插入 DOM 時呼叫。一般主要工作程式碼寫在這裡。
disconnectedCallback	每次從 DOM 中刪除元素時呼叫。一般寫清理的一些程式碼。
attributeChangedCallback(attrName, oldVal, newVal)	觀察屬性在新增、刪除、更新、替換時被呼叫。只有屬性中列出的observedAttributes屬性才會收到此回撥。
adoptedCallback	自定義元素已被移動到一個新的document（例如有人稱為document.adoptNode(el)）。

getter/setter屬性和屬性反射

html中attribute 和類中property 是各自獨立，想要建立對映需要手動設定

getter和setter生效

<html>
  <head></head>
  <body>
    <user-card id="usercard" name="Marty"></user-card>
    <script>
      class UserCard extends HTMLElement {
        _name = null;
        constructor() {
          super();
        }
        set name(value) {
          this._name = name;
        }
        get name() {
          return this._name;
        }
      }
      window.customElements.define("user-card", UserCard);
    </script>
  </body>
</html>

測試

document.getElementById('usercard').name = 'jack'  // 會進入setter
document.getElementById('usercard').name  // 會進入getter，返回jack
document.getElementById('usercard').getAttribute('name')  // 不會進入getter，返回Marty
document.getElementById('usercard').setAttribute('name','bob')  // 不會進入setter
document.getElementById('usercard').getAttribute('name')  // 不會進入getter，返回bob

此時，我們看到 setAttribute 和 gettAttribute 都不會觸發類中的 getter 和 setter 方法，但是可以看到如果是 .name 這樣的方式可以觸發 ,那麼改造方式如下：

方式一重寫 setAttribute ：

<html>
  <head></head>
  <body>
    <user-card id="usercard" name="Marty"></user-card>
    <user-card id="uc" name="Marty Mcfly"></user-card>
    <script>
      const rawSetAttribute = Element.prototype.setAttribute;
      class UserCard extends HTMLElement {
        _name = null;
        constructor() {
          super();
          Element.prototype.setAttribute = function setAttribute(key, value) {
            // 特定的指定name
            if (key == "name") {
              this.name = value; // 這樣就能觸發 setter
            }
            rawSetAttribute.call(this, key, value);
          };
        }
        set name(value) {
          debugger;
          this._name = name;
        }
        get name() {
          debugger;
          return this._name;
        }
      }
      window.customElements.define("user-card", UserCard);
    </script>
  </body>
</html>

方式二重寫 observedAttributes和attributeChangedCallback 監聽 name ：

<html>
  <head></head>
  <body>
    <user-card id="uc" name="Marty Mcfly"></user-card>
    <script>
      class UserCard extends HTMLElement {
        static get observedAttributes() {
          return ["name"];
        }
        _name = null;
        constructor() {
          super();
        }
        attributeChangedCallback(attr, _oldVal, newVal) {
          if (attr == "name") {
            this.name = newVal;
          }
        }
        set name(value) {
          debugger;
          this._name = name;
        }
        get name() {
          debugger;
          return this._name;
        }
      }
      window.customElements.define("user-card", UserCard);
    </script>
  </body>
</html>

由此，可以看到元件在頁面渲染時會進入setter方法，而且 setAttribute，getAttribute 均進入到setter方法

document.getElementById('usercard').setAttribute('name','bob')  // 會進入setter
document.getElementById('usercard').getAttribute('name')  // 會進入getter，返回bob

擴充套件原生 HTML

假設您想建立一個更高階的<button>. 與其複製<button>的行為和功能，更好的選擇是使用自定義元素逐步增強現有元素。

擴充套件現有元素的主要好處是獲得其所有特性（DOM 屬性、方法、可存取性）。
Safari瀏覽器相容性待提高
要擴充套件一個元素，您需要建立一個繼承自正確 DOM 介面的類定義。前面例子都是繼承HTMLElement，現在更多繼承例如，按鈕HTMLButtonElement,圖片HTMLImageElement

class FancyButton extends HTMLButtonElement {
    constructor() {
        super(); 
        this.addEventListener('click', e => this.drawRipple(e.offsetX, e.offsetY));
    }
    drawRipple(x, y) {
        let div = document.createElement('div');
        div.classList.add('ripple');
        this.appendChild(div);
        div.style.top = `${y - div.clientHeight/2}px`;
        div.style.left = `${x - div.clientWidth/2}px`;
        div.style.backgroundColor = 'currentColor';
        div.classList.add('run');
        div.addEventListener('transitionend', e => div.remove());
    }
}
customElements.define('fancy-button', FancyButton, {extends: 'button'});

注意：擴充套件基礎元素時，對的呼叫 define() 略有變化。必需的第三個引數告訴瀏覽器您正在擴充套件哪個標籤

呼叫方式一：

<button is="fancy-button" disabled>Fancy button!</button>

呼叫方式二：

let button = document.createElement('button', {is: 'fancy-button'});
button.textContent = 'Fancy button!';
button.disabled = true;
document.body.appendChild(button);

呼叫正規化三

let button = new FancyButton();
button.textContent = 'Fancy button!';
button.disabled = true;

以上就是微前端之Web元件自定義元素範例詳解的詳細內容，更多關於微前端Web元件自定義元素的資料請關注it145.com其它相關文章！