構建自己的JavaScript模板小引擎
2
有時候，我們不需要太牛逼太強大的JavaScript模板引擎（比如jQuery tmpl或者handlebarsjs），我們只是需要在簡單的模板里綁定一些非常簡單的字段，本文將使用非常簡單的技巧來幫你實現這個小功能。
首先我們先來定義我們需要的模板，在id為template的script塊里：
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Simple Templating</title>
</head>
<body>
<div class="result"></div>
<script type="template" id="template">
<h2>
<a href="{{href}}">
{{title}}
</a>
</h2>
<img src="{{imgSrc}}" alt="{{title}}">
</script>
</body>
</html>然后，我們需要通過Ajax等其它方式獲取所需要的數據，這里為了展示方便，我們使用了自己定義的數組：
var data = [
{
title: "Knockout應用開發指南",
href: "http://jcodecraeer.com/a/jquery_js_ajaxjishu/2012/0627/281.html",
imgSrc: "http://www.jcodecraeer.com"
},
{
title: "微軟ASP.NET站點部署指南",
href: "http://jcodecraeer.com/a/jquery_js_ajaxjishu/2012/0627/281.html",
imgSrc:"http://www.jcodecraeer.com"
},
{
title: "HTML5學習筆記簡明版",
href: "http://jcodecraeer.com/a/jquery_js_ajaxjishu/2012/0627/281.html",
imgSrc: "http://www.jcodecraeer.com"
}
],
我們有2種方式來綁定這些數據到模板上，第一種是非常簡單的hardcode方法，第二種是自動識別變量式的。
我們先來看第一種方式，是通過替換花括號里的值為data里所對應的值來達到目的：
template = document.querySelector('#template').innerHTML,
result = document.querySelector('.result'),
i = 0, len = data.length,
fragment = '';
for ( ; i < len; i++ ) {
fragment += template
.replace( /\{\{title\}\}/, data[i].title )
.replace( /\{\{href\}\}/, data[i].href )
.replace( /\{\{imgSrc\}\}/, data[i].imgSrc );
}
result.innerHTML = fragment;第二種方式比較靈活，是通過正則表達式來替換所有花括號的值，而無需一個一個替換，這樣相對來說比較靈活，但是要注意模板標簽可能在數據里不存在的情況：
template = document.querySelector('#template').innerHTML,
result = document.querySelector('.result'),
attachTemplateToData;
// 將模板和數據作為參數，通過數據里所有的項將值替換到模板的標簽上（注意不是遍歷模板標簽，因為標簽可能不在數據里存在）。
attachTemplateToData = function(template, data) {
var i = 0,
len = data.length,
fragment = '';
// 遍歷數據集合里的每一個項，做相應的替換
function replace(obj) {
var t, key, reg;
//遍歷該數據項下所有的屬性，將該屬性作為key值來查找標簽，然后替換
for (key in obj) {
reg = new RegExp('{{' + key + '}}', 'ig');
t = (t || template).replace(reg, obj[key]);
}
return t;
}
for (; i < len; i++) {
fragment += replace(data[i]);
}
return fragment;
};
result.innerHTML = attachTemplateToData(template, data); 這樣，我們就可以做到，無限制定義自己的標簽和item屬性了，而無需修改JS代碼。http://jcodecraeer.com/a/jquery_js_ajaxjishu/2012/0627/281.html
jianghejie
13年前提問