js模板引擎1--制定规则

本系列文章是学习art-template和template.js的总结。

js模板引擎的用法大致如下：

1. 模板

<ul id="list"></ul>
<script id="test" type="text/template">
    <% for(var i = 0; i < list.length; i++) { %>
        <li><%=list[i].title %></li>
    <% } %>
</script>

2. js代码

var data = {
    list: [
        {title: 'One'},
        {title: 'Two'},
        {title: 'Three'}
    ]
};
var listHtml = template('test',data);
document.getElementById('list').innerHTML = listHtml;

上面例子中的

<% for(var i = 0; i < list.length; i++) { %>
    <%=list[i].title %>
<% } %>

就是模板语法规则。

约定：

• 变量渲染使用 <%=变量名称%> 语法；
• 条件判断使用 <% if(expr) { %> <% } %>js语法；
• 列表渲染使用 <% for(var i = 0; i < expr; i++) { %> <% } %> js语法；
• 模板注释使用 <%# %>;

观察模板字符串，以及经过模板引擎处理后输出的结果，可以发现如下规律：

1. 模板字符串中的html标签被原封不动的输出了；
2. 模板语法语句被当做js代码执行了；

鉴于此，模板引擎需要完成一下工作：

1. 识别出模板字符串中的非语法规则部分，标记为字符串；
2. 识别出模板字符串中的语法规则部分，转换为js代码；
3. 将前两步得到的结果拼接为可执行的js代码，并注入模板数据；

在制定模板语法规则时，使用了特殊字符标记了语法规则部分，所以使用正则表达式就能很容易地找到模板字符串中的语法规则部分和非语法规则部分。

语法规则部分本来使用的就是js的语法，可以直接作为js代码使用。

关键是最终如何构造可执行的js代码和模板数据的绑定。

下面我们开始一步步的实现一个js模板引擎，来看一看其中的奥秘。