应用模板将HTML从JavaScript中抽离

2024年3月6日 194次阅读 来源: 苏福

一、当须要注入大段的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》

    原文作者：苏福
    原文地址: https://segmentfault.com/a/1190000007045765
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