2024年前端最全Vue源码：mustache模板引擎学习，2024年最新关于web前端开发的面试经验总结怎么写

本文链接：https://blog.csdn.net/2401_84619145/article/details/138763322

ajax

1)ajax请求的原理/ 手写一个ajax请求？
2)readyState？
3)ajax异步与同步的区别？
4)ajax传递中文用什么方法？

前12.PNG

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

// 每遍历一项，都要用DOM方法去创建li标签

let oLi = document.createElement(‘li’);

// 创建hd这个div

let hdDiv = document.createElement(‘div’);

hdDiv.className = ‘hd’;

hdDiv.innerText = arr[i].name + ‘的基本信息’;

// 创建bd这个div

let bdDiv = document.createElement(‘div’);

bdDiv.className = ‘bd’;

// 创建三个p

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.appendChild(hdDiv);

// 创建的节点是孤儿节点，所以必须要上树才能被用户看见

oLi.appendChild(bdDiv);

// 创建的节点是孤儿节点，所以必须要上树才能被用户看见

list.appendChild(oLi);

}

数据join法：曾几何时非常流行，前端必会

Document

ES6的反引号法：ES6中新增的`${a}`语法糖，非常好用

Document

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

二、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’