Vue源码：mustache模板引擎学习，web开发技术发展

最新推荐文章于 2024-04-12 09:41:40 发布

2401_84097427

最新推荐文章于 2024-04-12 09:41:40 发布

阅读量1k

点赞数 9

分类专栏：程序员文章标签：前端 vue.js 学习

本文链接：https://blog.csdn.net/2401_84097427/article/details/137380170

版权

程序员专栏收录该内容

262 篇文章 0 订阅

订阅专栏

模板引擎：解决数据变为视图的最优雅的方法

二、mustache基本使用 — 怎么用

===============================================================================

2.1 mustache库简介

mustache官方git
mustache是"胡子"的意思，因为它的嵌入标记**{{}}**非常像胡子
{{}}的语法也被Vue沿用

在这里插入图片描述

mustache是最早的模板引擎库，诞生早于Vue，它的底层实现机理在当时非常有创造性，轰动性，为后续模板引擎的发展提供了崭新的思路

2.2 mustache库基本使用

必须要引入mustache库，可以在bootcdn.com找到它
mustache的模板语法非常简单，比如前述案例的模板语法如下：

#arr表示开始循环arr数组，/arr表示arr数组循环结束，内部使用元素直接使用键进行标识即可。

在这里插入图片描述

2.2.1 循环对象数组

在这里插入图片描述

templateStr：模板字符串

data：数据

Document

2.2.2 不循环

在这里插入图片描述

Document

2.2.3 循环简单数组

在这里插入图片描述

循环简单数组使用.标识每一项数据

Document

2.2.4 数组可以嵌套

在这里插入图片描述

Document

2.2.5 布尔值

在这里插入图片描述

可以通过#temp中temp的bool值来决定内部内容是否显示

Document

三、mustache的底层核心机理 — 底层机理

===================================================================================

3.1 mustache库不能用简单的正则表达式思路是先

在较为简单的示例情况下，可以用正则表达式实现

模板字符串：在这里插入图片描述

数据：

在这里插入图片描述

模拟实现：

字符串的replace方法，可以第一个参数接收一个正则，第二个参数接收一个函数，有四个参数。

第一个参数代表正则匹配的部分，第二个参数代表()中捕获到的内容，第三个参数代表位置，第四个参数代表源字符串

Document

但是在情况复杂时，正则表达式的思路肯定就不行了。比如这样的模板字符串，是不能用正则表达式的思路实现的

模板字符串：在这里插入图片描述

3.2 mustache库的机理

在这里插入图片描述

3.3 什么是tokens？

tokens是一个JS的嵌套数组，说白了，就是模板字符串的JS表示
它是"抽象语法树"、"虚拟节点"等等的开山鼻祖

模板字符串：

在这里插入图片描述

tokens：在这里插入图片描述

tokens是将字符串转换成了JS的嵌套数组，如果是纯文本（包括HTML标签），会被标识为text

如果是带有双括号（{{}}）的参数，会被标识为name

3.4 非常有创造性的、轰动性的模板解析原理

在这里插入图片描述

3.5 循环情况下的tokens

当模板字符串中有循环存在时，它将被编译为嵌套更深的tokens

在这里插入图片描述

3.6 双重循环情况下的tokens

当循环是双重的，那么tokens会更深一层

在这里插入图片描述

3.7 mustache库的机理

在这里插入图片描述

mustache库底层重点要做两个事情：

将模板字符串编译为tokens形式
将tokens结合数据，解析为dom字符串

3.8 观察token

把256行这里在这里插入图片描述

改为在这里插入图片描述

四、手写实现mustache库 — 手写

===============================================================================

4.1 使用webpack和webpack-dev-server构建

模块化打包工具有webpack（webpack-dev-server）、rollup、Parcel等

在这里插入图片描述

mustache官方库使用rollup进行模块化打包，而我们使用webpack（webpack-dev-server）进行模块化打包，这是因为webpack（webpack-dev-server）能更方便的在浏览器中（而不是nodeJS环境中）实时调试程序，相比nodeJS控制台，浏览器控制台更好用，比如能够点击展开数组的每一项
生成库是UMD的，可以同时在nodeJS环境中使用，也可以在浏览器环境中使用。实现UMD不难，只需要一个**“通用头”**即可

