模板预编译技术

介绍

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

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

  • 内部原理

  • 简单实现

  • 相关实践

内部原理

预编译的结果,得到的是对模板进行词法分析而得到的一系列标记 (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...

你可能感兴趣的:(javsscript,模板引擎,预解析)