利用模板將HTML從JavaScript中抽離

1、當須要注入大段的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);
}

2、客戶端模板

對於少許的標籤段，應該考慮採用客戶端模板。
客戶端模板是一些帶‘插槽’(佔位符)的標籤片斷，這些佔位符會被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》