- 博客(78)
- 收藏
- 关注
RSS订阅原创 vite原理
目前绝大多数现代浏览器都已经支持ES module了，浏览器遇到在遇到内部的import引用的时候，会自动发起http请求，去加载对应的模块，vite也是借助了浏览器的这个特性，只接受ESM规范，在代码中不可以使用CommonJS，那么这个时候就不需要再去遍历依赖文件夹了，直接启动开发服务器，然后在浏览器请求依赖的时候，请求到哪个依赖，再根据需要对模块进行实时编译。Vite也是这样判断的。import请求，返回解析后的代码，得到的是一个可访问的url，但是public里的文件是不需要的，可以直接拿到图片。
2023-12-16 16:40:52
724
原创 Rollup看这一篇就够了
rollup官方有这样一句话：Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library（库） 或应用程序。这个其实是所有打包工具的功能，但是Rollup有什么不一样的呢？从他的应用场景来看，用到RollUp打包的都有vue/ vuex/ vue-router，对比webpack来看，Element UI是使用webpack作为打包的，相对来说，Rollup更擅长做一些js函数库、工具库的打包，但是Webpack更擅长处理UI库。
2023-08-20 23:58:37
2621
原创 为什么ESbuilld打包构建比较快？
并且Go语言多个线程之间还能共享相同的内存空间，而javascript的每个线程都有自己的内存堆，这意味着Go中多个处理单元，例如解释资源A的线程，可以直接读取资源B线程的运行结果，而js中相同的操作需要调用通讯接口woker.postMessage在线程间复制数据。也就意味着，Go语言编写的程序比js少了一个动态解释的过程。Rollup/Webpack并没有使用WebWoker提供的多线程能力，而ESbuild的实现尽可能的使用各个CPU核，特别是打包过程的解析/代码生成阶段已经实现完全并行的处理。
2023-08-20 18:36:20
628
原创 依赖预构建与静态资源处理
vite是一个基于浏览器原生ES-Module的前端构建工具。当你首次启动vite的时候，vite会在本地加载你的站点之前预构建项目依赖。依赖预构建仅仅适用于开发模式，并使用esbuild将依赖项转换为ES模块。预构建的内容是什么?一个项目里，存在很多模块，并不是所有的模块都会被预构建，只有裸依赖（bare import）会执行依赖预构建。用名称去访问的模块是裸依赖，用路径去访问的模块不是Node.js定义了bare import的寻址机制——在当前目录下的node_modules下寻找。
2023-08-20 18:14:30
288
原创 JS垃圾回收
GC就是Garbage Collection,程序工作过程中会产生很多垃圾，这些垃圾是程序不用的内存或者是之前用过了，以后不会再用的内存空间，而GC就是负责回收垃圾的。当然也不是所有的语言都会自带GC，比如Java、Python、Javascript等，也有没有GC的语言，比如C、C++等，那这种就需要我们程序员手动管理内存了，相对比较麻烦。
2023-01-12 16:05:45
352
1
原创 JS引擎的执行过程
所以这里就需要权衡到底是要快速的生成并执行还是要多花些时间生成并高效执行，一些引擎引入多个具有不不同时间/效率特性的优化编译器，以增加复杂性为代价，就是为了对这些权衡做更细粒度的控制。这中间还涉及到内存的权衡，机器码比字节码会。
2023-01-12 10:24:45
915
1
原创 再说原型链
关于原型链，已经被无数次的提起，每次回顾都有新的理解，今天我们再来说说原型链。我们知道，每一个javascript对象（除了null）在被创建的时候都会与另一个对象关联起来，这个对象就是我们所说的原型，每一个对象都会从原型中“继承”属性。好，问题来了，我们需要原型链来做些什么呐？
2023-01-02 17:44:35
351
原创 Event Loop
试想，假如javascript是多线程的，在一个线程中为某个DOM节点添加了任务，在另一个线程中又将该节点删除了，这就比较尴尬了，最后应该依照哪个结果呢？上面我们认识到了同步任务和异步任务，知道先执行完主执行栈中的同步任务，然后再执行异步任务，那么问题来了，异步任务中哪个任务被率先推入主执行栈中呢？6.查看异步任务队列中是否有微任务（注意是异步任务队列，遵循先进先出），依次执行。在javascript中，我们将所有的任务大体上分为两类：同步任务和异步任务。7.微任务执行结束，继续执行宏任务，打印出。
2022-12-30 17:40:35
780
4
原创 Redux中间件——Redux-thunk
Redux-thunk是作为redux的middleware存在的，thunk是函数编程界的一个专有名词，主要用于，也就是延迟计算。//内部返回的函数就叫thunk return function thunk() {console . log('thunk running,arg:' , arg) } } //我们通过调用wrapper来获得thunk const thunk = wrapper('warpper arg') //然后在需要的地方再去执行thunk thunk()
2022-12-19 10:40:20
1003
原创 Redux从理论到应用
随着单页面应用的开发日趋复杂，一个model的变化经常引起另一个model的变化，一个view的改变时常也会引起对应model以及另一个model的改变，javascript需要管理越来越多的state。Redux试图让state的变化变得可预测。
2022-12-17 16:09:11
439
原创 数组的扩展
上面代码的ES5写法中，push（）方法的参数不能是数组，所以只好通过apply（）方法变通使用push（）方法。扩展运算符内部调用的是数据结构的Iterator接口，因此只要具有Iterator接口的对象，都可以使用扩展运算符，比如Map结构。Array.from（）方法用于将两类对象转为真正的数组：类似数组的对象和可遍历的对象（包括ES6新增的数据结构Set和Map）。下面是扩展运算符取代apply（）方法的一个实际的例子，应用Math.max()方法，简化求出一个数组最大元素的写法。
2022-10-15 16:22:31
94
原创 js中常用的遍历方法以及区别
every（）方法使用指定函数检测数组中的所有元素：如果数组中检测到有一个元素不满足，则整个表达式返回false，且剩余的元素不会再进行检测。some（）方法用于检测数组中的元素是否满足指定条件。所以我们可以看出来，for in就是专门用来遍历对象的，for of可以用来遍历数组、字符串、数组对象、map、set等拥有迭代器的集合，但是不能遍历对象，因为对象没有迭代器。map（）方法定义在js的Array中，他返回的是一个新的数组，数组中的元素为原始数组调用函数处理后的值。
2022-10-12 21:34:39
1372
3
原创 Proxy
Proxy用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”，即对编程语言进行编程。Proxy可以理解为，在目标对象之前架设一层"拦截"，外界对该对象的访问，都必须先通过这层拦截 ，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy的原意是代理，用在这里表示它来”代理“某些操作，可以译为”代理器“。} , {`);`);`);`);`);
2022-10-11 16:19:12
310
原创 函数的扩展
这时，就出现了双重默认值。上面的代码中，函数fetch没有第二个参数时，函数参数的默认值就会生效，然后才是解构赋值的默认值生效，变量method才会取到默认值GET。指定了默认值后，函数的length属性，将返回没有指定默认值的参数个数。这时，无法只省略该参数，而不省略后面的参数，除非显式的输入undefined。上面的代码中，参数p的默认值为x+1,这时，每次调用函数的时候，都会重新计算x+1,而不是默认p等于100。上面代码中，length属性的返回值，等于函数的参数个数减去了指定默认值的参数个数。
2022-09-26 22:22:52
276
原创 element ui树形表格数据懒加载
先要在第一个生命周期中请求最顶级的数据 并给和表格data属性绑定的tableData赋值item.hasChildren属性为true 这条数据的前面就会出现那个表示可以展开的小箭头 为false 则不展示。在项目实战中，我们经常会遇到数据量大的情况，假如一次性从后端接口中获取所有的数据，无疑给了服务端很大的压力。然后判断接口返回的数据如果不是空的 则将他的子集循环 将他们的hasChildren 也赋为true 表示数据项是可以接着展开的。这里我们通过第一个参数就是触发事件的那条数据的id去调接口。..
2022-08-04 20:27:14
1830
2
原创 关于el-table列表渲染
在项目中，80%的项目都需要我们渲染列表。假如我想封装一个渲染列表的组件，那么我们应该怎么动态的从接口中拿到数据并且优雅的渲染一个列表呢？本来这应该是一个简单且多答案的问题，但是经过一个项目做下来，发现这个方法是最灵活、最简单、最实用的方法。我们分为表头数据和表体数据来渲染。...
2022-08-04 19:43:31
751
原创 Ts——项目实战应用enum枚举
如上，我们定义了一个数字枚举， Up使用初始化为 1。其余的成员会从 1开始自动增长。换句话说， Direction.Up的值为 1， Down为 2， Left为 3， Right为 4。现在， Up的值为 0， Down的值为 1等等。当我们不在乎成员的值的时候，这种自增长的行为是很有用处的，但是要注意每个枚举成员的值都是不同的。在这里我们只简单的回顾一下枚举的使用。在公共文件中列举出来状态枚举。有时候还可以暴露一个公共符号。在你需要的页面引入公共文件。可以以对象的形式暴露出去。...
2022-08-04 16:17:26
990
原创 Vue3组件间通信
父组件通过 ref 获取到子组件并调用其方法或访问数据。子组件通知父组件触发一个事件，并且可以传值给父组件。子组件可以通过 expose 暴露自身的方法和数据。
2022-08-04 14:10:09
159
原创 promise详解
promise是异步编程的一种解决方案，比起传统的解决方案——回调函数和事件——更加的强大。在项目中，我们经常会遇到异步的问题，在之前，我们通常使用回调函数来解决异步编程，但是在一些比较复杂的情况下，我们经常会陷入。promise能够很好的帮助我们解决这个问题。早就听说过Promise的大名，但是promise到底是个什么东西呢？是个类？对象？数组？函数？来，先给大家拉出来溜溜。这里我们可以看到，原来这个promise是一个构造函数，并且在它自己的身上有all、reject、resolve。...
2022-08-04 11:32:07
262
原创 react扩展7_renderProps
例如，我们有Parent、A、B三个组件，想要使parent和A形成父子组件关系，A和B形成父子组件关系。但是，我们发现B组件并没有被渲染，这是因为，在组件标签中间写的内容作为prop传值传给组件A，属性名称为。但是，我们有时候需要在Parent组件中一气呵成的嵌套所有的组件，类似于这样。将B组件放到A组件中，将A组件放到Parent组件中，显示、传值一切正常。基于组件开发，我们经常在各个组件之间形成嵌套关系。.在渲染时需要在A组件中渲染出来才能显示。.........
2022-07-29 22:38:06
183
原创 react扩展4_EffectHook
在上一文中，我们已经能够模拟出函数式组件的state状态了，但是还没有办法能模拟出生命周期。今天我们来使用另一个Hook———也就是说，可以把useEffectHook看做是。1.一个原始值为0的变量，每经过1秒，自增1.在函数式组件中，我们可以借助。2.点击卸载组件的按钮可以将整个组件卸载。我们同样用一个实例来向大家讲解。3.在卸载之前需要将定时器关掉。在类式组件中，我们完全可以使用。来模拟出同样的效果。...
2022-07-29 14:38:15
226
原创 react扩展3_stateHook
在之前的学习中我们学过了类式组件和函数式组件，但是我们知道函数式组件不像类式组件一样有实例对象，所以函数根本没有this一说，更不要说使用state什么的了，那么函数组件就没什么用了。在新的react中，定义了stateHook，用来对函数式组件定义state状态，并进行状态数据的读写操作。什么是stateHook呢？...
2022-07-29 10:41:25
55
原创 react扩展1_setState
setState更新状态的两种写法（1）setState（stateChange，[callback]）------对象式的setState（2）setState(updater,[callback]) ------函数式的setState总结：1.对象式的setState是函数式的setState的简写方式（语法糖）2.使用原则：...
2022-07-28 15:14:11
46
原创 解决响应式数据依赖响应式数据无响应问题
我先在页面中声明了一个响应式的变量A，然后因为需求又声明了另一个响应式的变量B，变量B的状态依赖变量A的改变而改变，然而在实际应用中发现，在A改变之后，B并无响应。因为B仅在第一次运行setup时进行初始化，因此它只会进行初始化，而不会更新。如果希望B在A更新时进行更新，可以使其成为依赖于A的computed属性。...
2022-07-22 12:03:15
494
原创 find、filter、map的区别
过滤数组元素，返回过滤后的数组，若没有符合条件的元素，则返回空数组。对每个数组元素进行相同的操作，返回一个与原数组length相等的数组。find查询数组中符合条件的第一个元素，如果没有则返回空数组。...
2022-07-22 11:22:49
166
1
原创 Vue3无缝滚动----vue3-seamless-scroll
main.js中引入使用组件配置listv-modeldirectionisWatchhovercountlimitScrollNumstep指南在这里
2022-06-30 22:15:18
9484
1
原创 echarts可视化
引入echarts按需引入echarts上面的代码会引入echarts的所有图表和组件，但是假如你不想引入所有的话，你可以按需引入。常用属性可以参考官网的配置项https://echarts.apache.org/zh/option.html
2022-06-30 21:49:31
196
原创 字符串的新增方法
该方法返回一个斜杠都被转义（即斜杠前面再加一个斜杆）的字符串，往往用于模板字符串的处理方法。如果原字符串的斜杠已经转义，那么String.raw（）会进行再次转义。includes(),startsWith(),endsWith()传统上，javascript只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6又提供了三种新方法。这三个方法都支持第二个参数，表示开始搜索的位置。上面代码表示，使用第二个参数n时，endsWith的行为与其他两个方法有所不同。它针对前n个字符
2022-06-09 15:05:52
312
原创 字符串的扩展
ES6为字符串添加了遍历器接口，使得字符串可以被for…of遍历循环。模板字符串模板字符串是增强版的字符串，用反引号（`）标识。它可以当做普通字符串来使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。上面代码中的模板字符串，都是用反引号表示。如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。如果用模板字符串表示多行字符串，所有的空行和缩进都会被保留在输出之中。上面的代码中，所有模板字符串的空格和换行，都是被保留的，比如 标签前面会有一个换行。如果你不想要这个换行，可以使用方法消除它。
2022-06-09 11:23:21
61
原创 变量的解构赋值
以前，为变量赋值，只能直接指定值。ES6允许写成下面这样。本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。如果解构不成功，变量的值就等于undefined。以上两种情况都属于解构不成功，foo的值都会等于undefined。另一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，结构依然可以成功。如果等号的右边不是数组（或者严格来说，不是可遍历的结构），那么将会报错。上面的语句都会报错，因为等号右边的值，要么转为对象后不具备I
2022-06-08 14:33:28
291
原创 let和const命令
let用法类似于var，但是所声明的变量只在let命令所在的代码块内有效。for循环的计数器，就很适合使用let命令。上面的代码中，计数器i只在for循环体内有效，在循环体外引用就会报错。下面的代码如果使用var，最后输出的是10.上面的代码中，变量i是var命令声明的，在全局范围内都有效，所以全局只有一个变量i。每一次循环，变量i的值都会发生改变，而循环内被赋给数组a的函数内部的console.log(i)，里面的i指向的就是全局的i。也就是说，所有的数组a的成员里面的i，指向的都是同一个i，导致
2022-06-07 14:48:05
119
原创 javascript中的继承----类式继承
javascript主要包括类式继承、原型继承、拷贝继承这三种继承方式。类式继承大多数面向对象的编程都支持类与类继承的特性，但是javascript是基于原型的编程语言，他并不支持这些特性，只能通过其他方法定义并关联多个相似的对象，如new和instanceof。不过在后来的ES6中新增了一些元素，比如class关键字，但是这个并不意味着javascript中是有类的，class只不过是构造函数的语法糖而已。类式继承的主要思路是：通过构造函数实例化对象，通过原型链将实例对象关联起来。下面将对类式继承进
2022-05-13 15:01:36
284
1
原创 闭包（五）----一个常见的循环
function foo(){ var arr = []; for(var i = 0; i < 2; i++){ arr[i] = function(){ return i; } } return arr;}var bar = foo();console.log(bar[0]());//2 以上的代码运行结果是2，而不是预想的0。接下来我们用执行环境图示的方法，来看看到底是哪里出了问题。执行流首先创
2022-05-12 17:17:04
107
原创 闭包（四）----IIFE
在闭包（二）中我们就了解过,严格来说，IIFE并不是闭包，因为他并不满足函数成为闭包的三个条件。但是一般的，人们认为IIFE就是闭包。实现函数跟随一对圆括号（）表示函数调用//函数声明语法function test(){};test();//函数表达式var test=function(){};test();但是有时需要在函数定义之后，立即调用该函数。这种函数就叫做立即执行函数，全称为立即调用的函数表达式IIFE。注意：js引擎规定，如果function关键字出现在行首，一律解释成
2022-05-12 16:15:18
73
原创 闭包（三）----执行环境
本文我们将从执行环境的角度来了解闭包。下面按照代码执行流的顺序对该图示进行说明：function foo(){ var a = 2; function bar(){ console.log(a); } return bar;}var baz = foo();baz();【1】代码执行流进入全局执行环境，并对全局环境中的代码进行声明提升。【2】执行流执行第9行代码var baz=foo（）；调用foo（）函数，此时执行流进入foo（）函数执
2022-05-11 22:01:47
86
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人