用javascript写一个高速的前端模板引擎

js

前端模板引擎出现在很早以前，最早接触它是在jquery插件里面，能省不少代码进行html的生成，for循环加字符串拼毕竟太丑陋，当时并没有感觉这个东西有啥大的作用。

前端模板引擎和后台的jsp，asp实现的原理差不多，最终都是生成一个html格式的字符串，只不多后台用的是java，前端用的是js，后台的java可以在jvm的环境里做所有服务器能做的事情，读取数据库等等，而前端js只能通过ajax和jsonp获取数据。区别在于后台模板引擎生成的内容只能一次性全部生成发送给浏览器，而前端模板可以通过接口分次加载，可以很灵活的减少首屏的内容大小，从而加快首屏展示速度。

在脱离组件化思想的情况下用模板引擎主要的作用是前后端分离开发，加快首屏展示的速度，但是庞大的模板文件和调试的困难让人头痛,而且性能上也不近人如意，后台对象序列化和前端字符串拼接消耗的性能还是比较可观的。但是如果组件化和mvc框架给前端开发带来的好处已经胜过这种损耗，前端模板引擎在其中扮演者比较重要的作用，如何实现一个前端模板引擎也许是很多前端新手非常希望了解的，下面就从零开始，从头实现一前端模板引擎，现在都讲究极致，那就谈谈如何加快模板引擎生成html的速度。

咱们取个名字，就叫stpl模板引擎，就用最经典的ejs语法定义模板吧

<scirpt type='tpl' id='tpl'>
    <ul>
        <% for(var i=0; i < list.length; i++){%>
            <li><%=list[i]%></li>
        <% } %>
    </ul>
</script>

大概是这样使用的

var data = ['template','mastash','artTemplte']
var tpl = document.getElementById('tpl').innerHtml;
var html = stpl(tpl, data);
document.body.innerHtml = html;

在chrome的V8引擎下，字符串拼接的速度非常快
下面实现我们的模板引擎，主要用的的js的api就是new Function([参数名称],[函数内容])

function stpl(tpl, data) {
  var fn = function(d) {
    var i,
      k = [],
      v = [];
    for (i in d) {
      k.push(i);
      v.push(d[i]);
    }
    return (new Function(k, fn.$)).apply(d, v);
  };
  if (!fn.$) {
    fn.$ = 'var $=""\n';
    //先把特殊字符转义或者去处
    var tpls = tpl.replace(/[\r\t\n]/g, " ").replace(/\'/g, "\\\'").replace(/\s+/g, ' ').split('%>'),
      i = 0;
    //构建函数体
    while (i < tpls.length) {
      var p = tpls[i];
      var x = p.indexOf('<%');
      if (p[x + 2] == '=') {
        //<%=..%>
        fn.$ += "$+='" + p.substr(0, x) + "'\n";
        fn.$ += "$+=" + p.substr(x + 3) + "\n";
      } else if (x >= 0) {
        //<% %>
        fn.$ += "$+='" + p.substr(0, x) + "'\n";
        fn.$ += p.substr(x + 2) + "\n";
      } else {
        //html
        fn.$ += "$+='" + p + "'\n";
      }
      i++;
    }
    fn.$ += "return $";
  }
  return data ? fn(data) : fn;
}
module.exports = stpl;

嗯，上面的代码逻辑很清楚了,我们使用AMD封装

    var stpl = reqire('stpl.js')

这个引擎的速度已经比较快了,加速的主要方式是减小函数体里函数的计算量，我们只进行了一次切分和n次查找切分字符串，不传入数据可获取预编译的function,计算的复杂度

改进

还有一个加速的地方是，我们每次使用，都要重新new一个Function对象，这样很消耗性能，但是在调用前我们并不知道有什么参数，可以使用这样一个技巧

<scirpt type='tpl' id='tpl'>
    <ul>
        <% for(var i=0; i < it.list.length; i++){%>
            <li><%=it.list[i]%></li>
        <% } %>
    </ul>
</script>

我们固定一个参数it,模板所有参数都传给it，这样就是影响模板的写法，这样生成的funciton就可以重复使用了。

var render = stpl(tpl);
var html = render({list:data}))

性能比较-Function重复生成

性能处于中等偏上的位置，总体来说还是ok的，因为测试用例是10000次渲染，我们可以消除这个影响。

修改fn方法：

var fn = function(d) {
    // 输入参数固定位一个参数，名称为it
    return new Function(['it'], fn.$);
};

模板新写法，所有输入的数据均传入it对象

<script id="stpl" type="text/tmpl">
<ul>
    <% for (i = 0, l = it.list.length; i < l; i ++) { %>
        <li>用户: <%=it.list[i].user%>/ 网站：<%=it.list[i].site%></li>
    <% } %>
</ul>
</script>

性能比较-Function复用

性能已经超过最快的模板引擎，咱们因为功能单一，所以能快那么一点点

测试脚本

var testList = [
     {
        name: 'stpl',
        tester: function () {
            var source = document.getElementById('stpl').innerHTML;
            var fn = stpl(source);
            for (var i = 0; i < number; i ++) {
                fn(data);
            }
        }
    }
]

示例

总结

1. 模板引擎现在总要分两种，string-based，和dom-based；
2. dom-based，如angular和Vue的模板和string-based的区别主要是更新的时候他们直接修改dom而不是直接使用innterHtml替换，但是在初始的时候依然无法逃过字符串拼接html文本，其实前端模板引擎拼速度完全没有作用，但是如果使用nodejs进行后端渲染的时候这个意义就非常大的，所以对于这块的理解在nodejs开发中也是很有作用的