十行代码实现的一个js模板引擎

发表于 | 分类于 |

心血来潮，来写一个模板引擎吧！

功能就不多说了

实现思路

从最简单的开始吧

假设一个模板长这样

<h1><% var world = 'world!'; %> hello <%= world %></h1>

模板转化后应该到这样的: 

1
2
3
4
5
6
// 假设输出的结果存放在变量p中
p += '<h1>';
var world = 'world!';
p += ' hello ';
p += world;
p += '</h1>';

总结一下这个过程，其实就只有三条规则:

  1. %>...<% 转换为 %>p += '...';<%, 起始和结束同此, 将内容直接作为输出
  2. <%...%> 转换为 ...;, 逻辑处理, 直接执行
  3. <%=...%> 转换为 p += (...);, 将运算结果作为输出

实现

实现就很简单了把上面的规则写成代码，

1
2
3
4
tpl.replace(/(\s)+/g, " ") // 主要是为了处理换行
    .replace(/(\%\>|^)(.+?)(\<\%|$)/g, "$1p += '$2';$3")
    .replace(/\<\%([^=](.(?!\<\%))+)\%\>/g, "$1;")
    .replace(/\<\%\=((.(?!\<\%))+)\%\>/g, "p += ($1);")

然后包装一下

1
2
3
4
5
6
7
8
function render (tpl) {
    return new Function("data", "var p = ''; with(data){" +
        tpl.replace(/(\s)+/g, " ")
            .replace(/(\%\>|^)(.+?)(\<\%|$)/g, "$1p += '$2';$3")
            .replace(/\<\%([^=](.(?!\<\%))+)\%\>/g, "$1;")
            .replace(/\<\%\=((.(?!\<\%))+)\%\>/g, "p += ($1);") +
        "} return p; ");
}

完成！

测试

1
2
3
4
5
6
7
8
9
// 模板
var tpl = `<ul>
    <% for (var i = 0; i < list.length; i++) { %>
        <li><%= list[i] %></li>
    <% } %>
 </ul>`;
var renderFn = render(tpl);    // 获取渲染函数
var renderResult = renderFn({list:["a", "b", "c", "d"]});     // 渲染结果
// <ul>  <li>a</li>  <li>b</li>  <li>c</li>  <li>d</li>  </ul>

大功告成

当然中间还是遇到了很多问题，不过最终的结果还是非常好的，这个轮子项目已经放在github仓库