简易JavaScript模板
设计目的：非常单纯，减少JS代码中的字符串拼接，让代码变得更加易读和可维护，尤其是代码已经非常庞大的情况下。
/*
* @description An Easy Template in JavaScript, it is designed to reduce the string concatention work,
* to make the gigantic code more readable and maintainable.
*/
function Template(tmpl,source){
//add all template tasks to this array
this.task = [];
if(tmpl)
this.task.push([tmpl,source]);
}
/*
* @description core function,hanlde two cases: typeof dataSource is either object or array
* when the type of dataSource is array,you'd better confirm that the fields in every object is the same.
*/
Template.format = function(template,dataSource){
//default variable flags
var start = '{', end = '}';
if(dataSource && dataSource.slice && dataSource.length){
var retStr = [], formatted, len = dataSource.length, regMap = {};
//restore the RegExp,avoid to construct them repeatedly.
for(var regKey in dataSource[0]){
regMap[regKey] = new RegExp(start + regKey + end,'g');
}
for(var index in dataSource){
formatted = template;
for(var key in dataSource[index]){
formatted = formatted.replace(regMap[key],String(dataSource[index][key]));
}
retStr.push(formatted);
}
return retStr.join('');
}else{
for(var key in dataSource){
template = template.replace(new RegExp(start + key + end,'g'),String(dataSource[index][key]));
}
return template;
}
};
Template.prototype.add = function(tmpl,source){
//add one template task
this.task.push([tmpl,source]);
};
/*
* @description handle all tasks,and return the final string.
* when this method is invoked,you can reuse the instance.
*/
Template.prototype.end = function(){
var retStr = [];
for(var index in this.task){
retStr.push(Template.format(this.task[index][0],this.task[index][1]));
}
this.task.length = 0;
return retStr.join('');
* @description An Easy Template in JavaScript, it is designed to reduce the string concatention work,
* to make the gigantic code more readable and maintainable.
*/
function Template(tmpl,source){
//add all template tasks to this array
this.task = [];
if(tmpl)
this.task.push([tmpl,source]);
}
/*
* @description core function,hanlde two cases: typeof dataSource is either object or array
* when the type of dataSource is array,you'd better confirm that the fields in every object is the same.
*/
Template.format = function(template,dataSource){
//default variable flags
var start = '{', end = '}';
if(dataSource && dataSource.slice && dataSource.length){
var retStr = [], formatted, len = dataSource.length, regMap = {};
//restore the RegExp,avoid to construct them repeatedly.
for(var regKey in dataSource[0]){
regMap[regKey] = new RegExp(start + regKey + end,'g');
}
for(var index in dataSource){
formatted = template;
for(var key in dataSource[index]){
formatted = formatted.replace(regMap[key],String(dataSource[index][key]));
}
retStr.push(formatted);
}
return retStr.join('');
}else{
for(var key in dataSource){
template = template.replace(new RegExp(start + key + end,'g'),String(dataSource[index][key]));
}
return template;
}
};
Template.prototype.add = function(tmpl,source){
//add one template task
this.task.push([tmpl,source]);
};
/*
* @description handle all tasks,and return the final string.
* when this method is invoked,you can reuse the instance.
*/
Template.prototype.end = function(){
var retStr = [];
for(var index in this.task){
retStr.push(Template.format(this.task[index][0],this.task[index][1]));
}
this.task.length = 0;
return retStr.join('');
};
简单的例子：
<!doctype html>
<html>
<head>
<script src="jTemp.js"></script>
</head>
<body>
<ul id="MenuItems">
<li class="nav"><a href="{href}">{text}</a></li>
</ul>
<script>
var ul = document.getElementById('MenuItems');
var dataSource = [
{text:'首页',href:'http://www.oschina.net/'},
{text:'开源软件',href:'http://www.oschina.net/'},
{text:'讨论区',href:'http://www.oschina.net/'},
{text:'代码分享',href:'http://www.oschina.net/'},
{text:'资讯',href:'http://www.oschina.net/'},
{text:'博客',href:'http://www.oschina.net/'},
{text:'Android',href:'http://www.oschina.net/'}
];
var tmpl = new Template(ul.innerHTML,dataSource);
ul.innerHTML = tmpl.end();
</script>
</body>
<html>
<head>
<script src="jTemp.js"></script>
</head>
<body>
<ul id="MenuItems">
<li class="nav"><a href="{href}">{text}</a></li>
</ul>
<script>
var ul = document.getElementById('MenuItems');
var dataSource = [
{text:'首页',href:'http://www.oschina.net/'},
{text:'开源软件',href:'http://www.oschina.net/'},
{text:'讨论区',href:'http://www.oschina.net/'},
{text:'代码分享',href:'http://www.oschina.net/'},
{text:'资讯',href:'http://www.oschina.net/'},
{text:'博客',href:'http://www.oschina.net/'},
{text:'Android',href:'http://www.oschina.net/'}
];
var tmpl = new Template(ul.innerHTML,dataSource);
ul.innerHTML = tmpl.end();
</script>
</body>
</html>
