JS模板引擎：基于字符串拼接

目的

编写一个基于字符串拼接的js模板引擎雏形，这里并不会提供任何模板与数据的绑定。

基本原理

Javascript中创建函数的方式有多种，包括：

1. var func = function () {...}

2. function func () {...}

3. var func = new Function (...);

其中new Function的方法给到了我们很大的自由度，比如：

var func = new Function('a', 'b', 'return a+b;'); func(1, 2); // 输出： 3

这样我们就可以通过字符串来创建函数。

如果我们有模板：

<div>
{{data.name}}
</div>

那么我们希望它达成的作用是：

function func (data) {
   return '<div>'+data.name+'</div>';
}

为了让这个转换变得更简单，我们实际上将得到的是：

function func (data) {
    var arr = [];    // 注意一下这一段， 与模板进行对比
    arr.push('<div>');
    arr.push(data.name);
    arr.push('</div>');
    return arr.join('');
}

接下来我们的目标就很明确了：

我们要利用new Function的方式，完成模板到目标函数之间的转换。

使用变量

观察目标函数与模板的区别，总结之后我们得到了如下的代码

function Templer (str) {
  return new Function ('data',
    'var arr = []; arr.push("'
      +str.replace(/[\r\t\n]/g, ' ') // 在代码中去掉换行符
        .replace(/{{/g, '");arr.push(') // 替换变量的开始部分
        .replace(/}}/g, ');arr.push("') // 替换变量的结尾部分
      +'");return arr.join("");'
    );
}

于是我们可以这样使用：

var func = Templer('<div>{{data.name}}</div>');
/* 输出：
function anonymous(data) {
var arr = []; arr.push("<div>");arr.push(data.name);arr.push("</div>");return arr.join("");
}
*/
func({name: '笨笨'});
// 输出："<div>笨笨</div>"

模板中的逻辑

虽然我们完成了最基本的变量替换，但显然功能还过于单一。接下来我们来做第二步：在模板中嵌入逻辑（js代码）。

由于我们所做的就是将模板处理成正确的js代码再使用new Function来生成函数，因此将js代码嵌入到我们的模板引擎中也显得非常轻松自然。

观察比较一下模板和目标函数：

function func (data) {
  var arr = [];
  arr.push("<div>");
  // for的逻辑
  for  (var i=0; i<data.items.length;i++) {
    arr.push("<div>");
    arr.push(data.items[i].name);
    arr.push("</div>");
  }
  arr.push("</div>");
  return arr.join('');
}

<div>
{% for (var i=0; i<data.items.length;i++) { %}
<div>{{data.items[i].name}}</div>
{% } %}
</div>

得到以下的结果：

function Templer (str) {
  return new Function ('data',
    'var arr = []; arr.push("'
      +str.replace(/[\r\t\n]/g, ' ') // 在代码中去掉换行符
        .replace(/{{/g, '");arr.push(') // 替换变量的开始部分
        .replace(/}}/g, ');arr.push("') // 替换变量的结尾部分
        .replace(/{% (.+?) %}/g, '");$1arr.push("') // 替换js部分
      +'");return arr.join("");'
    );
}

*注：使用数组拼接的方式是由于早期的js中数组拼接的效率要优于字符串拼接，因此我们也可以这样来实现模板：

function Templer (str) {
  return new Function ('data',
    'var str =""; str += "'
      +str.replace(/[\r\t\n]/g, ' ') // 在代码中去掉换行符
        .replace(/{{/g, '";str += ') // 替换变量的开始部分
        .replace(/}}/g, ';str += "') // 替换变量的结尾部分
        .replace(/{% (.+?) %}/g, '";$1 str += "') // 替换js部分
      +'";return str;'
    );
}

测试一下：

var func = Templer(tplStr);
/* tplStr:
<div>{{data.name}}</div>
<div>家庭成员</div>
{% for (var i=0, member; member = data.members[i], member; i++) { %}
    <div>{{i+1}}-名称：{{member}}</div>
{% } %}
*/
func(({name: '笨笨', members: ['宝宝','小宝宝','小笨笨','笨笨']}));

模板的扩展

最后我们来做一些扩展，包括引入 for ... in ...的语法和include

直接上代码：

