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

ajax

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

ajax.PNG

前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’

      },

      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字符串

      Vue

      • 什么是MVVM?

      • mvvm和mvc区别?它和其它框架(jquery)的区别是什么?哪些场景适合?

      • 组件之间的传值?

      • Vue 双向绑定原理

      • 描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程?

      • 虚拟 DOM 实现原理

      • Vue 中 key 值的作用?

      • Vue 的生命周期

      • Vue 组件间通信有哪些方式?

      • vue 中怎么重置 data?

      • 组件中写 name 选项有什么作用?

      • Vue 的 nextTick 的原理是什么?

      • Vuex 有哪几种属性?

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

      nLmNzZG4ubmV0L0thaVNhckg=,size_16,color_FFFFFF,t_70)

      4.7 将零散的tokens嵌套起来


      4.7.1 栈是什么

      在这里插入图片描述

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

      Vue

      • 什么是MVVM?

      • mvvm和mvc区别?它和其它框架(jquery)的区别是什么?哪些场景适合?

      • 组件之间的传值?

      • Vue 双向绑定原理

      • 描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程?

      • 虚拟 DOM 实现原理

      • Vue 中 key 值的作用?

      • Vue 的生命周期

      • Vue 组件间通信有哪些方式?

      • vue 中怎么重置 data?

      • 组件中写 name 选项有什么作用?

      • Vue 的 nextTick 的原理是什么?

      • Vuex 有哪几种属性?

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

      • 17
        点赞
      • 15
        收藏
        觉得还不错? 一键收藏
      • 0
        评论

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

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

      请填写红包祝福语或标题

      红包个数最小为10个

      红包金额最低5元

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

      抵扣说明:

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

      余额充值