利用模板将HTML从JavaScript中抽离

利用模板将HTML从JavaScript中抽离

一、当需要注入大段的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');