VS源码解析之模板mustache引擎1-基础介绍

最新推荐文章于 2024-08-27 15:59:21 发布
最新推荐文章于 2024-08-27 15:59:21 发布
阅读量94 收藏
点赞数
分类专栏： vue进阶 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45776662/article/details/120267139
版权
这篇博客介绍了三种将数据转化为DOM视图的方法：纯DOM操作、数组join法和ES6模板字符串。通过示例展示了如何动态创建HTML元素，并对比了不同方法的实现方式。此外，还讲解了Mustache模板引擎的基本使用，用于更高效地结合数据和模板生成HTML内容。
摘要由CSDN通过智能技术生成

模板引擎

介绍

本篇博客是基于尚硅谷的源码解析课程的第一篇，仅做笔记用，github仓库地址

纯DOM法（最底层）：非常复杂麻烦

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>数据变为视图DOM</title>
</head>
<body>
<ul id="list"></ul>
<script>
	var arr = [
		{"name": "小明", "age": 12, "sex": "男"},
		{"name": "小明", "age": 12, "sex": "男"},
		{"name": "小明", "age": 12, "sex": "男"},
	]
  var list = document.getElementById('list')
	for (let i = 0; i < arr.length; i++) {
		// 创建li标签
    let oLi = document.createElement('li')
    // 创建hd这个div
    let hdDiv = document.createElement('div')
    hdDiv.className = 'hd'
    hdDiv.innerText = arr[i].name + '的基本信息'

		let bdDiv = document.createElement('div')
		bdDiv.className = 'bd'

    let p1 = document.createElement('p')
    p1.innerText = '姓名:' + arr[i].name
    bdDiv.appendChild(p1)

		let p2 = document.createElement('p')
		p2.innerText = '年龄:' + arr[i].age
		bdDiv.appendChild(p2)

		let p3 = document.createElement('p')
		p3.innerText = '性别:' + arr[i].sex
		bdDiv.appendChild(p3)

    // 内部文字
    oLi.innerHTML = arr[i].name
    oLi.appendChild(hdDiv)
    oLi.appendChild(bdDiv)
    // 创建呃节点时孤儿节点
    list.appendChild(oLi)
	}

</script>
</body>

</html>

数组join法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>数据变为视图DOM</title>
</head>
<body>
<ul id="list">
</ul>
<script>
	var arr = [
		{"name": "小明", "age": 12, "sex": "男"},
		{"name": "小明", "age": 12, "sex": "男"},
		{"name": "小明", "age": 12, "sex": "男"},
	]

	var list = document.getElementById('list')

	// 遍历arr数组,每遍历一项就以字符串视角,添加到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('')
	}
</script>
</body>

</html>

ES6反引号法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>数据变为视图DOM</title>
</head>
<body>
<ul id="list">
</ul>
<script>
	var arr = [
		{"name": "小明", "age": 12, "sex": "男"},
		{"name": "小明", "age": 12, "sex": "男"},
		{"name": "小明", "age": 12, "sex": "男"},
	]

	var list = document.getElementById('list')

	// 遍历arr数组,每遍历一项就以字符串视角,添加到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>

mustache的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="container"></div>
<script src="jslib/mustache.js"></script>
<script>
	var templateStr = `
      <ul>
        {{#arr}}
         <li>
           <div class="hd">{{name}}</div>
           <div class="bd">
            <p>姓名:{{name}}</p>
            <p>年龄:{{age}}</p>
            <p>性别:{{sex}}</p>
           </div>
         </li>
        {{/arr}}
      </ul>
		`;

	var data = {
		arr: [
			{"name": "小明", "age": 12, "sex": "男"},
			{"name": "小明", "age": 12, "sex": "男"},
			{"name": "小明", "age": 12, "sex": "男"},
		]
	}
	var domStr = Mustache.render(templateStr, data);
	var container = document.getElementById('container')
  container.innerHTML = domStr
</script>
</body>
</html>

