文章目录
前言
提示：本文所有笔记皆总结于B站-尚硅谷https://www.bilibili.com/video/BV1EV411h79m?p=15课程中的内容
一、什么是模板引擎？
模板引擎是将数据转变为视图最优雅的方案。
1、历史上曾经出现的数据变为视图的方法（四种）
- 纯DOM法 —— 没有实战价值
<ul id="list"></ul>
<script>
var arr = [
{
"name": "小明", "age": 12, "sex": "男" },
{
"name": "小绿", "age": 15, "sex": "男" },
{
"name": "小红", "age": 13, "sex": "女" }
];
var list = document.getElementById('list');
for (let i = 0; i < arr.length; i++) {
let oLi = document.createElement('li');
let hdDiv = document.createElement('div');
oLi.innerText = arr[i].name + '基本信息';
hdDiv.innerText ='年龄：'+ arr[i].age
list.appendChild(oLi)
list.appendChild(hdDiv)
}
</script>
- 数组join法 —— 是曾经的前端必会的知识
for (let i = 0; i < arr.length; i++) {
// 按住滚轮往下拖
list.innerHTML += [
'<li>',
' <div class="hd">'+arr[i].name+'的基本信息</div>',
' <div class="bd">',
' <p>年龄：'+arr[i].age+'</p>',
' <p>姓名：'+arr[i].name+'</p>',
' <p>性别：'+arr[i].sex+'</p>',
' </div>',
'</li>',
].join('')
}
- ES6的反引号法 —— ES6中新增的
${a}语法糖，很好用
for (let i = 0; i < arr.length; i++) {
list.innerHTML += ` <li>
<div class="hd">${
arr[i].name}的基本信息</div>
<div class = "bd">
<p>年龄：${
arr[i].age}</p>
<p>姓名：${
arr[i].name}</p>
<p>性别：${
arr[i].sex}</p>
</div>
</li>
`;
}
- 模板引擎 —— 最优雅的方案
二、mustache用法
1.mustache库简介
- 官网git：https://github.com/janl/mustache.js
- mustache是“胡子”的意思，因为它的嵌入标记{ {}}非常像胡子；
- { {}}的语法也被Vue沿用；
- mustache是最早的模板引擎库，比Vue诞生的早，它的底层实现机理在当时是非常有创造性的、轰动性的，为后续模板引擎的发展提供了崭新的思路。
2.mustache库基本使用
必须要引入mustache库，可以在bootcdn.com上找到它。
mustache的模板语法非常简单
- mustache基本使用 - 不循环
<div id="list"></div>
// 引入
<script src="./jslib/mustache.js"></script>
<script>
var templateStr = `
<h1>我买了一个{
{thing}}，我很{
{mood}}</h1>
`;
var data = {
thing:"手机",
mood:"开心"
};
var domStr = Mustache.render(templateStr, data);
//上树
var list = document.getElementById('list');
list.innerHTML = domStr
</script>
- mustache基本使用 - 循环简单数组
var templateStr = `
<h1>
{
{#arr}}
<li>{
{.}}</li>
{
{/arr}}
</h1>
`;
var data = {
arr:['a','b','c','d']
};
- mustache基本使用 - 循环对象数组
<ul>
{
{
#arr}}
<li>
<div class="hd">{
{
name}}的基本信息</div>
<div class = "bd">
<p>年龄：{
{
age}}</p>
<p>姓名：{
{
name}}</p>
<p>性别：{
{
sex}}</p>
</div>
</li>
{
{
/arr}}
</ul>
- mustache基本使用 - 嵌套数组
var templateStr = `
<h1>
{
{#arr}}
{
{name}}的爱好是：
<ol>
{
{#hobbies}}
<li>{
{.}}</li>
{
{/hobbies}}
</ol>
{
{/arr}}
</h1>
`;
var data = {
arr: [
{
"name": "小明", "age": 12, "sex": "男", hobbies: ['王者荣耀', '改bug', '跑步'] },
{
"name": "小绿", "age": 15, "sex": "男", hobbies: ['王者荣耀', '羽毛球', '学前端'] },
{
"name": "小红", "age": 13, "sex": "女", hobbies: ['王者荣耀', '敲代码', '睡觉'] }
]
};
- mustache基本使用 - 布尔值
var templateStr = `
{
{#m}}你好！{
{/m}}
`;
var data = {
m: true
};
三、mustache底层核心
循环状况下的tokens
<div>
<ul>
{
{
#arr}}
<li>{
{
.}}</li>
{
{
/arr}}
</ul>
</div>
//对应的tokens
[
["text","<div><ul>"]
["#","arr",[
["text","<li>"],
["name","."],
["text","</li>"],
]],
["text","</ul></div>"]
]
四、手写mustache库
1.简易版mustache库git地址
https://github.com/danfeng0205/Mustache_TemplateEngine.git
2.mustache中js文件调用关系
该图是针对代码中的js文件相互调用，以及各个函数的作用介绍
