实现一个 JavaScript 模板引擎

模板引擎（这里特指用于 Web 开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的 HTML 文档。

模板引擎以一种相当简单的方式工作：您创建一个模板，并使用适当的语法将变量传递给它。

例如：ES6 的模块字符串或 Underscore _.template 方法，它们都以类似的方式工作。有一些开发者将它们封装成更加健壮、优雅、功能更丰富的模板引擎。

常用的模板引擎有：

• Pug（以前叫 Jade）
• EJS
• HAML
• Handlebars
• etc

这些模版语言大多是相似的，都提供了用于展示数据的内容替换和过滤器的功能，且大部分模版引擎都支持自定义过滤器，以展示自定义格式的内容。

下面我们来研究一个相对简单的模板引擎示例。

JavaScript 实现

以下实现的代码来自 absurd/lib/processors/html/helpers/TemplateEngine.js：

const TemplateEngine = function (html, options) {
  // re 用于捕获所有以 <% 开头并以 %> 结尾的部分
  let re = /<%(.+?)%>/g,
    // reExp 用于捕获模板语法内的以 if、for... 开头的代码
    reExp = /(^( )?(var|if|for|else|switch|case|break|{|}|;))(.*)?/g,
    // 最终函数体为拼接完的 code，代码在 with 内运行。注意，严格模式下无法使用 with
    code = 'with(obj) { var r=[];\n',
    cursor = 0,
    result,
    match
  // add 函数的作用是，将所有没有被模板语法包裹的内容推入 r 数组中，而 JS 语法则不需要。
  const add = function (line, js) {
    js
      ? (code += line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n')
      : (code +=
          line != '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");\n' : '')
    return add
  }
  // 使用 exec() 方法在一个指定字符串中执行一个搜索匹配。返回一个结果数组或 null。
  // 循环调用 add 函数分离文本内容和模板语法
  while ((match = re.exec(html))) {
    // html.slice(cursor, match.index) 用于截取没有被 <% %> 包裹的元素
    // match[1] 获取被 <% %> 包裹内的 JS 代码
    add(html.slice(cursor, match.index))(match[1], true)
    cursor = match.index + match[0].length
  }
  // 最后在检查一遍是否完全转换完模板，一般情况都执行完了
  add(html.substr(cursor, html.length - cursor))
  // 在说一遍，code 保存函数的主体部分
  // return r.join(""); 将最终的内容转为字符串并返回
  // 使用 replace 将拼接的代码中包含的回车、制表符、换行符替换为空
  // 转义字符 — \r 回车、\t tab 制表符、\n 换行符，g 标志全局匹配，replace 替换匹配的元素
  code = (code + 'return r.join(""); }').replace(/[\r\t\n]/g, '')
  console.log(code) // <- 这里打印一下，一目了然
  try {
    // 调用 apply 方法改变函数 this 指向，并传递 options 数组
    result = new Function('obj', code).apply(options, [options])
  } catch (err) {
    console.error(`'${err.message}'`, ' in \n\nCode:\n', code, '\n')
  }
  return result
}

示例：

const template =
  'My skills:' +
  '<% if(this.showSkills) { %>' +
  '<% for(let value of this.skills) { %>' +
  '<% value %>' +
  '<% } %>' +
  '<% } else { %>' +
  '
none
' +
  '<% } %>'

TemplateEngine(template, {
  skills: ['js', 'html', 'css'],
  showSkills: true
}) // My skills:jshtmlcss

它还配有一篇文章，详细解读了如何使用 20 行代码实现 JavaScript 模板引擎：JavaScript template engine in just 20 lines。

您可以在此基础上添加其他的逻辑，以丰富它的功能。

更多资料

• underscore 系列之实现一个模板引擎(上)
• underscore 系列之实现一个模板引擎(下)
• Underscore.js _.template
• JavaScript 模板字符串

---

本文首发 blog，如果喜欢或者有所启发，欢迎 Star，对作者也是一种鼓励。