template標籤詳解

一、template標籤的概念及用途

template標籤是HTML5新增的標籤，用於定義模板內容，在頁面載入時不顯示，可以作為一個佔位符，在需要時使用JavaScript動態地添加到文檔當中，用於模板復用，即在不同的地方使用同一份HTML代碼。在實際應用中，通常把一些常用的HTML結構放入template標籤中，通過JavaScript動態生成內容，並插入到頁面中。

template標籤的主要用途有兩個：1）頁面模板的復用。2）減少由於動態添加、刪除元素而造成的迴流重繪。當我們需要添加一些重複的元素，並且需要 JavaScript 動態添加到頁面中時，我們通常需要先創建相應的元素，然後通過 DOM 操作將它們添加到頁面中，這個過程會引起重繪和迴流，從而降低性能。而使用 template 標籤可以避免這種情況的發生，因為它的內容是不會顯示在頁面中的，只有當需要使用的時候才會被取出來使用。因此，它可以提高 JavaScript 動態添加元素的性能。

二、template標籤的基本語法和屬性

template標籤的語法非常簡單，只需要在HTML文檔中添加一個template標籤即可。template標籤可以包含任何的HTML內容，包括標籤和文本，但是這些內容在文檔解析時是不會被顯示的。此外，template標籤還可以添加一些屬性，這些屬性可用於指定模板的一些特性，如是否可以複製、粘貼等。

<template id="myTemplate">
  <div>
    <h3>這是一個模板</h3>
    <p>這裡可以包含任何 HTML 內容</p>
  </div>
</template>

template標籤的常用屬性有以下三個：

• id：用於定義模板的唯一標識符。
• contenteditable：標示模板是否可以被編輯，默認值為 false，表示模板是只讀的。
• data-*：用戶自定義屬性，可以存儲任何數據。

三、template標籤的兼容性問題

template標籤是 HTML5 中新添加的標籤，因此不兼容IE瀏覽器。但是我們可以使用 polyfill 技術來解決這個問題，polyfill（或稱”IE 兼容性庫”）是一些 JavaScript 腳本，它們可以模擬實現一些新特性，從而讓低版本瀏覽器也能支持這些特性。

這裡我們使用一個叫做 “Web Components” 的 polyfill，它是一個獨立的瀏覽器庫，可以在所有主流瀏覽器中使用。使用方法非常簡單：只需要引入它的腳本文件即可：

<script src="//cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.15/webcomponents-lite.min.js"></script>

四、template標籤的應用實例

template標籤的應用實例非常豐富，這裡只列舉常見的幾種應用場景。

4.1 列表數據的渲染

使用 template 標籤可以把常見的列表數據頁變得更加簡單，因為我們只需要定義一份數據模板即可，然後在 JavaScript 中動態地插入數據。下面是一個簡單的示例：

<template id="list">
  <li></li>
</template>

<ul id="myList"></ul>

<script>
  var list = document.querySelector('#list');

  for(var i = 0; i < 10; i++){
    var clone = document.importNode(list.content, true);
    clone.querySelector('li').textContent = i + 1;
    document.querySelector('#myList').appendChild(clone);
  }
</script>

上面的示例中使用了一個 template 標籤來定義一個 li 元素，然後在 JavaScript 中動態添加了 10 個 li 元素到 #myList 中。

4.2 彈框控制項的渲染

使用 template 標籤還可以方便地渲染彈框等控制項，如下面的示例：

<template id="dialog">
  <div id="dialog">
    <header>
      <h3></h3>
    </header>
    <section>
      <p></p>
    </section>
    <footer>
      <button>確定</button>
      <button>取消</button>
    </footer>
  </div>
</template>

<script>
  var dialog = document.querySelector('#dialog');
  var clone = document.importNode(dialog.content, true);

  clone.querySelector('h3').textContent = '提示';
  clone.querySelector('p').textContent = '你確定要刪除這個文件嗎？';
  
  var buttons = clone.querySelectorAll('button');
  buttons[0].addEventListener('click', function(){
    // 確定按鈕
  });
  buttons[1].addEventListener('click', function(){
    // 取消按鈕
  });

  document.body.appendChild(clone);
</script>

上面的示例中定義了一個 dialog 模板，然後通過 JavaScript 動態添加內容和事件監聽器，最後插入到頁面中。

4.3 表單數據的渲染

如果我們有一個表單需要填寫大量信息，那麼可以使用 table 標籤、tr 行和 td 列來布局數據表單，然後通過 template 標籤來定義表格行：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年齡</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="2" align="center">
        <button>確定</button>
        <button>重置</button>
      </td>
    </tr>
  </tfoot>
  <tbody id="myForm"></tbody>
</table>

<template id="row">
  <tr>
    <td></td>
    <td></td>
  </tr>
</template>

<script>
  var row = document.querySelector('#row');
  var tbody = document.querySelector('#myForm');

  for(var i = 0; i < 5; i++){
    var clone = document.importNode(row.content, true);
    clone.querySelector('td:first-child').textContent = '張三' + (i + 1);
    clone.querySelector('td:last-child').innerHTML = '<input type="text" name="age">';
    tbody.appendChild(clone);
  }
</script>

上面的示例中定義了一個 row 模板，然後通過 JavaScript 動態添加表格行和輸入框，最終插入到頁面中。

五、總結

本文針對template標籤的概念、基本語法和應用實例進行了詳細的介紹。使用 template 標籤可以使 HTML 與 JavaScript 更好地分離，提高代碼的可維護性，同時還可以減少迴流和重繪的次數，提高頁面性能。需要注意的是，template 標籤在 IE 瀏覽器中不兼容，需要使用 polyfill 技術來解決這個問題。最後，希望大家可以在實際項目中靈活使用 template 標籤，提高開發效率。