JavaScript 实现 Mustache 模板引擎

// 1. 定义模板

const templateStr = `<h2>我喜欢吃{{peach}}, {{ lain }}也喜欢吃 {{peach}}吗?</h2>`

// 2. 定义数据

const data = {

  lain: 'lain',

  peach: '桃子'

}

// 3. 封装匹配符合 {{}} 语法的字符串

function render(templateStr, data) {

  return templateStr.replace(/\{\{\s*(\w+)\s*\}\}/g, function (findStr, $1) {

    console.log(data[$1]);

    return data[$1]

  })

}

// 4. 返回新的字符串

const newStr = render(templateStr, data)

console.log(newStr) // <h2 > 我喜欢吃桃子，lain 也喜欢吃 桃子吗？</h2>

[

  ["test", "<h2>我喜欢吃"], // token

  ["name", "peach"],       // token

  ["test", ", "],          // token

  ["name", "lain"],        // token

  ["test", "也喜欢吃"],     // token

  ["name", "peach"],       // token

  ["test ", "吗?</h2>"],   // token

]

[

  ['text', '<ul>'],

  [ '#', 'arr', [

    ['text', '<li><span>'],

    ['name', '.'],

    ['text', '</span></li>']

  ]],

  ['text', '</ul>']

]

{

  "name": "mustache",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "dev": "webpack-dev-server"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "webpack": "^4.44.2",

    "webpack-cli": "^3.3.12",

    "webpack-dev-server": "^3.11.0"

  }

}

const path = require('path')

module.exports = {

  // 模式，开发

  mode: 'development',

  // 入口

  entry: './src/index.js',

  // 打包到什么文件

  output: {

    filename: 'bundle.js'

  },

  // 配置 webpack-dev-server

  devServer: {

    hot: true,

    // 静态文件根目录

    contentBase: path.join(__dirname),

    // 不压缩

    compress: false,

    // 端口号

    port: 8080,

    // 虚拟打包路径

    publicPath: '/dist/'

  }

}

export default class Scanner {

  constructor(template) {

    // 1. 定义 指针 尾巴 与 模板 变量

    this.pos 	= 0 // 指针

    this.tail = template // 尾巴

    this.template = template // 模板

  }

  // 2. 作用与越过指定 tag 

  scan(tag) {

    // 2.1 所以需要将 pos 与 tag 长度进行相加

    this.pos += tag.length

    // 2.2 所以需要将 并取 pos 之后的字符串

    this.tail = this.template.substring(this.pos)

  }

  // 3. 让指针进行扫描，遇到指定 stopTag 结束，并返回之间路过的文字

  scanUntil(stopTag) {

    // 3.1 保存上次 this.pos 位置

    let pos_backup = this.pos

    // 3.2 当 pos 小于 template 长度 并且尾巴不是 stopTag, 说没没有扫描到 stopTag 才会继续循环  

    while (!this.eos() && this.tail.indexOf(stopTag) != 0) {

      // 3.3 每循环依次让指针 ++

      this.pos++

      // 3.4 获取 this.template 下标 this.pos 的字符串

      this.tail = this.template.substring(this.pos)

    }

    // 4. 返回开始到当前指针之前的字符串

    return this.template.substring(pos_backup, this.pos)

  }

  // 5. 判断 pos 是否到 template 最后了

  eos() {

    return this.pos >= this.template.length 

  }

}

import Scanner from "./Scanner"

import nestTokens from "./nestTokens"

export default function parseTemplateToTokens(template) {

  // 1. 定义数组 将模板字符串转为 tokens

  const tokens = []

  // 2. 创建 Scanner 实例

  const scanner = new Scanner(template)

  // 3. 接收每次返回的字符串

  let words = ''

  // 4. 匹配去掉空格

  function trimWords(words) {

    return words.replace(/\s+(<)|(>)\s+/g, '$1$2')

  }

  // 3. 判断 this.tail 与 this.template 长度是否一致 否则一直循环

  while (!scanner.eos()) {

    // 3.1 扫描 {{  返回之前的字符串 text 类型

    words = scanner.scanUntil('{{')

    // 3.2 追入 tokens

    if(words) tokens.push(['text', trimWords(words)])

    // 3.3 越过 {{

    scanner.scan('{{')

    // 3.4 扫描 }}  返回之前的字符串 非 text 类型

    words = scanner.scanUntil('}}')

    // 4. 追入 tokens

    if (words) {

      // 4.1 判断为 '#' 类型 

      if (words[0] == '#') tokens.push(['#', trimWords(words.substring(1))])

      // 4.2 判断为 '/' 类型

      else if (words[0] == '/') tokens.push(['/', trimWords(words.substring(1))])

      // 4.3 判断为 'name' 类型 

      else tokens.push(['name', words])

    }

    // 4.4 越过 }}

    scanner.scan('}}')

  }

  // 5. 返回 tokens

  return nestTokens(tokens)

}

