mustache模板引擎学习记录

本文主要是介绍mustache模板引擎学习记录，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

0.历史上曾经出现的数据变为视图的方法

1.纯DOM法

let arr = [{"name":"张三","age":18,"sex":"男"},
]
let list = document.querySelector('#list')
for (let i = 0; i < arr.length; i++) {let li = document.createElement('li')li.innerHTML = "<div>"+arr[i].name+"</div>"list.appendChild(li)    
}

2.数组join法

let arr = [{"name":"张三","age":18,"sex":"男"},
]
let list = document.querySelector('#list')
for (let i = 0; i < arr.length; i++) {list.innerHTML += ["<li>"+arr[i].name+"</li>"].join("")
}

3.ES6的反引号法

let arr = [{"name":"张三","age":18,"sex":"男"},
]
let list = document.querySelector('#list')
for (let i = 0; i < arr.length; i++) {list.innerHTML += `<div>姓名：${arr[i].name}</div>`
}

4.模板引擎

let templateStr = `<div>姓名：${arr[i].name}</div>
`
let data = {arr:[{"name":"张三","age":18,"sex":"男"},{"name":"李四","age":20,"sex":"女"},{"name":"王五","age":22,"sex":"男"},]   
}
let domStr = Mustache.render(templateStr,data);
let container = document.querySelector("#container");
container.innerHTML = domStr;

1.简易正则实现模板匹配

let templateStr = "<h1>我买了一个{{ thing }} , 好{{ feeling }}</h1>"
let data = {thing: '华为手机',feeling: '开心'
}
console.log(templateStr.replace(/\{\{(.*?)\}\}/g, function(_,g) {return data[g.trim()]
}));

封装成函数

let templateStr = "<h1>我买了一个{{ thing }} , 好{{ feeling }}</h1>"
let data = {thing: '华为手机',feeling: '开心'
}
function render(templateStr, data) {return templateStr.replace(/\{\{(.*?)\}\}/g, function(_,g) {return data[g.trim()]})
}
console.log(render(templateStr, data))

2.tokens

tokens是一个JS的嵌套数组，模板字符串的JS表示

它是“抽象语法树”，“虚拟节点”等等的开山鼻祖

例：

模板字符串

<h1>我买了一个{{thing}}</h1>

tokens

let tokens =[{ type: 'text', value: '<h1>我买了一个' },{ type: 'name', value: 'thing' },{ type: 'text', value: '</h1>' },
]

模板字符串 -> tokens + 数据 -> 正常标签

3.1.实现Scanner方法

/* 扫描器类 */
export default class Scanner {constructor(templateStr) {this.templateStr = templateStr;// 指针this.pos = 0;// 尾巴this.tail = this.templateStr.substring(this.pos);//*例：<h1>abc</h1>//*指针位：<//*尾巴：<h1>abc</h1>}// 扫描器扫描方法，走过指定内容，没有返回值scan(tag) {// 判断是否扫描到标签if (this.tail.indexOf(tag) == 0) {// 扫描到标签this.pos += tag.length   //*跳过标签  }}//让指针进行扫描，直到遇见指定内容结束，并且能够返回结束之前路过的文字scanUtil(stopTag) {//记录一下执行本方法的时候pos的值const pos_backup = this.pos;    //*这里记录起始位置 ， //当尾巴的开头不是stopTag的时候，一直扫描 ， 先判断有没有超出长度while (!this.eos() && this.tail.indexOf(stopTag) != 0) {this.pos++;//改变尾巴为从当前指针这个字符开始，到最后的全部字符this.tail = this.templateStr.substring(this.pos);}return this.templateStr.substring(pos_backup, this.pos);//返回结束之前路过的文字}//指针是否已经到头，返回布尔值  end of stringeos() {return this.pos >= this.templateStr.length;//如果指针已经大于等于字符串长度，返回true，否则返回false}
}

图例