利用模板將HTML從JavaScript中抽離

蘇福發表於2019-02-16
HTMLJavaScript

一、當需要注入大段的HTML標籤到頁面中時，應該使用伺服器渲染（從伺服器載入HTML標籤）

該方法將模板放置於伺服器中使用XMLHttpRequest物件來獲取外部標籤（如多頁應用）

function loadDialog(name, oncomplete) {
    var xhr = new XMLHttpRequest();
    xhr.open(`get`, `/js/dialog/`+name, true);
    xhr.onreadystatechange = function () {
        if(xhr.readyState == 4 && xhr.status == 200){
            var div = document.getElementById(`dlg-holder`);
            div.innerHTML = xhr.responseText;
            oncomplete();
        }else {
            //錯誤處理程式碼
        }
    };
    xhr.send(null);
}
//使用YUI的API
function loadDialog(name, oncomplete) {
    Y.one(`#dlg-holder`).log(`/js/dialog/`+name,oncomplete);
}
//使用JQuery的API
function loadDialog(name, oncomplete) {
    $(`#dlg-holder`).load(`/js/dialog/`+name, oncomplete);
}

二、客戶端模板

對於少量的標籤段，應該考慮採用客戶端模板。
客戶端模板是一些帶‘插槽’(佔位符)的標籤片段，這些佔位符會被JavaScript程式(模板引擎)替換為資料，然後把該替換好的標籤片段插入到頁面中。

JavaScript程式(模板引擎)

自定義模板文字處理程式

function sprintf(text){
    var i=1,args=arguments;
    return text.replace(/%s/g, function(){
        return (i<args.length) ? args[i++] : ``;
   });
}

模板文字存放位置

1.存放於HTML註釋中

<ul id = `mylist`><!--<li id=`item%s`><a href=`%s`>%s</a></li>-->
    ...
</ul>

因為註釋也是一個DOM節點，因此可以通過JS將其提取出來：

//格式化並插入DOM的方法定義
function addItem(url,text){
   var mylist = document.getElementById(`mylist`);
   var templateText = mylist.firstChild.nodeValue; //提取模板文字
   var result = sprintf(templateText,url,text);
   div.innerHTML = result;
   mylist.insertAdjacentHTML(`beforeend`, result);
}
//呼叫方法
addItem(`/item/4`, `First item`);
addItem(`/item/4`, `Second item`);

2.存放於自定義type屬性的<script>標籤內

<script type=`text/x-my-template` id=`list-item`>
    <li><a href=`%s`>%s</a></li>
</script>
function addItem(url,text){
   var mylist = document.getElementById(`mylist`);
   var script = document.getElementById(`list-item`);
   var templateText = script.text; //提取模板文字
   var result = sprintf(templateText,url,text);
   var div = document.createElement(`div`);
   div.innerHTML = result.replace(/^s*/,``); //去除模板文字的前導空格(因為它是在<script>標籤的下一行)
   mylist.appendChild(div.firstChild);
}

使用第三方的模板系統（如：artTemplate-3.0、Jade、Handlebars、doT.js）

以Handlebars為例：
Handlebars建議將模板存放於<script>標籤內

<script type=`text/x-handlebars-template` id=`list-item`>
    {{#if items}}
    <ul id=`mylist`>
        {{#each items}}
           <li><a href=`{{url}}`>{{text}}</a></li>
        {{/each}}
    </ul>
    {{/if}}
</script>
funtion addItem(url,text){
    var  mylist = document.getElementById(`mylist`),
           script = document.getElementById(`list-item`),
           template = Handlebars.compile(script.text), //提取模板文字,返回格式化方法
           div = document.createElement(`div`),
           result;

    result = template({text:text,url:url});
    div.innerHTML = result;
    mylist.appendChild(div.firstChild);
}
//呼叫
addItem(`/item/4,`First item`);

本文參考《編寫可維護的JavaScript》

相關文章