javascript模板引擎的概述

一、什么是模板引擎，简单地说，就是一个字符串中有几个变量待定。比如：

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.

其实它就是一个预处理器（preprocessor）。

JS模板引擎应该做哪些事情？看看下面一串代码：

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>