只有10几行的js模板引擎

只有10几行的js模板引擎，其实算不上啥js模板引擎，就是一段js模板替换功能的代码而已。

下面我们来实战一下，看看这个js模板替换能干点啥。

说明：如果再项目中使用js模板替换的地方不是非常多，这段代码完全可以应付了。如果是超大规模的模板替换，建议使用dot.js等NB的模板引擎， dot.js教程文档api

下面是一个实例实战代码，只有10几行的js模板引擎具体详情请查看演示，或者下载查看。
<ul id="test"></ul>
<script>

    //实战应用如下：
    var tpl = '<li><a>${title}</a>/<a>${sex}</a>/<a>${age}</a></li>',
        data = [{"title":"林志玲","sex":"女","age":"26"},{"title":"高圆圆","sex":"女","age":"24"},{"title":"柳岩","sex":"女","age":"26"}];
    var temp=[];
    for(var i=0;i<data.length;i++){
        temp.push( htmlTemplate(tpl,data[i]) );
    }
    document.getElementById("test").innerHTML = temp.join("");

    /*
    * template中的占位符使用如：${title} data是一个js对象如：{"title":"张三","sex":"男","age":"26"}  懒人建站http://www.51xuediannao.com/
    */
    function htmlTemplate(template, data, allowEmpty, chats) {
        var regExp;
        chats = chats || ['\$\{', '\}'];
        regExp = [chats[0], '([_\w]+[\w\d_]?)', chats[1]].join('');
        regExp = new RegExp(regExp, 'g');
        return template.replace(regExp,
            function (s, s1) {
                if (data[s1] != null && data[s1] != undefined) {
                    return data[s1];
                } else {
                    return allowEmpty ? '' : s;
                }
            });
    }
</script>