vue源码解析之mustache模板引擎——底层核心机理

最新推荐文章于 2022-12-10 10:36:20 发布
最新推荐文章于 2022-12-10 10:36:20 发布
阅读量181 收藏
点赞数
分类专栏： vue进阶 文章标签： javascript 正则表达式 vue mustache 模板引擎
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45776662/article/details/120378456
版权
本文深入探讨Vue框架中的mustache模板引擎，通过底层token思想，介绍如何手写mustache库。首先，讲解Scanner类如何遍历查找“{{ }}”，接着详细阐述如何生成tokens数组，解析templateStr模板字符串的过程。
摘要由CSDN通过智能技术生成

mustache底层核心机理


不能用简单的正则表达式思路实现

在这里插入图片描述

底层token思想

在这里插入图片描述在这里插入图片描述

在这里插入图片描述

手写mustache库

1.遍历查找“{ { }}”(Scanner类)

scanner类：用于解析templateStr模板字符串
主要由两个方法
scan()：跳过{ {
scanUtil(): 让指针进行扫描,知道遇见指定内容结束,并且能够返回之前路过的文字

index.js

import Sanner from "./Sanner";

window.WJY_TemplateEngine = {
   
	// 渲染
	render(templateStr,data) {
   

		// 实例化一个扫描器,构造时提供模板字符串
		var scanner = new Sanner(templateStr)
		var word
		while (!scanner.eos()) {
   
			word = scanner.scanUtil('{
   {')
			console.log(word)
			scanner.scan('{
   {')
			word = scanner.scanUtil(
最低0.47元/天 解锁文章
wjyGrit
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Vue源码】mustache模板引擎 - 基本使用 - 底层原理 - 手写实现
YK菌的博客
04-11 1279
文章目录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 底层核心原理及实现
浮生离梦的博客
11-21 425
一、mustache 核心原理 mustache 库的机理，模版字符串编译为 tokens，数据结合 tokens 解析为 dom 字符串。 tokens 是一个JS的嵌套数组，就是模板字符串的JS表示。它是“抽象语法树”、“虚拟节点”等等的开山鼻祖。 循环情况下的tokens，当模板字符串中有循环存在时，它将被编译为嵌套更深的tokens。 双重循环情况下的tokens，当循环是双重的，那么tokens会更深一层。 mustache库底层重点要做两个事情，如下所示： 将模板字符串编译为tokens形
Vue源码解析之mustache模板引擎
qq_62401904的博客
08-15 412
模板引擎是将数据要变为视图最优雅的解决方案历史上曾出现过的数据变为视图的方法：纯DOM法、数据join法、ES6的反引导法、模板引擎
【Vue源码解析】mustache模板引擎
m0_61016904的博客
12-10 1337
模板引擎是将数据变为视图最优雅的解决方案以前出现过的其它数据变视图的方法纯 DOM 法数组 join 法在 js 里单双引号内的内容是不能换行的，为了提高 dom 结构可读性，利用了数组的 join 方法（将数组变为字符串），注意 join 的参数 ‘’ 不可以省略，否则得到的 str 字符串会是以逗号间隔的es6 的模板字符串（``）刚开始用模板引擎时可以引用 如下：
Vue源码解析—mustache模板引擎
天高任鸟飞
07-21 287
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是...
vue源码解析.zip
05-13
本资料"vue源码解析.zip"包含了一份名为"vue.pdf"的文档，预计会详细阐述Vue的核心概念、设计模式以及源码实现。 首先，Vue.js 的核心特性包括双向数据绑定、组件系统、指令系统和虚拟DOM。双向数据绑定通过`v-...
vue源码解析之生命周期与响应式data
07-12
vue源码解析之生命周期与响应式data
vue源码解析之事件机制原理
01-19
源码都是基于最新的Vue.js v2.3.0。下面我们来看看vue中的事件机制： 老样子还是先上一段贯穿全局的代码，常见的事件机制demo都会包含在这段代码中： <div id=test1 click=click1>click1 ...
Vue源码解析之数组变异的实现
01-19
众所周知，在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变。 这是什么原因？ 原因在于： Vue 的响应式系统是基于Object....
vue 源码解析之虚拟Dom-render
10-16
Vue.js 是一个流行的前端JavaScript框架，它的核心特性之一就是使用虚拟DOM来提高性能和效率。虚拟DOM是Vue在内存中构建的一种数据结构，它模拟了真实的DOM树，允许Vue在更新UI时进行高效的比较和更新操作。 在Vue...
【vue源码解析之底层模板引擎】mustache模板引擎
qq_41487095的博客
03-17 828
什么是模板引擎？ 模板引擎是将数据变为视图的最优雅的解决办法。目前将数据处理为视图的方法，从时间线排列有： 纯DOM法 document.createElement() 数组 join，借助 HTMLElement.prototype.innerHTML将字符串解析为HTML es6 模板字符串 <h1>${data}</h1>替代 join 函数 模板引擎，vue中的<li v-for="item in data"></li>就是一种模板引
基于VUE只是作为模版引擎的前后端分离
xinhongjun12的博客
12-11 5236
首先请原谅本文标题取的有点大，但并非为了哗众取宠。本文取这个标题主要有3个原因，这也是写作本文的初衷： &nbsp; （1）目前国内几乎搜索不到全面讲解如何搭建前后端分离框架的文章，讲前后端分离框架思想的就更少了，而笔者希望在本文中能够全面、详细地阐述我们团队在前后端分离的摸索中所得到的搭建思路、最佳实践以及架构思想； &nbsp; （2）我们团队所搭建的前后端分离框架，并非只是将网上传播的知识碎...
Vue之mustache模板引擎
antRain的博客
12-25 1003
Vue之mustache模板引擎笔记记录参考历史上曾经出现的数据变为视图的方法mustache 参考 尚硅谷邵山欢（考拉老师）Vue之mustache模板引擎 为什么要学Vue源码 Vue组件由哪三部分组成? Vue父子组件如何通信? Vuex的作用是什么? Vue是怎么实现双向绑定的? Vue的最小化更新过程是怎样的? Vue如何实现指令系统的? 中高级前端、leader职位必会底层知识 为企业“造轮子”，开发通用组件 解决编程中遇见的问题 解决效率问题 vue源码非常庞大，各种机理很多：模
Vue源码探秘之mustache模板引擎
mhx123456789的博客
12-27 145
01-课程简介.mp4 02-什么是模板引擎.mp4 03-数组join()法介绍.mp4 04-反引号法.mp40 05-mustache的基本语法.mp4 06-正则表达式思路简介.mp4 07-底层tokens思想.mp4 08-手写实现mustache环境配置.mp4 09-手写实现Scanner类.mp4 10-手写将HTML变为tokens.mp4 11-手写将tokens嵌套起来.mp4 12-手写将tokens注入数据.mp4 13-手写lookup函数.mp4 14-手写parseArra
模板引擎－vue中的模板如何被解析，指令如何处理
weixin_30512785的博客
06-22 713
模板是什么 <div id='app'> 　　<div> 　　　　<input v-model="title"/> 　　　　<button v-on:click="add">submit</button> 　　</div> 　　<ul> 　　　　<li v-for="item ...
Vue源码探秘之 mustache模板引擎
Ben_Simons
02-05 447
什么是模板引擎 模板引擎是将数据要变为视图最优雅的解决方案 历史上曾经出现的数据变为视图的方法 • 纯DOM法：非常笨拙，没有实战价值 • 数组join法：曾几何时非常流行，是曾经的前端必会知识 • ES6的反引号法：ES6中新增的`${a}`语法糖，很好用 • 模板引擎：解决数据变为视图的最优雅的方法 mustache的基本使用 • mustache官方git： https://github.com/janl/mustache.js • mustac...
字符串里解析vue表达式
wickedvalley
11-28 4248
1.问题：使用v-for的时候，大家会迭代list，有时候不是单纯的显示出来，而是会在url里强制解析，{{item.url}}这样的写法就行不通了，如何写呢？ 2.返回数据格式如下： {id: 1, url: “bg.png”, year: “2017”, month: “3”, des: null, createTime: null} {id: 2, url: “bg2.png”, ye...
Vue深入学习1—mustache模板引擎原理
weixin_44019370的博客
07-23 194
mustache 是 “胡子”的意思，因为它的嵌入标记 {{ }} 旋转过来很像胡子，Vue中的 {{ }} 语法也引用了mustache，这也是我深入学习的目的。 1、原始js方式使 数据 变为视图 <ul id="list"></ul> <script> var arr = [ {"name":"张三", "age":12, "sex":"男"}, {"name":"李四", "age":13,
vue3文本插值与模板引擎冲突
最新发布
11-19
根据提供的引用内容，Vue3 中的文本插值与模板引擎不会冲突。Vue3 中的文本插值使用双大括号 {{}}，而模板引擎使用反引号 ``。Vue3 中的模板引擎可以通过使用 v-html 指令来渲染 HTML 代码。以下是一个示例： ```html <template> <div> <p>{{ message }}</p> <div v-html="htmlCode"></div> </div> </template> <script> export default { data() { return { message: 'Hello, Vue3!', htmlCode: '<span style="color: red;">This is HTML code.</span>' } } } </script> ``` 在上面的示例中，message 使用文本插值，而 htmlCode 使用模板引擎和 v-html 指令来渲染 HTML 代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值