ejs模板引擎原理

時間 2019-11-21

標籤 ejs 模板引擎原理简体版

原文原文鏈接

核心

把html中的<%%>中的<%%>中的js保留執行，<%=%>替換成${xxx}拼接到模板字符串上，test一執行返回的字符串就是咱們要的html

function test(obj) {
  let templ = ''
  with (obj) {
    templ += `<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body>`;
    arr.forEach(item => {
      templ += `<li>${item.age}</li>`;
    })
    templ += `</body></html>`
  }
  return templ
}
複製代碼

核心代碼：

const fs = require('fs');
const path = require('path');

let str = fs.readFileSync(path.resolve(__dirname, 'index2.html'), 'utf8')

function render(str) {
  let head = `let templ='' `;
  head += `with (obj){ `;

  let content = `templ+=\``;

  //<%=%>替換成${xxx}
  str = str.replace(/<%=([\s\S]*?)%>/g, function () {
    return '${' + arguments[1] + '}';
  })
  //匹配<%%>，替換<%成反引號，替換%>成templ+=`,構成模板字符串
  content += str.replace(/<%([\s\S]*?)%>/g, function () {
    return `\`; ${arguments[1]} templ+=\``;
  })

  let tail = `\`} return templ`;
  return head + content + tail;
}

let res = render(str)
console.log(res);

//用字符串建立一個函數
let fn = new Function('obj', res);
let result = fn({
  name: 'lrj',
  arr: [{ age: 123 }, { age: 456 }]
})
console.log(result);

複製代碼

-形象點可是難看點：html

let templ = ''
with (obj) {
templ += `<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body> //<% arr.forEach(item => { %>(替換先後一目瞭然的對應註釋) `; arr.forEach(item => { templ += ` //<li><%=item%></li>(替換先後一目瞭然的對應註釋) <li>${item.age}</li> // <% }) %>(替換先後一目瞭然的對應註釋) `; }) templ += ` </body></html> `}
return templ
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。