- 博客(28)
- 收藏
- 关注
RSS订阅原创 webpack的基础学习
mode的development和production的区别:development则打包的时候仍然会保留原有的未调用的函数production在打包的时候会将没使用到的包去掉，从而很大程度上的减少打包后的体积
2022-03-18 12:38:24
803
原创 Vite的学习
Vite和Vue-cli的对比Vite在开发模式下不需要打包可以直接运行，使用的是ES6的模块化加载规则。 Vue-cli开发模式下必须对项目打包才可以运行 Vite基于缓存的热更新 Vue-cli基于webpack的热更新不打包不会对浏览器造成阻塞吗？不会，因为Vite可以开启http2来启动多路复用Vite生产环境环境下需要打包吗？需要，尽管原生 ESM 现在得到了广泛支持，但由于嵌套导入会导致额外的网络往返，在生产环境中发布未打包的 ESM 仍然效率低下（即使使用 HTTP/2）。为
2022-03-11 11:08:39
335
原创 Vue3新的组件和调整
目录1、Fragment2、Teleport3、Suspense4、Vue3对部分API的调整1、Fragment在Vue2中：组件必须有一个根标签 在Vue3中：组件可以没有根标签，内部会将多个标签包含在一个Fragment虚拟元素中 好处：减少标签层级，减小内存占用2、Teleport什么是Teleport？——Teleport是一种能够将我们的组件html结构移动到指定位置的技术。<teleport to="body"> <d
2022-03-03 14:25:29
579
原创 Vue3学习其他常用CompositionAPI
1、shallowReactive和shallowRefshallowReactive：只处理对象外层数据响应式（浅响应式） shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理。 什么时候使用？ 如果有一个对象数据，结构比较深，但变化时只是外层属性变化===>shallowReactive 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换===>shallowRef ...
2022-03-01 16:30:32
418
原创 vue2和vue3的响应式原理学习
vue2.x的响应式实现原理对象类型:通过Object.defineProperty()对属性的读取，修改进行拦截(数据劫持) 数据组类型:通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）Object.defineProperty(data,'count',{ get() {}, set() {}})存在问题新增属性,删除属性，界面不会更新,可以用以下方式进行新增删除//新增//第一种方式this.$set(obj,'属性','值')//
2022-02-22 14:41:38
230
原创 JavaScript执行机制学习总结
执行机制相关知识点1、JavaScript是一门什么语言JavaScript是一门单线程语言，比如说页面上有一个DOM，一个线程删除此DOM节点，另一个线程给节点添加样式。2、同步和异步如果JS中不存在异步，只能自上而下执行，如果上一行解析时间很长，那么下面的代码就会被阻塞。 对于用户而言，阻塞就意味着"卡死"，这样就导致了很差的用户体验。同步：比如说在一个函数返回的时候，就能够得到预期结果: console.log()。异步：在函数返回的时候，调用者...
2022-02-07 23:00:59
557
原创 栈的学习与AST抽象语法树
因为直接编译成正常的抽象语法树是十分困难的，所以诞生出了抽象语法树什么是抽象语法树？指针会一个字符一个字符的遍历，但关键的难点是如何匹配对应的标签字符，从中将里面的值取出来，所以就有了栈这个思想。一道典型的面试题实现代码// 栈题目function smartRepeat(templateStr){ var index =0; // 栈1，存放数字 var stack1 = [] // 栈2,存放临时字符 var stac...
2022-01-19 11:20:35
287
原创 Promise学习
基本使用//成功状态function requestData () { // 模拟请求 return new Promise((resolve, reject) => { setTimeout(() => { resolve('世界你好') }, 1000) })}requestData().then(res => { console.log(res) // 一秒钟后输出 '世界你好'}, err => { consol
2022-01-18 01:02:23
582
原创 常用数组方法
findIndexfindIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。findIndex() 方法为数组中的每个元素都调用一次函数执行：当数组中的元素在测试条件时返回true时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。 如果没有符合条件的元素返回 -1用途:可配合splice删除找到的项例子// 点击选中门店 storeDataClick (item, index) { thi..
2022-01-18 00:52:51
100
原创 正则表达式的学习
基础:\d 数字g 全局()捕获方法:replace 去掉数字search 找到第一个数字的位置match 找寻所有符合的字符，也可进行捕获test 查看是否包含了数字
2022-01-09 11:56:30
126
原创 双向数据绑定原理学习
var obj={ a:{ m:{ n:5 } }, b:4}index.jsimport defeineReactive from "./defeineReactive"import Observer from "./Observer"import observe from "./observe"import Watcher from "./Watcher"var obj = { a: { ...
2021-12-29 22:37:09
1476
原创 Diff算法学习总结
diff算法精细化流程引入index.jsimport h from './mysnabbodm/h'import patch from './mysnabbodm/patch'// const myVnode = h('h1',{},'你好')const myVnode1 = h('ul',{},[ h('li',{key:'A'},'A'), h('li',{key:'B'},'B'), h('li',{key:'C'},'C'), h('li.
2021-12-17 23:17:13
142
原创 常用字符串方法
subStrsubstr() 方法可在字符串中抽取从start下标开始的指定数目的字符。var str="Hello world!"document.write(str.substr(3))//输出lo world!var str="Hello world!"document.write(str.substr(3,7))//输出
2021-12-04 11:37:27
424
1原创 el-checkbox的坑（点击全选状态改变了但是不生效）
正常绑定下的el-checkbox可以改变数据，但是如果在el-checkbox-group下的el-checkbox，要实现全选就必须控制el-checkbox-group下的v-model绑定的数组。就是要在el-checkbox-group下的数组存在el-checkbox的值
2021-11-19 14:47:44
2304
原创 Diff算法1(环境配置)
index.html新建webpack.config.jsconst path = require('path');module.exports = { // 入口 entry: './src/index.js',// 出口 output: { // 虚拟打包路径 publicPath: 'xuni', // 打包出的文件名 filename: 'bundle.js', }, devServer:{ ...
2021-11-17 23:07:40
130
原创 Mustache低层原理实现5
如果遇到'.'的情况就需要进行拆分和解析，所以游乐lockup函数如果有'.'符号就进行拆分，如果没有就直接返回数组对象。lockup.js/* 可以在dataObj对象中，寻找用连续点符号的keyName属性 比如 a:{ b:{ c:100 } }*/export default function lookup(dataObj,keyName){ // 看...
2021-11-15 23:49:43
422
原创 Mustache低层原理实现4
目的:将零散的token嵌套起来，将“#”和“/”下面的内容当做一项token引出问题:不知道嵌套到第几层解决算法：栈（后进先出）上代码：nestTokens.js
2021-11-01 23:10:11
81
原创 .sync修饰符的使用
使用的框架库为vant目的:想要封装一个自己的van-popup的公共组件,并实现频繁的展开和显示。问题:在父子组件传值的时候时候直接使用props改变父组件的值会报错，我们想要子组件的属性和父组件的属性进行“双向绑定”，所以就引出了.sync。解决方案:先了解一下.sync修饰符实现双向绑定，直接上代码:chooseShop.vue(子组件)<!--选择门店面板--><template> <div> <v..
2021-11-01 10:29:53
382
原创 Mustache低层原理实现3
目的直接上代码index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1..
2021-10-28 23:05:07
79
原创 Mustache底层实现原理2
1、首先要拆分格式 原理: 逐级拆分,scanUntil用于移动指针，一直移动到指定的"{{"字符，将指针移动的字符用word记录下来，找到“{{”后用scan将字符跳过，不截取"{{"这个字符的内容，将字符的长度赋值给指针，使指针移动后两位，继续采用scanUntil进行截取,然后再找到"}}"字符，跳过这个字符如此循环。2、上代码Scanner.js// 扫描器export default class Scanner{ constructor(templ...
2021-10-26 23:04:45
92
原创 Mustache底层机制原理1
最简单的模板引擎实现原理: var template = `<h1>我买了一个{{thing}} 花了{{money}} 好{{mood}}</h1>` var data = { thing:'酒', money:'3999', mood:'贵' } // findStr 匹配的正则表达式的值 // $1 捕获到这个括号里面的值 //结合data对象进行智能转换 function ren
2021-10-22 23:28:12
50
原创 Mustache的基本语法
循环数组：{{#arr}}{{/arr}}数据填入：Mustache.render(templateStr,data)templateStr-->表示模板字符串<div>{{name}}</div>data-->表示数据，例如：循环对象数组实例:var str =` <ul> {{#arr}} <li> <div>{{name}}的基本信息</div> .
2021-10-20 22:25:40
773
原创 事件处理程序
DOM2事件处理程序addEventListener()接收三个参数： 1、事件名 2、事件处理函数 3、布尔值（true表示在捕获阶段，false表示在冒泡阶段）添加的事件处理程序只能使用removeEventListener()删除，且必须是同一个事件处理函数IE事件处理程序attachEvent() 与addEventListerner接收的参数一样，区别是addachEvent()的第一个参数是"onclick",而不是DOM...
2021-09-25 21:46:25
62
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人