跳到主要内容

模板引擎

基础​

function parseString(str, obj) {
  Object.keys(obj).forEach(key => {
    str = str.replace(new RegExp(`{{${key}}}`,'g'), obj[key]);
  });
  return str;
}
const str = "{{name}}很厉name害{{name}}，才{{age}}岁";
const obj = { name: "jawil", age: "15" };
console.log(parseString(str, obj));

高级​

function template(tpl: string, data) {
    tpl = tpl.replace(/(\r|\n)/ig, "");

    var arr = tpl.split(/(\<%=?|%\>)/gm); // 拆分模板
    var funcBody = ["with(this){\r\nvar result=[];"];

    var item, codeType;

    codeType = 0;

    for (var i = 0; i < arr.length; i++) {
        item = arr[i];
        //将代码片段分为3类
        if (item == "<%") {
            codeType = 1;
            continue;
        } else if (item == "<%=") {
            codeType = 2;
            continue;
        } else if (item == "%>") {
            codeType = 0;
            continue;
        }
        //为3类代码片段生成最终可被eval的函数体
        if (codeType == 0) { //字符
            funcBody.push("result.push(\"");
            funcBody.push(item);
            funcBody.push("\");\r\n");
        } else if (codeType == 1) { //代码
            funcBody.push(item);
            funcBody.push("\r\n");
        } else if (codeType == 2) { //代码输出
            funcBody.push("result.push(");
            funcBody.push(item);
            funcBody.push(");\r\n");
        }
    }
    funcBody.push("return result.join('')\r\n}");

    var template_func = new Function(["renderData"], funcBody.join(""));
    return template_func.apply(data, [data]);
}

推荐书籍​

  • [Compilers: Principles,Techniques and Tools ] ()
  • [DSL In Action ] ()
  • [Language Implementation Patterns: Create Your Own Domain-Specific and General Programming Languages ] ()

参考​