模板预编译技术

介绍

预编译 的使用场景在于，一些文本转换或格式化，通常模板固定，数据动态变化的情况。通过预编译技术，将重复使用的模板预先编译，避免了实时编译转换，以达到提升性能的目的。

下文将介绍 预编译技术 的相关知识：

• 内部原理

• 简单实现

• 相关实践

内部原理

预编译的结果，得到的是对模板进行词法分析而得到的一系列标记 (tokens)。对数据进行渲染 （执行 render 函数）时，其实是通过遍历 tokens 再组合数据，生成结果。
即：

• Compile: template => tokens

• Render: tokens + data => result string

简单实现

function parse(templ) {
  var tokens = [];
  var maxTime = Date.now() + 10;
  while (templ) {
    if (templ.indexOf("{") === 0) {
      var index = templ.indexOf("}");
      tokens.push({
        type: "variable",
        name: templ.slice(1, index)
      });
      templ = templ.substring(index + 1);
      continue;
    }
    var index = templ.indexOf("{");
    var text = index < 0 ? templ : templ.substring(0, index);
    templ = index < 0 ? "" : templ.substring(index);
    tokens.push({
      type: "text",
      value: text
    });
    if (Date.now() >= maxTime) break;
  }
  return tokens;
}
function compile(tokens, data) {
  var str = '';
  for (var i = 0; i < tokens.length; i++) {
    var token = tokens[i];
    switch (token.type) {
      case "text":
        str += token.value;
        break;
      case "variable":
        str += data[token.name];
        break;
      default:
        break;
    }
  }
  return str;
}
var preCompile = function (template) {
  var tokens = parse(template);
  return {
    render: function (data) {
      return compile(tokens, data);
    }
  };
};

var template = preCompile("I am {name} i'm {age} years old!");
console.log(template.render({ name: "Sam", age: 22 }));
console.log(template.render({ name: "Jack", age: 23 }));

相关实践

• 模板引擎

• 时间格式化 tiny-time (https://github.com/aweary/tin...

• Css Selector css-what (https://github.com/fb55/css-s...