(function (g) {
    function Templer(name, tpl) {
        if (!Templer._cached[name]) { // 用name保存建立过的模板函数
            Templer._cached[name] = new Function('data', 'var arr = []; (function (d) { arr.push("'
                + tpl
                    .replace(lineBreakRegex, lineBreakReplace) // 替换换行符
                    .replace(jsRegex, jsReplace) // 替换js
                    .replace(variableStartRegex, variableStartReplace) // 替换变量起始
                    .replace(variableEndRegex, variableEndReplace) // 替换变量终止
                +'");})(data); return arr.join("");');
        }
        return Templer._cached[name];
    }
    Templer._cached = {};
    var variableStartRegex = /{{/g,
        variableStartReplace = '");arr.push(',
        variableEndRegex = /}}/g,
        variableEndReplace = ');arr.push("',
        lineBreakRegex = /[\r\t\n]/g,
        lineBreakReplace = ' ',
        jsRegex = /{% (.+?) %}/g,
        jsReplace = function () {
            var str = arguments[1], stop = false;
            // 开始处理特殊格式
            if (str === 'end') {
                stop = true;
                str = '}';
            }));
            // 处理 for item in items 的逻辑，替换为可执行的代码
            stop || (str = str.replace(startForRegex, function () {
                stop = true;
                var a = arguments[1],
                    b = arguments[2],
                    i = nextVar();
                return 'for (var '+i+' = 0, '+a+'; '+a+' = '+b+'['+i+']; '+i+'++) {';
            }));
            // 处理 include 的格式，通过调用Templer(tId)的形式替换
            stop || (str = str.replace(includeRegex, function () {
                stop = true;
                var tplName = arguments[1];
                return 'arr.push(Templer("'+tplName+'")(d));';
            }));
            // 结束处理特殊格式
            return '");'+str+'arr.push("';
        },
        startForRegex = /^for (.+?) in (.+?)$/g,
        includeRegex = /^include (.+?)$/g,
        nextId = 0,
        nextVar = function () {
            return '_' + (nextId++).toString(36);
        };

    window.Templer = Templer;
})(window);

测试一下：

<div id="div1"></div><script type="text/template" id="tpl2">
    <h4>Pets:</h4>
    <ol>
    {% for pet in d.pets %}
        <li><span>{{pet.name}}</span>
        <ul>
        {% for food in pet.food %}
            {% if (food === 'banana') { %}
            <li>balala~</li>
            {% } else { %}
            <li>{{food}}</li>
            {% } %}
        {% end %}
        </ul>
        </li>
    {% end %}
    </ol>
</script>
<script type="text/template" id="tpl1">
    <p>{{d.name}} - {{d.info.age}}</p>
    {% if (d.info.age > 20) { %}
    <div>age is 20+</div>
    {% } else { %}
    <div>age is 20-</div>
    {% } %}
    <p>
        {% include tpl2 %}
    </div>
</script>
<script type="text/javascript" src="templer.js"></script>
<script type="text/javascript">
    Templer('tpl2', document.getElementById('tpl2').innerHTML);
    document.getElementById('div1').innerHTML = Templer('tpl1', document.getElementById('tpl1').innerHTML)({
        name: 'Miao',
        info: {age: 27},
        pets: [{
            name: 'Meow',
            food: ['apple', 'banana']
        }, {
            name: 'Doge',
            food: ['apple', 'banana']
        }]
    });
</script>

总之就是正则+替换，这里只是提供一个思路和雏形，知道了基本的做法其他的只要发挥想象就行了。

预编译

既然我们是将模板字符串处理成new Function要使用的函数体字符串，我们就可以利用node或其他工具将模板预编译成js文件中的函数，免去即时编译的耗费。

// 模板引擎的做法
new Function ('data', 函数体);

// 预编译到js文件中
Template[tplName] = function (data) {
     函数体
}

小结

通过使用正则替换处理模板字符串来得到new Function的函数体，从而将模板转换为模板函数。由于只是基于字符串的处理和拼接，因此这样的引擎在web端和server端都是可用的，当然这种方式也不会提供任何数据绑定的功能。

扩展：ES6的Template String

ES6中定义了Template String的规范，在语言/浏览器层面支持了基于字符串的Template。

通过Template String我们可以进行变量替换：

var a = 10;
var b = 5;
console.log(`${a} + ${b} = ${a+b}`);

当然也可以使用函数：

function getName() { return "benben"; }
console.log(`大家好，我是${getName().toUpperCase()}~`);

以及可以换行：

console.log(`大家好，
我是笨笨`);

还有tagged templates，相当于调用一个函数来处理模板：

fn`Hello ${you}! You're looking ${adjective} today!`

function fn (arr, ...tokens) {
    //
}

/*
相当于调用：
fn(["Hello ", "! You're looking ", " today!"], you, adjective);
*/