其他

 /* 简单循环
  * <ul>
  *   {{#arr}}
  *     <li>{{.}}</li>
  *   {{/arr}}
  * </ul>
  *
  * data = {
  * arr:['A','B',''C]
  * }
  *
  * */

  var templateStr = `
      <ul>
        {{#arr}}
         <li>
          {{name}}的爱好是:
          <ol>
            {{$hobbies}}
              <li>{{.}}</li>
            {{/hobbies}}
          </ol>
         </li>
        {{/arr}}
      </ul>
		`;
  //数组嵌套
   data = {
   	arr:[
      {'name':'小明','age':12,'hobbies':['游泳','羽毛球']},
      {'name':'小明','age':12,'hobbies':['游泳','羽毛球']},
      {'name':'小明','age':12,'hobbies':['游泳','羽毛球']},
    ]
   }


   var templateStr2 = `
     {{#m}}
      <h1>你好</h1>
     {{/m}}
   `

  //bool值
  data2 = {
   	m:false
  }
wjyGrit
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue源码解析之mustache模板引擎——底层核心机理
qq_45776662的博客
09-19 252
mustache底层核心机理底层token思想手写mustache库1.遍历查找“{{ }}”(Scanner类) 不能用简单的正则表达式思路实现 底层token思想 手写mustache库 1.遍历查找“{{ }}”(Scanner类) scanner类：用于解析templateStr模板字符串 主要由两个方法 scan()：跳过{{ scanUtil(): 让指针进行扫描,知道遇见指定内容结束,并且能够返回之前路过的文字 ...
Vue源码解析：mustache模板引擎、数据响应式原理
m0_61732154的博客
04-12 595
Dep类(depend)：负责管理依赖，可以收集依赖、删除依赖、向依赖发送通知 (每个Observer的实例(__ob__)，成员中都有一个Dep的实例，即检测过的每一层属性都有dep依赖关系)observe方法:传入的可能是对象或者其它值，如果是对象，且没有__ob__属性(说明没有添加过监听)，则new Observer继续监测其下的属性。最后，让数组的原型指向arrayMthods，之后调用7个数组方法便会触发自定义的原型上的方法（在原数组和数组原型之间，多一层自定义的原型）
【Vue源码解析】mustache模板引擎
m0_61016904的博客
12-10 1351
模板引擎是将数据变为视图最优雅的解决方案以前出现过的其它数据变视图的方法纯 DOM 法数组 join 法在 js 里单双引号内的内容是不能换行的，为了提高 dom 结构可读性，利用了数组的 join 方法（将数组变为字符串），注意 join 的参数 ‘’ 不可以省略，否则得到的 str 字符串会是以逗号间隔的es6 的模板字符串（``）刚开始用模板引擎时可以引用 如下：
Vue源码解析之mustache模板引擎
qq_62401904的博客
08-15 420
模板引擎是将数据要变为视图最优雅的解决方案历史上曾出现过的数据变为视图的方法：纯DOM法、数据join法、ES6的反引导法、模板引擎
【前端源码解析】mustache 模板引擎核心原理
萌宅鹿的技术小屋
06-26 578
什么是模板引擎 mustache 基本使用 mustache 的底层核心机理 带你手写 mustache 库
Vue源码解析—mustache模板引擎
天高任鸟飞
07-21 291
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是...
vue源码解析之mustache模板引擎
qq_38761664的博客
05-28 233
数据变为视图的方法 纯Dom方法：非常笨拙，没有实战价值 数据join法：曾今流行 ES6反引号法：`${}`语法糖 模板引擎：解决数据变为视图最优雅的方法
【vue源码解析之底层模板引擎】mustache模板引擎
qq_41487095的博客
03-17 839
什么是模板引擎？ 模板引擎是将数据变为视图的最优雅的解决办法。目前将数据处理为视图的方法，从时间线排列有： 纯DOM法 document.createElement() 数组 join，借助 HTMLElement.prototype.innerHTML将字符串解析为HTML es6 模板字符串 <h1>${data}</h1>替代 join 函数 模板引擎，vue中的<li v-for="item in data"></li>就是一种模板引
Vue源码：mustache模板引擎学习
2401_84150137的博客
04-20 868
给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里免费领取，先到先得哦。就是100*/// 看看keyName中有没有点符号== ‘.’) {// 如果有点符号，那么拆开// 设置一个临时变量，这个临时变量用于周转，一层一层找下去// 每找一层，就把它设置为新的临时变量i++)// 如果没有点符号/**折叠tokens，将#和/之间的tokens能够整合起来，作为它的下标3。
Go-mustache-Mustache模板语言的一个Go实现
08-13
通过阅读源码，你可以了解其实现细节，包括如何解析模板、处理变量和部分、以及如何执行辅助方法等。测试用例则可以帮助你理解如何正确使用这个库，以及预期的输出结果。 总的来说，Go-mustache提供了一个简洁、...
mustache-maven-plugin-1.1.zip
09-26
在Maven构建时，Mustache Maven Plugin会读取指定的数据文件，解析成Map对象，然后结合模板文件进行渲染，最后生成目标文件。这种机制使得开发者可以在构建过程中动态地生成各种文档、报告或者其他依赖于项目元数据...
【Vue源码】mustache模板引擎 - 基本使用 - 底层原理 - 手写实现
YK菌的博客
04-11 1302
文章目录1. 什么是模板引擎1.1 简单介绍1.2 历史1. 纯DOM法2. 数组的join法3. ES6反引号2. mustache基本使用2.1 mustache 库简介2.2 mustache 的基本使用1. 循环对象数组2. 不循环3. 循环简单数组4. 数组的嵌套情况5. 布尔值6. script 模板写法3. mustache的底层核心机理3.1 正则表达式实现简单的模板数据填充2.3 mustache 库的机理2.4 什么是 tokens？4. 手写实现mustache库标记的 tokens
vue源码-mustache模板引擎分析(二)-mustache的基本使用
qq_45679015的博客
08-23 610
一.什么是mustache？ mustache是胡子的意思，因为它嵌入标记{{}}像胡子。 mustache是一种没有逻辑的模板语法，因为它没有if语句，else语句和for循环，所以不能再模板中使用if..else做循环判断，也不能在模板中使用表达式。 它可以应用于HTML,配置文件，源代码等，通过使用对象提供的值在模板中展开标记显示到页面上。 二.mustache库的使用 （1）引入mustache.js[4.1.0版本] <script src='../js/mustache.js
JavaScript代码片段
weixin_66128399的博客
08-26 347
使用场景是：后端列表查询接口，某个字段前端不传，后端就不根据那个字段筛选，例如name不传的话，就只根据page和pageSize筛选，但是前端查询参数的时候（vue或者react）中，往往会这样定义。给后端发送数据的时候，要判断某个属性是不是空字符串，然后给后端拼参数，这块逻辑抽离出来就是cleanObject，代码实现如下。leading-true，trailing-true：在延时开始时就调用，延时结束后也会调用。//第一个参数指定位数，第二个字符串指定字符，都是可选参数，如果都不传，默认生成8位。
基于vue框架的病床管理信息系统odt4v（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
最新发布
h2345678的博客
08-27 716
因此，开发一套集医疗人员、物流人员、病床信息及使用记录等功能于一体的病床管理信息系统，成为提升医院管理水平、优化资源配置、增强患者满意度的迫切需求。第三阶段：2024年4月1日－2024年4月30日，完成系统分析，设计，编码，测试等工作，同时完善文献综述及外文翻译，完成论文初稿；第二阶段：2024年3月10日－2024年3月31日，查阅资料，调研系统需求，熟悉课题所需要的编译软件、数据库和设计语言等；第一阶段：2023年1月11日－2024年3月9日， 确定毕设题目，查阅资料，完成开题报告，进行开题答辩。
jQuery基础——DOM
m0_54066656的博客
08-27 1264
JQ基础——DOM操作
python12 中，No module named‘distutils‘错误
qq_43557600的博客
08-27 4471
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
vue ref和reactive区别
灰海
08-25 1557
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
mustache模板 if-elseif -else 语法
03-06
下面是Mustache模板中if-elseif-else语法的介绍： 1. if语句：通过{{#if}}和{{/if}}标签来实现条件判断。在{{#if}}标签中，可以使用变量或表达式作为条件，如果条件为真，则会渲染{{#if}}和{{/if}}之间的内容；如果...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值