export default function nestTokens(tokens) {

  // 1. 定义最终 tokens 数组 

  const nestTokens = []

  // 2. 定义栈结构，存放小 tokens

  let sections = []

  // 3. 收藏器 主要作用是需要巧妙地引用地址

  let collector = nestTokens

  // 4. 遍历原 tokens

  for (let i = 0; i < tokens.length; i++){

    // 4.1 取出一个个小 token

    let token = tokens[i]

    // 5. 进行判断类型

    switch (token[0]) {

      // 5.1 如果为 '#' 类型代表也是 tokens 需要黄 `# 与 /` 之间地数据放入 token [2]

      case '#':

        // 5.2 先同时将 token 追加入 数组中

        collector.push(token)

        sections.push(token)

        // 5.3 这里是非常巧妙地利用了引用地址类型 token [2] 地址 给到了 collector

        // 代表接下来 collector 进行 push 数据时 都是往 token [2] 追加的

        collector = token[2] = []

        break;

      case '/':

        // 6. 遇到 `/` 代表需要进行弹栈 

        sections.pop()

        // 7. 判断 sections 中是否还有数组 有的话将数组地址给 collector

        // 例如 [[1,2], [3,4]] 上面 pop 操作将 [3, 4] 弹出后剩下 [[1,2]], 那么此时 collector 地址 === [1,2] 地址 

        // 而 [1, 2] 地址也就是栈结构形式的一个个数组 

        // 8. 否则返回 nestTokens 而 nestTokens 被 collector 引用，所以返回的也是 collector

        collector = sections.length > 0 ? sections[sections.length - 1][2] : nestTokens

        break;

      default:

        // 9. `text` 类型为普通文本 之间追加进入就可以了

        collector.push(token)

    }

  }

  // 10. 结果返回

  return nestTokens

}

import lookup from "./lookup";

import parseToken from "./parseToken";

export default function renderTemplate(tokens, data) {

  // 1. 定义结果字符串

  let resultStr = ''

  // 2. 遍历 tokens

  for (let i = 0; i < tokens.length; i++){

    // 3. 循环获取 token

    let token = tokens[i]

    // 4. 从 token [0] 第一项判断是什么类型 

    switch (token[0]) {    

      // 4.1 'text' 类型就行普通文本 直接相加即可

      case 'text':

        resultStr += token[1]

        break;

      // 4.2 'name' 则是 {{}} 里面的，代表是变量 通过 lookup 函数获取变量对应的值

      case 'name':

        resultStr += lookup(data, token[1]) 

        break;

      // 4.3 '#' 代表也是 tokens, 需要将 tokens 再转为 token 进行链接 

      case '#':

        // 5. 所以创建一个递归函数 parseToken

        resultStr += parseToken(token, data)

        break;

    }

  }

  // 6. 返回字符串

  return resultStr

}

const dataObj = {

  a: {

    b: {

      c: 100

    }

  }

}

lookup(dataObj, 'a.b.c') // 100

export default function lookup(dataObj, keyName) {

  // 1. 判断 keyName 本身不是。并且 keyName 中没有以。连接地属性名 

  // 栗子：a.b.c

  if (keyName != '.' && keyName.indexOf('.') != -1) {

    // 2. 将上面 a.b.c 变成 ['a', 'b', 'c']

    let keys = keyName.split('.')

    // 3. 定义一个临时对象保存每次属性拿到的值 

    let tempObj = dataObj

    // 4. 循环拿到值 举个栗子 tempObj = {a: {b: {c: 100} } }

    // tempObj = dataObj[a] -> tempObj2 = tempObj[b] -> tempObj3 = tempObj2[c]

    for (let i = 0; i < keys.length; i++) tempObj = tempObj[keys[i]]

    // 5. 返回结果

    return tempObj

  }

  // 6. 如果本身就是。属性或者没有。连接的属性的话 就直接取值返回

  return dataObj[keyName]

}

import lookup from "./lookup"

import renderTemplate from "./renderTemplate";

export default function parseToken(token, data) {

  // 1. 定义变量接收数据对象

  const v = lookup(data, token[1])

  // 2. 作为结果字符串

  let resultStr = ''

  // 3. 遍历数据的长度 递归次数与数据的长度一致

  for (let i = 0; i < v.length; i++){

    resultStr += renderTemplate(token[2], {

      ...v[i],

      '.': v

    })

  }

  // 4. 返回结果字符串

  return resultStr

}

import Scanner from './Scanner.js'

import parseTemplateToTokens from './parseTemplateToTokens.js'

import renderTemplate from './renderTemplate.js'

global.TemplateEngine = {

  render(template, data) {

    // 1. 将模板转字符串转化为 tokens

    const tokens = parseTemplateToTokens(template)

    // 2. 将 tokens 渲染为 DOMString 结构

    const domStr = renderTemplate(tokens, data)

    // 3. 将 DOMString 返回

    return domStr

  }

}

const templateStr =

  `<ul>

    {%#123;#arr}%#125;

      <li>

        {%#123;.}%#125;

      </li>

    {%#123;/arr}%#125;

  <ul>

`

const data = {

  arr: ['苹果', '西瓜', '樱桃']

}

const domStr = TemplateEngine.render(templateStr, data)

console.log(domStr);

container.innerHTML = domStr