沙漠之鹰和战术匕首－－两款前端极简模板引擎

1 var str = "<div>我是一个{name}</div>";
2 var data = {name:"测试用例"};
3 var ret = str.replace(/\{(\w+)\}/g, function(match, index) {
4     return data[index] || match;
5 });
6 console.log(ret)

(function($, undefined) {
    //测试浏览器是否支持正则表达式预编译
    var baseReg = /\{([\w\.]+)\}/g, numReg = /^\d+$/,
        //预编译核心的正则表达式，以提高正则匹配效率
        formatReg = baseReg.compile ? baseReg.compile(baseReg.source, "g") || baseReg : baseReg,
        //其他工具函数
        toString = Object.prototype.toString, slice = Array.prototype.slice;
    //对外接口
    $.format = function(string, source){
        if( source === undefined || source === null )return string;
        var isArray = true, type = toString.call(source),
            //检测数据源
            data = type === "[object Object]" ? (isArray = false, source) : type === "[object Array]" ? source : slice.call(arguments, 1),
            N = isArray ? data.length : 0;
        //执行替换
        return String(string).replace(formatReg, function(match, index) {
            var isNumber = numReg.test(index), n, fnPath, val;
            if( isNumber && isArray ){
                n = parseInt(index, 10);
                return n < N ? data[n] : match;
            }else{ //数据源为对象，则遍历逐级查找数据
                fnPath = index.split(".");
                val = data;
                for(var i=0; i<fnPath.length; i++)
                    val = val[fnPath[i]];
                return val === undefined ? match : val;
            }
        });
    };
})(window.jQuery || window.Zepto || window);

//模板内置到js中
var tmpl = ['<div>',
    '这里是一个{name}',
    '这里是其他元素',
'</div>'].join("");
var ret = $.format(tmpl, data);

//从页面元素中获取模板
var tmpl = $("#tmpl")[0].innerHTML;
var ret = $.format(tmpl, data);

(function($) {
    var tmplCache={}, fnCache={}, guid=0, toString = Object.prototype.toString, compile = function( tmpl, sp ){
        //默认分隔符
        var f = sp || "%",
            //动态创建函数，并增加数据源引用（data/my）
            fn = new Function("var p=[],my=this,data=my,print=function(){p.push.apply(p,arguments);};p.push('" +
                // Convert the template into pure JavaScript
                tmpl
                .replace(/[\r\t\n]/g, " ")
                .split("<" + f).join("\t")
                .replace(new RegExp("((^|" + f + ">)[^\\t]*)'", "g"), "$1\r")
                .replace(new RegExp("\\t=(.*?)" + f + ">", "g"), "',$1,'")
                .split("\t").join("');")
                .split(f + ">").join("p.push('")
                .split("\r").join("\\'") + "');return p.join('');");
        return fn;
    };
    //对外接口
    $.template = function(tmpl, data, sp) {
        sp = sp||"%";
        var fn = toString.call(tmpl) === "[object Function]" ? tmpl
                : !/\W/.test(tmpl) ? fnCache[tmpl+sp] = fnCache[tmpl+sp] || compile(document.getElementById(tmpl).innerHTML, sp)
                : (function(){
                    for(var id in tmplCache)if( tmplCache[id] === tmpl ) return fnCache[id];
                    return (tmplCache[++guid] = tmpl, fnCache[guid] = compile(tmpl, sp));
                })();
        return data ? fn.call(data) : fn;
    };
})(window.jQuery || window.Zepto || window);

//模板内置到js中
var templ = "this is a <%=my.type%> <%=data.name%> too.";
var ret = $.template(templ, {name:"demo", type:"easy"});

//从页面id元素中获取模板
var ret = $.template("tmpl", {name:"demo", type:"easy"});

<ul>
    {{ for (var val, i = 0, l = it.list.length; i < l; i ++) { }}
        {{ val = it.list; }}
        <li>用户: {{=val[i].user}}/ 网站：{{=val[i].site}}</li>
    {{ } }}
</ul>