html++菜单抽离,利用模板将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

});

}

模板文本存放位置

1.存放于HTML注释中

...

因为注释也是一个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属性的

%s

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*/,''); //去除模板文本的前导空格(因为它是在

mylist.appendChild(div.firstChild);

}

使用第三方的模板系统(如：artTemplate-3.0、Jade、Handlebars、doT.js)

以Handlebars为例：

Handlebars建议将模板存放于

{{#if items}}

{{#each items}}

{{text}}

{{/each}}

{{/if}}

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》