模板字符串

模版引擎

自己实现一个类似于EJS的模版引擎
核心原理是:
1.正则表达式代替字符串
2.使用with包裹作用域
3.为了作用域的干净使用new Function()形成一个独立的函数作用域
4.各种代替字符串

let fs = require('fs');
let templateContent = fs.readFileSync('./template.html').toString();
// console.log(templateContent);

// 最基本的字符串代替:<%%>
function render(content, obj) {
  content = content.replace(/\<\%(.+?)\%\>/g, function () {
    return obj[arguments[1]];
  })
  return content;
}

//有 <%=%>js函数的模版引擎
function render(content, obj) {
  let head = ``;
  let body = ``;
  let tail = ``;
  head = `
    let str = ''
    with (obj) {
  `;

  body = 'str+=`' + content + '`';
  body = body.replace(/\<\%([^=]+?)\%\>/g, function () {
    return '${'+arguments[1]+'}';
  });
  body = body.replace(/\<\%\=(.+?)\%\>/g, function () {
    return '`;' + arguments[1] + '\r\n str+=`';
  })

  tail = ` }; return str; `;
  
  let fn = new Function('obj', head + body + tail);
  return fn(obj);
}

let newContent = render(templateContent, { name: "zhangsan", age: 19,list:[1,2,3] });
console.log(newContent);