mustache模板引擎

1.什么是模板引擎
- 数据变为视图的方法
- - 1.纯Dom法(非常笨拙，没有实战价值)
  - 2.数组join法(曾经非常流行)
  - 3.es6模板字符串法(ES6中新增的`${a}`语法糖，很好用)
  - 4.模板引擎(解决数据变为视图最优雅的方法)
2.mustache基本使用
3.mustache底层核心机理
4.mustache手写实现

1.什么是模板引擎

模板引擎是将数据要变为视图最优雅的解决方案

数据变为视图的方法

1.纯Dom法(非常笨拙，没有实战价值)

实现代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ul id="list"></ul><script>let arr = [{"name":'小明','age':12,'sex':'男'},{"name":'小红','age':11,'sex':'女'},{"name":'小强','age':13,'sex':'男'},]const list = document.querySelector('#list')for(let i = 0; i < arr.length; i++){// 每遍历一遍都要用Dom方法去创建li标签let lis = document.createElement('li')// 创建hd这个divlet hdDiv = document.createElement('div');hdDiv.className = 'hd'hdDiv.innerText =  arr[i].name + '的基本信息'// 创建bd这个divlet bdDiv = document.createElement('div');bdDiv.className = 'bd'// 创建三个p标签let p1 = document.createElement('p')p1.innerText = ' 姓名:'+ arr[i].namebdDiv.appendChild(p1)let p2 = document.createElement('p')p2.innerText = ' 年龄:'+ arr[i].agebdDiv.appendChild(p2)let p3 = document.createElement('p')p3.innerText = ' 性别:'+ arr[i].sexbdDiv.appendChild(p3)// 创建出来的是孤儿节点，上树后才能被看见lis.appendChild(hdDiv)lis.appendChild(bdDiv)list.appendChild(lis)}</script>
</body>
</html>

2.数组join法(曾经非常流行)

实现代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ul id="list"></ul><script>let arr = [{"name":'小明','age':12,'sex':'男'},{"name":'小红','age':11,'sex':'女'},{"name":'小强','age':13,'sex':'男'},]const list = document.querySelector('#list')// 遍历arr数组，每遍历一项，就以字符串的视角将html字符串添加到list中for(let i = 0; i < arr.length; i++){list.innerHTML += [ '<li>','  <div class="hd">'+ arr[i].name +'的信息</div>','  <div class="bd">','    <p>姓名：'+arr[i].name+'</p>','    <p>年龄：'+arr[i].age+'</p>','    <p>性别: '+arr[i].sex+'</p>','  </div>','</li>'].join('')}// let str = [ // '<li>',// '  <div class="hd"></div>',// '  <div class="bd">',// '    <p>姓名：</p>',// '    <p>年龄：</p>',// '    <p>性别</p>',// '  </div>',// '</li>'// ].join('')console.log(str);</script></body>
</html>

3.es6模板字符串法(ES6中新增的`${a}`语法糖，很好用)

实现代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>模板字符串法</title>
</head>
<body><ul id="list"></ul><script>let arr = [{"name":'小明','age':12,'sex':'男'},{"name":'小红','age':11,'sex':'女'},{"name":'小强','age':13,'sex':'男'},]const list = document.querySelector('#list')// 遍历arr数组，每遍历一项，就以字符串的视角将html字符串添加到list中for(let i = 0; i < arr.length; i++){list.innerHTML +=  ` <li><div class="hd">${arr[i].name }的信息</div><div class="bd"><p>姓名：${arr[i].name }</p><p>年龄：${arr[i].age }</p><p>性别: ${arr[i].sex }</p></div></li>`}</script></body>
</html>

4.模板引擎(解决数据变为视图最优雅的方法)

2.mustache基本使用

mustache官方git: https://github.com/janl/mustache.js
mustache是"胡子"的意思，因为它的嵌入标记{{ }}非常像胡子
{{ }} 的语法也被Vue沿用
mustache是最早的模板引擎库，比Vue诞生早的多，它的底层实现机理在当时是非常有创造性、轰动性的，为后续模板引擎的发展提供了崭新的思路
首先要引入mustache库(本文是4.0.1版本)，可以在bootcdn.com上找到它
mustache的模板语法非常简单，比如前述案例的模板语法如下:

1.循环对象数组：

<ul>
{{#arr}}<li><div class="hd">{{name}}的信息</div><div class="bd"><p>姓名：{{name}}</p><p>年龄：{{age}}</p><p>性别: {{sex}}</p></div></li>{{/arr}}
</ul>

2.不循环：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="container"></div><script src="./jslib/mustache.js"></script><script>let templateStr = `<h1>我买了一个{{phone}}手机,心情:{{mood}}</h1>`let data = {phone:'华为',mood:'开心'}let domStr =  Mustache.render(templateStr,data)let container = document.querySelector('#container')container.innerHTML = domStrconsole.log(domStr);</script>
</body>
</html>

3.循环简单数组

4.数组嵌套

5.布尔值

注：不使用模板字符串

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="container"></div><script src="./jslib/mustache.js"></script><!-- 模板 --><script type="text/template" id="template"><ul>{{#arr}}<li><div class="hd">{{name}}的信息</div><div class="bd"><p>姓名：{{name}}</p><p>年龄：{{age}}</p><p>性别: {{sex}}</p></div></li>{{/arr}}</ul></script><script>let templateStr = document.getElementById('template').innerHTMLlet data = {arr:[{"name":'小明','age':12,'sex':'男'},{"name":'小红','age':11,'sex':'女'},{"name":'小强','age':13,'sex':'男'},]}let domStr =  Mustache.render(templateStr,data)let container = document.querySelector('#container')container.innerHTML = domStrconsole.log(domStr);</script></body>
</html>

3.mustache底层核心机理

1.mustache库不能用简单的正则表达式思路实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="container"></div><script src="./jslib/mustache.js"></script><script>let templateStr = `<h1>我买了一个{{phone}},我心情很{{mood}}</h1>`let data = {phone:'xxx',mood:'开心'}//  let domStr =  Mustache.render(templateStr,data)let domStr =  render(templateStr,data)let container = document.querySelector('#container')container.innerHTML = domStr//最简单的模板引擎的实现机理，利用的是正则表达式中的replace()方法。//replace()的第二个参数可以是一个函数，这个函数提供捕获的东西的参数，就是$1//结合data对象，即可进行智能的替换function render(templateStr,data){return templateStr.replace(/\{\{(\w+)\}\}/g,function(findStr,$1){return data[$1]})}// replace有四个参数// a参数//匹配的位置  {{xxx}}// b参数//捕获的// c参数//位置// d/源字符串</script></body>
</html>

3.mustache库实现机理

什么是tokens?

tokens是一个js的嵌套数组，就是模板字符串的JS表示
它是 “抽象语法树”、“虚拟节点” 等等的开山鼻祖
模板字符串： <h1>我买了一个{{thing}},好{{mood}}啊</h1>

tokens:

  [["text","<h1>我买了一个"]，["name","thing"]，["text","，好"]，["name","mood"]，["text","啊<h1>"]，
]

4.mustache手写实现

xxx待更新

vue2.x---mustache模板引擎学习记录相关推荐

学习Vue的mustache语法-mustache模板引擎
学习地址 : https://www.bilibili.com/video/BV1EV411h79m?vd_source=a81826692f4afea80764f4048dc1ae0a 代码地址 : ...
【Vue源码】mustache模板引擎 - 基本使用 - 底层原理 - 手写实现
文章目录 1. 模板引擎的介绍 1.1 模板引擎是什么? 1.2 模板引擎是怎么来的?(发展历史) 1. 使用原生的DOM操作 2. 使用数组中的join方法 3. 使用ES6反引号的方法 2. mu ...
Vue源码之mustache模板引擎(二) 手写实现mustache
Vue源码之mustache模板引擎(二) 手写实现mustache mustache.js 个人练习结果仓库(持续更新):Vue源码解析 webpack配置可以参考之前的笔记Webpack笔记安 ...
Vue源码之mustache模板引擎(一)
Vue源码之mustache模板引擎(一) 个人练习结果仓库(持续更新):Vue源码解析抽空把之前学的东西写成笔记. 学习视频链接:[尚硅谷]Vue源码解析之mustache模板引擎模板引擎是什么 ...
velocity（vm）模板引擎学习介绍及语法
velocity模板引擎学习 velocity与freemaker.jstl并称为java web开发三大标签技术,而且velocity在codeplex上还有.net的移植版本NVelocity,( ...
Mustache 模板引擎
Mustache 模板引擎 1.Mustache简介 mustache.js 是一个简单强大的 JavaScript 模板引擎.使用mustache前需要通过script标签引入它的js文件,然后 ...
Vue深入学习1—mustache模板引擎原理
mustache 是 "胡子"的意思,因为它的嵌入标记 {{ }} 旋转过来很像胡子,Vue中的 {{ }} 语法也引用了mustache,这也是我深入学习的目的. 1.原始js方 ...
【Vue源码解析】mustache模板引擎
模板引擎什么是模板引擎实现 Scanner 类根据模板字符串生成 tokens 在 index.js 引入 parseTemplateToTokens 实现 tokens 的嵌套 One Mor ...
thymeleaf 获取yml中的值_Thymeleaf模板引擎学习
开发传统Java WEB项目时,我们可以使用JSP页面模板语言,但是在SpringBoot中已经不推荐使用JSP页面进行页面渲染了.从而Thymeleaf提供了一个用于整合Spring MVC的可选模 ...

vue2.x---mustache模板引擎学习记录

mustache模板引擎

1.什么是模板引擎

数据变为视图的方法

1.纯Dom法(非常笨拙，没有实战价值)

2.数组join法(曾经非常流行)

3.es6模板字符串法(ES6中新增的`${a}`语法糖，很好用)

4.模板引擎(解决数据变为视图最优雅的方法)

2.mustache基本使用

3.mustache底层核心机理

4.mustache手写实现

vue2.x---mustache模板引擎学习记录相关推荐

最新文章

热门文章

vue2.x---mustache模板引擎学习记录

mustache模板引擎

1.什么是模板引擎

数据变为视图的方法

1.纯Dom法(非常笨拙，没有实战价值)

2.数组join法(曾经非常流行)

3.es6模板字符串法(ES6中新增的${a}语法糖，很好用)

4.模板引擎(解决数据变为视图最优雅的方法)

2.mustache基本使用

3.mustache底层核心机理

4.mustache手写实现

vue2.x---mustache模板引擎学习记录相关推荐

最新文章

热门文章

3.es6模板字符串法(ES6中新增的`${a}`语法糖，很好用)