简易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('');

};

简单的例子：

<!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>