字符串模板浅析

const re = /<%(.+?)%>/g
const reExp = /(^( )?(var|if|for|else|switch|case|break|;))(.*)?/g
let code = 'var r=[];\n'
let cursor = 0
let result
let match
const add = (line, js) => {
  if (js) { // 处理 `<%%>` 中的内容，
    code += line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n'
  } else { // 处理 `<%%>` 外的内容
    code += line !== '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");\n' : ''
  }
  return add
}

while (match = re.exec(template)) { // 循环找出所有的 <%%> 
  add(template.slice(cursor, match.index))(match[1], true)
  cursor = match.index + match[0].length
}
// 处理最后一个<%%>之后的内容
add(template.substr(cursor, template.length - cursor))
// 最后返回
code = (code + 'return r.join(""); }').replace(/[\r\t\n]/g, ' ')

new Function(code).apply(data)

// template-engine.js
import parse from './parse' // 前面实现的简单的模板引擎
class TemplateEngine {
  constructor() {
    this.localeContent = {}
  }

  // 参数 parentEl, tpl, data = {} 或者 tpl, data = {}
  renderI18nTpl(tpl, data) {
    const html = this.render(tpl, data)
    const el = createDom(`<div>${html}</div>`)
    const childrenNode = children(el)
    // 多个元素则用<div></div>包裹起来，单个元素则直接返回
    const dom = childrenNode.length > 1 ? el : childrenNode[0]
    return dom
  }
  setGlobalContent(content) {
    this.localeContent = content
  }
  // 在传入模板的数据中多增加一个$i18n的函数。
  render(tpl, data = {}) {
    return parse(tpl, {
      ...data,
      $i18n: (key) => {
        return this.i18n(key)
      }
    })
  }
  i18n(key) {
    if (!this.localeContent) {
      return ''
    }
    return this.localeContent[key]
  }
}
export default new TemplateEngine()

在我们介绍的方法中使用 '<%%>' 的来包裹逻辑语块和变量，此外还有一种更为常见的方式——使用双大括号 {{}}，也叫 mustache 标记。在 Vue, Angular 以及微信小程序的模板语法中都使用了这种标记，一般也叫做插值表达式。下面我们来看一个简单的 mustache 语法模板引擎的实现。

模板引擎 mustache.js 的原理

有了方法3的基础，我们理解其他的模板引擎原理就稍微容易点了。我们来看一个使用广泛的轻量级模板 mustache 的原理。

简单的例子如下：

1. • 首先将渲染模板的数据存入一个变量 context 中。由于在模板中，变量是字符串形式表示的，如 'name.first'。在获取的时候首先通过 . 来分割得到 'name' 和 'first' 然后通过 trueValue = context['name']['first'] 设值。为了提高性能，可以增加一个 cache 将该次获取到的结果保存起来，cache['name.first'] = trueValue 以便于下次使用。

     渲染的核心过程就是遍历 tokens，获取到类型，和变量 (value) 的正真的值，然后根据类型、值进行渲染，最后将得到的结果拼接起来，即得到了最终的结果。

找到适合的模板引擎

众多模板引擎中，如何锁定哪个是我们所需的呢？下面提供几个可以考虑的方向，希望可以帮助大家来选择：

• 功能

  选择一个工具，最主要的是看它能否满足我们所需。比如，是否支持变量、逻辑表达式，是否支持子模板，是否会对 HTML 标签进行转义等。下面表格仅仅做几个模板引擎的简单对比。