- 博客(44)
- 收藏
- 关注
RSS订阅原创 【手写promise——基本功能、链式调用、promise.all、promise.race】
关于动机，无论是在工作还是面试中，都会遇到Promise的相关使用和原理，手写Promise也有助于学习设计模式以及代码设计。本文主要介绍了如何使用自己的代码去实现Promise的一些功能。以下是本篇文章正文内容// 1、默认状态 - PENDING// 2、内部维护的变量值// 存放回调try {return new Promise((resolve, reject) => { // 支持链式调用})})})} else{// 普通值。
2023-08-27 00:58:53
1229
1
原创 渐进增强和优雅降级区别
渐进增强和优雅降级是在css3出现之后才火起来的。比如IE6等，不支持css3，但是css3的样式又特别优秀，所以在高级浏览器中应用css3样式，在低版本中保持基本功能。渐进增强和优雅降级也是一种程序开发思想，比如在vue源码中，数据更新和渲染就有运用优雅降级这一思想。
2023-08-13 23:05:11
356
原创 使用webpack插件webpack-dev-server 出现Cannot GET/的解决办法
使用webpack插件webpack-dev-server 出现Cannot GET/的解决办法
2023-08-07 23:24:44
712
原创 关于webpack的基本配置
为什么要有webpack构建和打包？更好的模块化管理。webpack支持模块化规范：代码分割成独立模块，并管理模块之间的依赖关系。资源打包。将js文件、css文件、图片等多个资源打包成单个或多个文件，减少请求，提高加载性能性能，且webpack支持资源压缩、优化、缓存等处理。转换和编译。如用Bable将ES6+代码转为向后兼容版本如ES5，将sass、less、stylus转为浏览器能识别的css代码，将ts转为js等。代码拆分和懒加载。
2023-08-06 23:31:04
964
原创 什么是状态管理工具
1、全局对象的数据时普通的js数据类型，不是响应式的。即全局对象数据被修改了，界面也没法做出对应的更新。2、全局对象的修改无法追踪，也就是说应用中的任何一处代码，都有机会拿到全局数据，并做出对应的修改。因此呢，很难搞清楚是哪个文件哪行代码修改了全局数据，造成bug难以追踪。3、vue是组件化的，组件的构成就像一棵树，全局数据一般从父组件一层层传递给子组件。直接从一个组件获取数据被视为一种反模式，这样很容易造成数据混乱。因此，需要一个状态管理工具。状态管理三杰：vuex、redux、mobx。
2023-07-29 22:41:16
457
原创 【vue3+ts】TypeError: Cannot read properties of undefined (reading ‘commit‘)
vue3+ts项目，使用store，打印store的值，显示undefined。
2023-07-26 22:38:48
1849
原创 【vue3 自定义组件中使用v-model实现双向绑定】
比如我们有自定义的Form组件、Input组件。如果Form组件想拿到Input组件中input框输入的内容，我们可以让Form这个父组件给Input子组件传值（不能直接修改子组件的props），子组件定义变量记录prop的值，子组件监听数据变化，再用传给父组件，父组件接收调用方法去修改value。vue3可以使用组件v-model去解决上述问题，从而实现组件的双向数据绑定。组件v-model其实是语法糖。
2023-07-22 18:04:57
2151
原创 【从输入URL到渲染页面的整个过程】
当再次请求时，客户端带上资源标识，服务端去重新计算资源标识，和客户端带过来的比较，如果相同则说明文件未修改，返回304状态码；第二种是Last-Modified，这个值记录的是资源最后的修改时间，如果修改了，则值是不一样的。在这个时间内进行再次请求，浏览器会去判断缓存是否失效，未失效的话请求本地缓存并返回资源，如果缓存失效了则再去请求服务器。使用域名的好处就是，域名便于记忆，其次，如果服务器做了负载均衡，则ip不是唯一的，ip有多个，使用DNS就可以将域名解析成对应机器的ip。强缓存的优先级大于协商缓存。
2023-06-18 23:07:25
892
原创 【工作中遇到的性能优化问题】
页面左侧有一列表数据，点击列表项会查对应的表格数据和表单信息（表单是根据数据配置生成的），并在右侧展示。如果数据量大，则非常卡。需要对此页面进行优化。
2023-06-10 14:01:26
1098
原创 使用v-lazy实现VUE3图片懒加载技术
图片懒加载是常见的性能优化方法，在图片很多或加载图片出现网络延迟的情况下，使用懒加载可以减少网络请求、提高用户体验感。实现原理：在图片没进入可视区域前，使用默认的图片；在进入可视区域并加载好之后，再替换图片的默认src路径，展示真实图片。vue3已经封装好了v-lazy自定义指令，直接安装使用即可也可以用yarn安装3、template中使用判断图片是否进入可视区域使用的是 IntersectionObserver API ，MDN详见：https://developer.mozilla.org/z
2023-05-13 20:34:09
1815
1
原创 【ElementUI如何上传文件夹】
项目用的Vue3+ElementUI+TS，要实现一个上传文件夹的功能。官网的Element-plus目前没有上传文件夹的功能，虽然支持上传多个文件，但是项目要求要带相对路径，所以需要做一个上传文件夹的功能。
2023-04-28 18:22:21
3325
原创 【使用nginx部署到服务器后，文件上传提示405】
使用ElementUI的文件上传组件（前端vue3、后端springboot），本地能正常上传到后台。
2023-04-25 13:52:51
3932
原创 【git安装、使用、常用命令】
1、下载链接： Git（Git 主程序）https://git-scm.com/downloads根据自身电脑操作系统选择下载，默认安装，一直next就可以了。装好了，打开文件目录，右键单击“Git Bash Here”，即可弹出Git命令框。2、可根据自身需要下载图形界面图形界面操作工具，TortoiseGit： https://download.tortoisegit.org/tgit/可根据需要再下载中文语言包，安装完语言包之后，右键→TortoiseGit→setting，把languag
2023-04-23 16:42:43
665
原创 前端项目上线后，浏览器缓存未刷新问题
http的缓存机制是一种优化策略。但也会出现文件变动后浏览器没有更新的问题。综上，入口文件不缓存或采用协商缓存，其他静态资源使用强缓存，url拼接hash值或者打包时给文件名加上hash值。
2023-03-07 21:52:58
6102
原创 【Vue组件通信方式---超全！！！！！】
组件通信在工作中很常见，但通讯的方式很多且使用场景也不同，故在此记录和总结。父组件level1，向level2传递属性a、b、c和事件getA()、getB()、getC()return {getA() {组件level2使用，接收父组件未在props和emits中定义的属性和事件return {getX() {
2023-01-17 12:31:05
399
原创 【Vue源码分析——nextTick的使用及实现源码】
在开发中，也会遇到用nextTick的情况，面试中也经常考到。因此，总结了下nextTick的使用及实现原理。 {
2022-11-26 14:04:51
734
原创 【JS执行机制——事件循环机制】
JS是一门单线程语言，那就意味着一次只能执行一个任务且按顺序执行。如果有耗时任务，也必须等着它执行完了才能执行下一个任务。问题来了，浏览网页的时候，某个高清图片需要加载很久，那网页岂不是卡着等图片加载完才能做别的操作？显然不是这样的，JS设计者设计了一种执行机制：事件循环机制（Event Loop），以实现单线程非阻塞的方法。通过上文，了解到事件循环机制（Event Loop）是用来实现单线程非阻塞的一种机制。我们先了解下任务。
2022-11-26 14:00:04
719
原创 工作记录——操作DOM
文档对象模型（DOM，Document Object Model），表示由多层节点构成的文档，通过它可以增删改查页面的各个部分，以及修改一些属性、事件操作等。1、我们获取过来的DOM元素是一个对象，所以DOM又称作文档对象模型；2、对于HTML，DOM使得HTML形成一棵dom树，包含文档，元素，节点3、对于dom操作，主要是对于元素的操作，主要有创建，增，删，改，查，属性操作，事件操作参考：《JavaScript高级程序设计》、操作DOM总结（博客园）
2022-11-12 16:32:22
190
原创 【vue源码学习】——模板编译
Vue.js提供了模板语法，允许我们声明式地描述状态和DOM之间的绑定关系，通过模板来生成真实DOM并将其呈现在用户界面上。在底层实现上，Vue.js会将模板编译成虚拟DOM渲染函数。当应用内部的状态发生变化时，Vue.js结合响应式系统，聪明地找出最小数量的组件进行重新渲染以及最少量地进行DOM操作。
2022-10-30 23:31:48
473
原创 vue为什么要加key？
key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
2022-10-23 13:45:07
1184
原创 Vue源码学习（三）：虚拟DOM
虚拟DOM是随着时代发展的产物。早期，页面交互效果比较简单，无复杂状态管理，无需频繁操作DOM，使用jQuery开发即可。随着需要越来越复杂，操作DOM越来越频繁。用jQuery开发，那会有相当多的代码操作DOM，状态也很难管理。现在，Vue.js、Angular和React都是声明式操作DOM。即通过描述状态（变量）和DOM直接的映射关系，就可以将状态渲染成视图。不用手动操作DOM。而当状态发生改变时，DOM要重新渲染，这时如果渲染整个DOM无疑是浪费了一些性能。
2022-10-16 22:07:28
846
2
原创 Vue源码学习（二）：Object的变化侦测
Object 和Array的变化侦测采用不同的处理方式（后面会解释原因），这一篇将介绍Object的变化侦测。Vue.js会自动通过状态生成DOM，并将其输出到页面显示出来，这个过程叫渲染。通常，在运行时应用内部的状态会不断发生变化，此时需要不停地重新渲染。那如何知道状态发生变化了呢，变化侦测就是用来追踪状态变化的，一旦变化，就重新更新视图。变化侦测有两种类型，一种是“推”，一种是“拉”。
2022-10-15 17:03:47
395
原创 Vue源码学习（一）：源码的入口在哪里
如何设计API和如何使用元编程思想（元编程，简单说是指框架的作者使用一种编程语言固有的语言特性，使得使用者能够以新语法和语义来构建应用程序，从而获得更好的开发体验）将新特性融入到框架中，是现代JS框架设计的两个核心，Vue.js侧重于后者。元编程思想涉及具体实现，需要考虑很多细节，比如要做到向下兼容，那么就要对一些特性的实现方式做成取舍，一些可通过书写向下兼容代码，另一些通过编译机制，还有一些要舍弃。这不仅在框架设计和实现的过程中会遇到，在具体实现应用程序的过程中也会遇到。
2022-10-09 17:51:17
4085
原创 TypeScript学习——语法篇
TS数字类型有字符串、布尔值、数字等，通过这些基础类型可以组合出复杂的类型组合，并且可通过type和interface关键字定义复杂对象类型和函数的类型。
2022-08-31 23:23:32
950
1
原创 Java学习——线程
而线程池可以维护多个线程，有任务的线程放入任务队列，空闲线程放入空闲队列等待任务，可以把创建和销毁的线程的过程去掉。synchronized关键字用来修饰成员方法，代表这个方法对于同一个对象来说，同一时间只允许一个线程执行，别的线程如果也调用这个实例的这个方法，就需要等待已经在执行这个方法的线程执行完毕，才能进入方法执行。线程在执行方法的时候，每次遇到方法调用，都会给当前的线程栈增加一层，这一层里保存的，就是线程当前的执行状态，比如当前方法的局部变量的值，当前方法执行到哪里了等。就是线程运行着我们的代码。
2022-08-21 15:24:51
170
1
原创 Spring框架——Bean是线程安全的吗
单例Bean服务要求是无状态的，不能有带数据存储功能的成员属性；单例依赖多例时要求每次使用时都重新从spring容器内获取新的实例对象，或者保证多例对象也是无状态的。
2022-08-20 17:09:45
1081
原创 【JavaScript——手写call、apply、bind】
当函数调用时，会创建执行上下文，this时上下文的一个属性，在函数执行时会用到。this有四种绑定方式默认绑定、隐式绑定、显示绑定、new绑定。显示绑定时，会用到call()、apply()、bind()函数，那这些函数是怎么实现的呢？让我们手写一下把。this全面解析call()函数和apply函数含义一样，第一个参数都是传递this，不同的地方在于后面的参数形式，前者一个一个传，后者以数组的方式传递。它们调用之后会立即执行。......
2022-07-31 18:16:29
208
原创 【JavaScript——this全面解析】
this是在运行时绑定的，并不是编写时绑定的，它的上下文取决于函数调用时的各种条件。this的绑定和函数声明的位置么有任何关系，只取决于函数的调用方式。当一个函数被调用时，会创建一个活动记录（有时候也称为执行上下文）。这个记录会包含函数在哪里被调用（调用栈）、函数的调用方式、传入的参数等信息。this就是这个记录的一个属性，会在函数执行的过程中用到。当函数调用时，会创建执行上下文，this时上下文的一个属性，在函数执行时会用到。this有四条绑定规则，分别是默认绑定、隐式绑定、new绑定、显示绑定。....
2022-07-31 18:10:32
349
原创 【JavaScript——原型、原型链、继承】
早期的浏览器只能用来浏览，不能交互，校验的工作留给后台报错。但是这样很消耗性能，于是，JavaScript需要完成一些更复杂的工作。当时流行面向对象，Javascript设计者仿造Java设计继承，但是设计成像java一样的继承，会增加学习成本，让语言过重。Java等语言继承最终new的是构造函数，于是Js借鉴了这一思路。在Javascript语言中，new命令后面跟的不是类，而是构造函数。通过构造函数实现继承，无法共享属性和方法。每一个实例，都有自己的属性和方法的副本，这会造成资源浪费。......
2022-07-24 16:13:24
628
2
原创 Element-UI源码学习——弹框组件
首先，分析一下Element-UI的对话框，点击，会弹出一个对话框。对话框由具体的弹框内容、关闭或确认按钮、外围的遮罩层组成。
2022-07-17 20:17:50
7397
1
原创 【手写reactive】
每次count.value修改之后，effect函数如何知道count已经变化了呢？我们先来看整体的流程。vue3的响应式是通过proxy实现的。effect中获取counter.num1 和counter.num2的时候，就会触发counter的get函数。get函数，会把当前的effect函数注册到一个全局的依赖地图。因此，counter.num1修改的时候，就会触发set拦截函数，去依赖地图找到注册的effect函数。1、首先，reactive是通过ES6的Proxy特征实现的属性拦截（可参考MDN
2022-07-09 18:02:28
197
原创 vue项目性能优化——断点续传
用element-ui提供基于文件流的上传方案：2、基于BASE64的上传方案二、如何实现断点续传？1、拿到文件，对文件进行切片，有两个方式，一种时固定数量，另一种时固定大小。2、用SparkMD5库对每一个分片进行命名（服务器接口后，会对相同hash的文件进行合并）3、发请求传文件，可以有串行和并行两种方式。这里使用串行，一个一个发，方便点击暂停上传的时候取消发送。4、可以拿一个数组保存待发的文件，上传成功的文件可以从数组里面删除。这样，当再次点击继续发送的时候，就不需要重复发送了。5、
2022-07-02 17:47:20
4509
原创 【搭建vue3工程化项目第一步】
对于Vue2，官方推荐用Vue-cli创建项目；而对于Vue3，可以使用Vite创建项目，因为vite能够提供更好更快的调试体验。可去官网下载，看下如下界面表示安装成功：1、命令行窗口，输入：之后，Project name这一行，输入项目名；接着，Select a framework 这一行输入框架名字，选择vue；在之后，Select a Variant这一行，不用TS的话，选vue。2、目录结构3、使用 ，然后使用 跑项目现在项目有了工程化的雏形，从上往下看项目结构：我们所有工程化体系都是
2022-06-19 19:39:45
248
原创 深入理解ES6——迭代器与生成器
深入理解ES6——迭代器与生成器文章目录深入理解ES6——迭代器与生成器前言一、什么是迭代器二、什么是生成器三、可迭代对象和for-of循环（1）如何访问默认的迭代器？(2)创建自己的可迭代对象四、内建迭代器（1）集合对象迭代器（2）字符串迭代器（3）NodeList迭代器五、展开运算符与非数组可迭代对象六、高级迭代器（1） 给迭代器传递参数（2）在迭代器中抛出错误（3）生成器返回语句（4）委托生成器七、异步任务执行总结前言1、用循环语句迭代数据时，必须要初始化一个变量来记录每次迭代在数据集合中的
2022-05-29 01:04:48
466
原创 【深入理解es6——js中的类】
深入理解es6——js中的类文章目录深入理解es6——js中的类一、类由来、es5的类二、类声明三、类表达式四、作为一等公民的类五、访问器属性六、可计算成员名称、生成器方法七、静态成员八、继承与派生类extend和super类方法遮蔽静态成员继承派生自表达式的类内建对象的继承Symbol.species属性九、在类的构造函数中使用new.target总结一、类由来、es5的类java、c++等面向对象的语言支持类和类继承，但是js（基于对象）不支持，只能关联多个对象。直到es5出现近类结构，但写法或
2022-05-08 16:29:11
575
1
原创 【JS深拷贝与浅拷贝】
前言写代码时，经常会遇到将一个对象赋值给另一个对象的情况，比如：const obj1 = { a: 1}const obj2 = obj1;obj2.a = 2;console.log(obj1) // {a:2}但是对于引用类型而言，直接赋值（=），实际上是保存在栈内存中地址的赋值，指向的依然是同一个对象，但实际上我们并不想共享一个对象。我们可以用深拷贝和浅拷贝来解决这个问题。一、浅拷贝？浅拷贝就是只拷贝一层属性，不会递归赋值，而在浅拷贝之后，源对象与目标对象的引用已经不是同
2022-04-23 19:07:54
1060
1
原创 axios获得文件流，转为blob，出现部分文件乱码问题解决思路
axios获得文件流，转为blob，出现部分文件乱码问题解决思路一、 什么是blob？blob对象表示一个不可变、原始数据的类文件对象。blob文档Blob表示的不一定是JavaScript原生格式的数据。File接口基于Blob，继承了blob的功能并将其扩展使其支持用户系统上的文件。Blob()构造函数返回一个新的Blob对象。blob的内容由参数数组中给出的值的串联组成。二、前后端如何进行文件传输？前后端分离，文件是通过文件流的形式进行传输的，前端通过axios请求后端接口，得到的
2020-11-07 11:20:05
3243
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人