这JS模板实在是太轻量了，只是个简单替换，只因为我太不喜欢不同语言的东东相互拼接。
昨天偶然看一"blog"上个有轻量的JS模板，作者的目的也是为了实现HTML代码与JS代码的分离,使得在用JS输出HTML时更方便,代码更清晰。有兴趣的可去看看 《Tempo.js : 轻量的JS模板工具类》。
刚好我现做的项目有大量的HTML与JS的拼接，但作者的实现有对不适合我的代码风格，我做了些修改就运用到我的项目里，也把我修改后的代码放出来吧！写成这种形式是为了更方便的嵌入到我的项目中来，而且我也没用到更复杂的功能，最最简单的替换就够了，就像Tempo.js的作者想法：为了实现HTML代码与JS代码的分离,使得在用JS输出HTML时更方便,代码更清晰。
var Obj = {
yyTemp: function(id, data, def){
var dom = document.getElementById(id);
var parseObj = dom[id] || (dom[id] = (function(html){
html = html.replace(/([\'|\\])/gm,"\\$1") //转义掉 \ 和 '
.replace(new RegExp('{([^{}]*)}','gim'), "'+(typeof data[\"$1\"] != 'undefined'?data[\"$1\"]:'')+'") //转化为包括变量的字符串
.replace(/[\n\r]/gm,''); //去除回车换行
html = ["return '", html ,"';"].join('');
console.log( html );
return new Function('data',html);
})(dom.innerHTML));
if(data.length){
for(var i=0,ar; ar=data[i]; i++){
data[i] = parseObj(ar);
}
}else data[0] = def || '';
dom.innerHTML = data.join('');
}
};
使用方法更简单，模板这样写就可以了：
<ul id="asins">
<li class="{class}">{title}</li>
</ul>
简单的使用：
var arr = [
{title:'再简单不过的JS模板系统','class':'c'},
{title:'也就一点点功能','class':'cl'},
{title:'够用就好，呵呵','class':'cls'},
];
Obj.setTemp('asins', arr, '<li>Null</li>');
我这里加了个默认值，虽然以这种方式写默认值不太喜欢，但也没想到更简单合理的方式。
更重要的一点改进是HTML中不用另外写个模板标签，要生成的代码就是模板所在的位置，更不用另外每次指定了。
如果不希望在HTML加载时看到模板代码，可以进行些改进：
模板改成这样：
<ul id="asins">
<li style="display:none;" class="{class}">{title}</li>
</ul>
JS代码也改一点点就可以了，注意粗体部分：
这JS模板实在是太轻量了，只是个简单替换，只因为我太不喜欢不同语言的东东相互拼接。
昨天偶然看一"blog"上个有轻量的JS模板，作者的目的也是为了实现HTML代码与JS代码的分离,使得在用JS输出HTML时更方便,代码更清晰。有兴趣的可去看看 《Tempo.js : 轻量的JS模板工具类》。
刚好我现做的项目有大量的HTML与JS的拼接，但作者的实现有对不适合我的代码风格，我做了些修改就运用到我的项目里，也把我修改后的代码放出来吧！写成这种形式是为了更方便的嵌入到我的项目中来，而且我也没用到更复杂的功能，最最简单的替换就够了，就像Tempo.js的作者想法：为了实现HTML代码与JS代码的分离,使得在用JS输出HTML时更方便,代码更清晰。
var Obj = {
yyTemp: function(id, data, def){
var dom = document.getElementById(id);
var parseObj = dom[id] || (dom[id] = (function(html){
html = html.replace(/([\'|\\])/gm,"\\$1") //转义掉 \ 和 '
.replace(/ style="display: ?none;?"/i,'') //去除隐藏
.replace(new RegExp('{([^{}]*)}','gim'), "'+(typeof data[\"$1\"] != 'undefined'?data[\"$1\"]:'')+'") //转化为包括变量的字符串
.replace(/[\n\r]/gm,''); //去除回车换行
html = ["return '", html ,"';"].join('');
console.log( html );
return new Function('data',html);
})(dom.innerHTML));
if(data.length){
for(var i=0,ar; ar=data[i]; i++){
data[i] = parseObj(ar);
}
}else data[0] = def || '';
dom.innerHTML = data.join('');
}
};
之所以写成这样是因为各浏览器对HTML代码渲染后的结果不一样！FF chrome Opera IE8 IE6下都没有问题。
在性能上比你的这种方式平均慢上10ms左右吧！还能接受，这种方式最主要是不用写多条语句实现目的，另外我对给出的数据加了个简单的判断，如果没有给出会留空而不像你的这种会在HTML中出现undefined字符。猛点这里查看Demo