4.2 注意webpack和webpack-dev-server的版本

webpack最新版是5，webpack-dev-server最新版是4，但是目前最新版兼容成都不好，建议使用如下版本：

“webpack”: “^4.44.2”,

“webpack-cli”: “^3.3.12”,

“webpack-dev-server”: “^3.11.0”

4.3 webpack.config.js文件

const path = require(‘path’);

module.exports = {

mode: ‘development’,

entry: ‘./index.js’,

output: {

filename: ‘bundle.js’

devServer: {

contentBase: path.join(__dirname, ‘www’),

compress: false,

port: 8080,

// 虚拟打包的路径，bundle.js文件没有真正的生成

publicPath: ‘/xuni/’

}

4.4 开发注意事项

学习源码时，源码思想要借鉴，而不要抄袭。

要能够发现源码中书写精彩的地方。

将独立的功能拆分为独立的js文件中完成，通常是一个独立的类，每个单独的功能必须能独立的"单元测试"。
应该围绕中心功能，先把主干完成，然后修剪枝叶。
功能并不需要一步到位，功能的拓展要一步步完成，有的非核心功能甚至不需要实现。

4.5 将模板字符串变为tokens

在这里插入图片描述

4.6 生成tokens数组

在这里插入图片描述

4.7 将零散的tokens嵌套起来

4.7.1 栈是什么

在这里插入图片描述

4.8 将tokens结合数据，解析为dom字符串

在这里插入图片描述

粗浅的完成简单的目标：

在这里插入图片描述

不带有#标记

在这里插入图片描述

#标记的tokens，需要递归处理它的下标为2的小数组
现在遇到一个问题，JS不认识点符号

在这里插入图片描述

五、源码

===============================================================

项目目录

在这里插入图片描述

index.html

Document

index.js

import parseTemplateToTokens from “./parseTemplateToTokens”;

import renderTemplate from “./renderTemplate”;

// 全局提供HK_TemplateEngine方法

window.HK_TemplateEngine = {

// 渲染方法

render(templateStr, data) {

// 调用parseTemplateToTokens方法，让模板字符串可以变成数组

let tokens = parseTemplateToTokens(templateStr);

// 调用renderTemplate函数，让tokens数组变为dom字符串

return renderTemplate(tokens, data);

}

lookup.js

/**

功能是可以在dataObj对象中，寻找用连续点符号的keyName属性
比如，dataObj是
{
a:{
```
b:{
```
```
  c:100
```
```
}
```
}
}
那么lookup(dataObj, ‘a.b.c’)结果就是100

export default function lookup(dataObj, keyName) {

// 看看keyName中有没有点符号

if (keyName.indexOf(‘.’) !== -1 && keyName !== ‘.’) {

// 如果有点符号，那么拆开

let keys = keyName.split(‘.’);

// 设置一个临时变量，这个临时变量用于周转，一层一层找下去

let temp = dataObj;

// 每找一层，就把它设置为新的临时变量

for (let i = 0; i < keys.length; i++)

temp = temp[keys[i]];

return temp;

}

// 如果没有点符号

return dataObj[keyName];

};

nextTokens.js

/**

折叠tokens，将#和/之间的tokens能够整合起来，作为它的下标3
@param tokens
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

资料领取方式：点击这里免费领取前端全套学习资料

css源码pdf

JavaScript知识点
= dataObj;

// 每找一层，就把它设置为新的临时变量

for (let i = 0; i < keys.length; i++)

temp = temp[keys[i]];

return temp;

}

// 如果没有点符号

return dataObj[keyName];

};

nextTokens.js

/**

折叠tokens，将#和/之间的tokens能够整合起来，作为它的下标3
@param tokens
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

[外链图片转存中…(img-wYTqj89U-1712228541509)]

[外链图片转存中…(img-dv9gdgqA-1712228541510)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

[外链图片转存中…(img-z3w1quGw-1712228541510)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

资料领取方式：点击这里免费领取前端全套学习资料

[外链图片转存中…(img-UDykhwQ2-1712228541510)]

[外链图片转存中…(img-2vJTxJv5-1712228541510)]

2401_84097427

关注

9
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
Vue源码：mustache模板引擎学习，web开发技术发展

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
复制链接

扫一扫