仓库源文，站点原文

title: JavaScript模板引擎原理，几行代码的事儿 categories:

• JavaScript
• 前端杂烩 tags:
• tech
• cnblogs
• 模板引擎 warning: true mark: hot date: 2013-12-03 04:35:00 fromUrl: http://www.cnblogs.com/hustskyking/archive/2013/12/03/principle-of-javascript-template.html from: 博客园

<h3>一、前言</h3>

var tpl = 'Hei, my name is <%name%>, and I\'m <%age%> years old.';

var data = {
    "name": "Barret Lee",
    "age": "20"
};

var result = tplEngine(tpl, data);
//Hei, my name is Barret Lee, and I'm 20 years old.

var tpl = '<% for(var i = 0; i < this.posts.length; i++) {' +　
    'var post = posts[i]; %>' +
    '<% if(!post.expert){ %>' +
        '<span>post is null</span>' +
    '<% } else { %>' +
        '<a href="#"><% post.expert %> at <% post.time %></a>' +
    '<% } %>' +
'<% } %>';

var data = {
    "posts": [{
        "expert": "content 1",
        "time": "yesterday"
    },{
        "expert": "content 2",
        "time": "today"
    },{
        "expert": "content 3",
        "time": "tomorrow"
    },{
        "expert": "",
        "time": "eee"
    }]
};

<a href="#">content 1 at yesterday</a>
<a href="#">content 2 at today</a>
<a href="#">content 3 at tomorrow</a>
<span>post is null</span>

<h3>二、JS模板引擎的实现原理</h3>

var r = [];
r.push('Posts: ' );
r.push(for(var i = 0; i < post.length; i++) {);
r.push('<a href="#">');
r.push(post[i].exper);
r.push('</a>');
r.push(});

var r = [];
r.push('Posts: ' );
for(var i = 0; i < post.length; i++) {
    r.push('<a href="#">');
    r.push(post[i].exper);
    r.push('</a>');
}

var fn = new Function("data",
    "var r = []; for(var i in data){ r.push(data[i]); } return r.join(' ')");
fn({"name": "barretlee", "age": "20"}); // barretlee 20

var reg = /<%([^%>]+)?%>/g;
var tpl = 'Hei, my name is <%name%>, and I\'m <%age%> years old.';
var match = reg.exec(tpl);
console.log(match);

[
    0: "<%name%>",
    1: name,
    index: 16,
    input: "Hei, my name is <%name%>, and I'm <%age%> years old."
    length: 2
]

var reg = /<%([^%>]+)?%>/g;
while(match = reg.exec(tpl)) {
    console.log(match);
}

var tplEngine = function(tpl, data){
    var reg = /<%([^%>]+)?%>/g,
            code = 'var r=[];\n',
            cursor = 0;  //主要的作用是定位代码最后一截
    var add = function(line) {
        code += 'r.push("' + line.replace(/"/g, '\\"') + '");\n';
    };

    while(match = reg.exec(tpl)) {
        add(tpl.slice(cursor, match.index)); //添加非逻辑部分
        add(match[1]);  //添加逻辑部分 match[0] = "<%" +="" match[1]="" "%="">";
        cursor = match.index + match[0].length;
    }

    add(tpl.substr(cursor, tpl.length - cursor)); //代码的最后一截 如:" years old."

    code += 'return r.join("");'; // 返回结果，在这里我们就拿到了装入数组后的代码
    console.log(code);

    return tpl;
};

 var tpl = '<% for(var="" i="0;" <="" this.posts.length;="" i++)="" {'="" +　="" 'var="" post="posts[i];" %="">' +
        '<% if(!post.expert){="" %="">' +
            '<span>post is null</span>' +
        '<% }="" else="" {="" %="">' +
            '<a href="#"><% post.expert="" %=""> at <% post.time="" %=""></%></%></a>' +
        '<% }="" %="">' +
    '<% }="" %="">';
tplEngine(tpl, data);

var r=[];
r.push("");
r.push(" for(var i = 0; i < this.posts.length; i++) {var post = posts[i]; ");
r.push("");
r.push(" if(!post.expert){ ");
r.push("<span>post is null</span>");
r.push(" } else { ");
r.push("<a href="\"#\"">");
r.push(" post.expert ");
r.push(" at ");
r.push(" post.time ");
r.push("</a>");
r.push(" } ");
r.push("");
r.push(" } ");
r.push("");
return r.join("");

regOut = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g;
var add = function(line, js) {
    js? code += line.match(regOut) ? line + '\n' : 'r.push(' + line + ');\n' :
        code += 'r.push("' + line.replace(/"/g, '\\"') + '");\n';
};

return new Function(code).apply(data);

return new Function(code.replace(/[\r\t\n]/g, '')).apply(data);

var tplEngine = function(tpl, data) {
    var reg = /<%([^%>]+)?%>/g,
        regOut = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g,
        code = 'var r=[];\n',
        cursor = 0;

    var add = function(line, js) {
        js? (code += line.match(regOut) ? line + '\n' : 'r.push(' + line + ');\n') :
            (code += line != '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");\n' : '');
        return add;
    }
    while(match = reg.exec(tpl)) {
        add(tpl.slice(cursor, match.index))(match[1], true);
        cursor = match.index + match[0].length;
    }
    add(tpl.substr(cursor, tpl.length - cursor));
    code += 'return r.join("");';
    return new Function(code.replace(/[\r\t\n]/g, '')).apply(data);
};

<h3>三、应用场景</h3>

var barretTpl = function(str, data) {

    //获取元素
    var element = document.getElementById(str);
    if (element) {
        //textarea或input则取value，其它情况取innerHTML
        var html = /^(textarea|input)$/i.test(element.nodeName) ? element.value : element.innerHTML;
        return tplEngine(html, data);
    } else {
        //是模板字符串，则生成一个函数
        //如果直接传入字符串作为模板，则可能变化过多，因此不考虑缓存
        return tplEngine(str, data);
    }
    var tplEngine = function(tpl, data) {
        // content above
    };
};

<h3>四、优化以及功能拓展</h3>