- 博客(49)
- 收藏
- 关注
RSS订阅原创 防抖与节流
-函数节流是指规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。节流可以使用在 scroll 函数的事件监听上，通过事件节流来降低事件调用的频率。--函数防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。2.服务端验证场景:表单验证需要服务端配合，只执行一段连续的输入事件的最后一次，还有搜索联想词功能类似生存环境请用lodash.debounce。实现节流函数和防抖函数。
2023-01-21 21:21:30
203
原创 回流与重绘
浏览器会将所有的回流、重绘的操作放在一个队列中，当队列中的操作到了一定的数量或者到了一定的时间间隔浏览器就会对队列进行批处理。这样就会让多次的回流、重绘变成一次回流重绘。当触发回流时，一定会触发重绘，但是重绘不一定会引发回流。1.回流与重绘的概念及触发条件。2.如何避免回流与重绘?
2023-01-21 20:35:02
1568
原创 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
浏览器查找域名对应的IP地址(DNS 查询：浏览器缓存->系统缓存->路由器缓存->ISP DNS 缓存->根域名服务器)服务器返回一个 HTTP 响应（报头中把 Content-type 设置为 'text/html'）浏览器发送请求获取嵌在 HTML 中的资源（如图片、音频、视频、CSS、JS等）浏览器向 Web 服务器发送一个 HTTP 请求（TCP三次握手）浏览器跟踪重定向地址，请求另一个带 www 的网址。服务器处理请求（通过路由读取资源）浏览器进 DOM 树构建。服务器 301 重定向。
2023-01-20 20:31:06
234
原创 v-mode和.sync的对比
1.父组件:my-prop-name.sync 子组件@update:my-prop-name 的模式来替代事件触发，实现父子组件间的双向绑定。3.v-model针对更多的是最终操作结果，是 双向绑定的结果-是 value ，是一种 change操作。3..sync针对更多的是各种各样的状态，是 状态的互相传递，是 status ，是一种 update操作。2.一个组件可以 多个 属性用.sync修饰符，可以同时”双向绑定多个“prop'都是语法糖，都可以实现父子组件中的数据的双向通信。
2023-01-04 22:00:00
243
原创 关于从Excel导入的日期时间转换问题处理
问题：从excel中读入的日期时间“原因：excel内部进行特殊的编码。解决：需要借助公式来进行还原。
2023-01-01 19:09:19
679
原创 修饰符.native.修饰符.sync和v-model的区别
对于内置dom元素（例如div, button,p,.......） vue会自动绑定系统事件（click, mouseenter，.....），而对于普通的自定义的组件要自己处理。.native事件修饰符是用来是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签看待。为了解决上边的问题，可以在监听原生事件的同时，设置一个.native修饰符，这样就可以正常监听了。类别在于：一个组件上只能有一个v-model，.sync修饰符可以有多个。.sync与v-model区别是。
2022-12-28 22:18:22
242
原创 什么是跨域以及解决方法
也就是 为了网络安全起见，浏览器设置了一个同源策略，规定只有域名，端口，协议全部相同，就叫做同源。同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。跨域其实就是违背了浏览器的一种策略，这种策略就是同源策略（Same origin policy），头大 同源策略又是什么鬼。所以我们引出浏览器的同源策略，就是指必须在同一个协议，域名，端口号下，而且三者必须一致的。这个时候，我们就说是同源。如何解决跨域（重点）
2022-12-22 22:30:19
125
原创 vuex配置项(核心概念),vuex的触发流程
图解点击按钮的时候，通过dispatch触发actions，actions中发请求，请求的结果到达之后，通过commit触发mutations，并且对mutaions的每一次触发都可以通过devtools来观测到。在mutations中修改state之后，由于state中的数据是响应式的，所以凡是用到state数据的组件都会自动更新。点击按钮的时候，通过dispatch触发actions，actions中发请求，请求的结果到达之后，通过commit触发mutations（注意点1），来修改state。
2022-12-20 16:17:15
180
原创 v-if和v-for的优先级
v-if 不能和 v-for 一起使用的原因是 v-for 的优先级比 v-if 高，先循环再做分支判断,一起使用会造成性能浪费 解决方案有两种:把 v-if 放在 v-for 的外层把需要 v-for 的值先在计算属性中过滤一次v2 中：优先级比高v3 中：优先级比高使用过程中，不要把它们同时用在一个元素上。 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 值的时候被渲染 指令基于一个数组来渲染一个列表。 指令需要使用 形式的特殊语法，其中 是源数据数组或者对象，而 则是被迭代的数组元
2022-12-07 14:33:20
197
原创 Vue Cli脚手架（Vue2默认配置）
1.在任何位置打开终端小黑窗，输入命令（需要耐心等待5分钟左右）2.如果安装失败，例如下图所示。解决方案如下一般是由于网速较慢下载到一半导致中断，多试几次即可(1)清除npm缓存，再重新安装清除缓存命令:(2)检查有没有安装成功: 1.默认情况下，浏览器只能识别后缀文件，无法识别 后缀文件，所以要想让浏览器识别后缀文件，我们需要借助一些插件来帮我们将文件转成浏览器可以识别的html文件类似于我们以前学习的，需要借助插件先转成文件浏览器才可以识别2.脚手架作用(1)生成规范的vue项目目录(2)底层基于we
2022-12-03 21:55:55
646
原创 v-model语法糖，ref和$refs(vue操作dom)，$nextTick使用，dynamic动态组件，自定义指令
v-model本质上是 value属性和input事件的一层包装v-model的作用：提供数据的双向绑定数据发生了改变，页面会自动变 v-bind:value页面输入改变 ， 数据会自动变化 v-on:inputv-model是语法糖， v-model等价于 给一个input框提供了 :value属性以及 @input事件很显然如果每次使用input框，都需要提供value和input事件，比较麻烦，所以使用v-model我们经常遇到一种场景：父组件提供一个数据给子组件使用（父传子）子组件又需要修改父组件传
2022-12-03 21:45:35
1136
原创 css3新特性
5.背景 background-size background-origin backgrounde -clip。3.圆角边框 border-radius 边框阴影 border-shadow。6.渐变 linear-gradient，radial-gradient。1.新增颜色RGBA,HSLA模式。4.盒子模型box-sizing。7.过渡 transition。8.自定义动画@keyfrom。12.字体图标iconfont。9.媒体查询@media。13.弹性布局flex。11.2d/3d转换。
2022-12-02 21:12:29
144
原创 vue中计算属性（computed）和侦听器（watch）的区别
4.计算属性是可以新增一个属性，而侦听器只能监听data里的数据（前提是要侦听的数据必须在data定义）计算属性主要是解决模板中语法冗余的，而侦听器是监听data里面某一个数据的变化。3.计算属性不支持异步操作，侦听器支持异步操作。2.计算属性有缓存，侦听器没有缓存。
2022-12-01 10:38:57
745
原创 HTML5新增的特性
8.新增控件 calendar data email time url search file number。1.拖拽释放：即抓取一个元素以后拖到另一个位置，在HTML5中，拖放是标准的一部分，任何元素都可以拖放。3.语义化标签（header ，nav，footer，aside，article）7.本地存储localstorage和sessionstorage。4.新增音频（radio），视频（video）标签。2.自定义属性 data-id。5.画布canvas。
2022-12-01 10:12:33
186
原创 webpack工作流程
6.输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会。4.编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理。5.完成模块编译：在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系。
2022-11-27 22:12:46
651
原创 你不知道的数组常用方法
第对应的数组索引，数组本身。Array.splice() 方法用于数组或伪数组，根据参数个数和形式的不同，可以在数组中删除指定元素或者插入元素、替换元素。Array.pop()，删除并返回数组的最后一个元素，若该数组为空，则返回undefined。Array.unshift()，向数组的开头添加一个或多个元素，并返回新的数组长度。Array.push()，向数组的末尾添加一个或多个元素，并返回新的数组长度。map()：指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
2022-11-26 22:33:11
88
原创 内存泄漏,垃圾回收机制
内存泄漏一般是指变量的内存没有及时的回收，导致内存资源浪费。一般有三种情况出现内存泄露比较多。（1）常见的声明了一个全局变量，但是又没有用上，那么就有点浪费内存了，（2）定时器没清除 （3）循环引用：A 对象里面有一个属性指向 B 对象，B 对象有一个属性指向 A 对象。互相引用解决内存泄露：我们编译器有一个自动的内存清理。常见的主要是引用记数 和 标记清除。谷歌浏览器主要是用标记清除，大概流程是给每一个变量添加一个标记，通过内部算法计算引用情况，当不使用的时候就会自动清除。
2022-11-23 22:28:42
254
原创 typeof 和instanceof
可以准确地判断复杂引用数据类型，但是不能正确判断基础数据类型。的基本用法，下面就实现一个全局通用的数据类型判断方法。操作符返回一个字符串，表示未经计算的操作数的类型。也就是顺着原型链去找，直到找到相同的原型对象，返回。如果我们想要判断一个变量是否存在，可以使用。也存在弊端，它虽然可以判断基础数据类型（表示对象或原始值的表达式，其类型将被返回。之后返回的是有问题的结果，不能作为判断。除外），但是引用数据类型中，除了。同时，可以发现引用类型数据，用。类型以外，其他的也无法判断。会返回一个变量的基本类型，
2022-11-22 19:43:27
287
原创 axios拦截器
拦截器的作用,主要是在axios发送请求和响应之前拦截的,一般主要用于登录验证,给请求头添加token,也可以添加加载的动画,响应拦截一般会处理错误信息和跳转登录页。
2022-11-20 21:43:46
94
原创 闭包的理解
一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域在JavaScript中，每当创建一个函数，闭包就会在函数创建的同时被创建出来，作为函数内部与外部连接起来的一座桥梁简单来说,就是内层函数访问了外层函数的变量,闭包就是函数。
2022-11-17 22:40:45
58
原创 深拷贝,浅拷贝
浅拷贝，指的是创建新的数据，这个数据有着原始数据属性值的一份精确拷贝如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址即浅拷贝是拷贝一层，深层次的引用类型则共享内存地址下面简单实现一个浅拷贝在JavaScript。
2022-11-17 22:20:34
83
原创 async await,EventLoop事件循环,微任务和宏任务
主线程逐行执行代码, 遇到异步任务, 交给宿主环境执行, 执行完毕把要执行的回调函数推入任务队列, 等待主线程空闲的时候, 会调用任务队列中回调函数推入主线程执行栈执行, 执行后再次尝试清空任务队列里下一个回调函数, 这样不断清空和执行任务队列里回调函数的过程就叫事件循环。一旦执行栈中的所有同步任务执行完毕（此时JS引擎空闲），系统就会读取任务队列，将可运行的异步任务添加到可执行栈中，开始执行。先执行第一个宏任务, 然后同步任务, 然后微任务, 然后下一个宏任务如此循环, 直到所有代码执行完毕。
2022-11-15 21:13:30
728
原创 Ajax_原生学习,同步异步,回调函数,回调地狱,Promise_语法学习,Promise_三种状态,Promise的静态方法_all,race,resolve和reject,
/ 1. 创建Promise对象并返回此对象在原地, 并立刻执行函数内代码, 交给浏览器去做倒计时了(异步, 不会阻塞主线程代码往下走, 所以继续走2)function theFn(fn) { // fn = () => { console.log('回调函数执行') }// 语法: Promise.race([promise对象1, promise对象2, ...]).then()// 总结: 每个Promise对象有状态凝固特性, 就是Promise对象确定是成功/失败, 就不能再备更改了。
2022-11-14 22:19:00
279
原创 HTTP响应状态码
100：客户端在发送 POST 数据给服务器前，征询服务器情况，看服务器是否处理 POST 的数据，如果不处理，客户端则不上传 POST 数据，如果处理，则 POST 上传数据。301：永久重定向会缓存。307 （临时重定向）： 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。302（临时移动）： 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。304：协商缓存，告诉客户端有缓存，直接使用缓存中的数据，返回页面的只有头部信息，是没有内容部分。
2022-11-13 10:28:07
400
原创 GET和POST区别
GET和POST，两者是HTTP协议中发送请求的方法GETGET方法请求一个指定资源的表示形式，使用 GET 的请求应该只被用于获取数据POSTPOST方法用于将实体提交到指定的资源，通常导致在服务器上的状态变化或本质上都是TCP链接，并无差别但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中会体现出一些区别。
2022-11-13 10:25:38
60
原创 深浅拷贝,异常处理(throw,try ... catch),this指向,apply方法,bind方法,防抖,节流
对于字符串类型，浅复制是对值的复制，对于对象来说，浅复制是对对象地址的复制，并没 有开辟新的栈，也就是复制的结果是两个对象指向同一个地址，修改其中一个对象的属性，则另一个对象的属性也会 改变，而深复制则是开辟新的栈，两个对象对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。首先浅拷贝和深拷贝只针对想Object,Array这样的复杂对象，简单来说，浅拷贝只复制一层对象的属性，二深拷贝则复制了所有的层级。了解函数中 this 在不同场景下的默认值，知道动态指定函数 this 值的方法。
2022-11-08 20:38:22
278
原创 构造函数,原型对象,原型继承,原型链,
封装的本质是将具有关联的代码组合在一起，其优势是能够保证代码复用且易于维护，函数是最典型也是最基础的代码封装形式，面向对象思想中的封装仍以函数为基础，但提供了更高级的封装形式。基于原型对象的继承使得不同构造函数的原型对象关联在一起，并且这种关联的关系是一种链状的结构，我们将原型对象的链状结构关系称为原型链，同样的将变量和函数组合到了一起并能通过 this 实现数据的共享，所不同的是借助构造函数创建出来的实例对象之间是彼此不影响的。它指向了构造函数的原型对象，通过它可以清楚的查看原型对象的链状结构。
2022-11-08 20:34:49
93
原创 构造函数,内置构造函数,实例化,基本包装类型,forEach函数,filter函数,reduce函数,对象解构
的数据类型有 6 种，分别是字符串、数值、布尔、undefined、null 和 对象，常见的对象类型数据包括数组和普通对象。之所以具有对象特征的原因是字符串、数值、布尔类型数据是 JavaScript 底层使用 Object 构造函数“包装”来的，被称为包装类型。在 JavaScript 中底层函数本质上也是对象类型，因此允许直接为函数动态添加属性或方法，构造函数的属性和方法被称为静态成员。甚至字符串、数值、布尔、数组、普通对象也都有专门的构造函数，用于创建对应类型的数据。
2022-11-05 20:37:00
82
原创 作用域(函数作用域和块级作用域),作用域链,闭包,函数和变量提升,动态参数,剩余参数,箭头函数,数组解构,对象解构
作用域（scope）规定了变量能够被访问的“范围”，离开了这个“范围”变量便不能被访问，作用域分为全局作用域和局部作用域。JavaScript 中的作用域是程序被执行时的底层机制，了解这一机制有助于规范代码书写习惯，避免因作用域导致的语法错误。知道函数参数默认值、动态参数、剩余参数的使用细节，提升函数应用的灵活度，知道箭头函数的语法及与普通函数的差异。文件的【最外层】就是所谓的全局作用域，在此声明的变量在函数内部也可以被访问。包裹的代码称为代码块，代码块内部声明的变量外部将【有可能】无法被访问。
2022-11-04 20:48:48
544
原创 利用js中元素的滚动事件,页面滚动距离ScrollTOP 完成电梯导航案例
【代码】利用js中元素的滚动事件,页面滚动距离ScrollTOP 完成电梯导航案例。
2022-10-30 21:49:07
660
原创 什么是时间流,事件捕获和事件冒泡,怎么样阻止事件冒泡,事件委托是什么,它的原理是什么,元素的滚动事件
结合事件流的特征，我们知道当某个元素的事件被触发时，事件总是会先经过其祖先才能到达当前元素，然后再由当前元素向祖先传递，事件在流动的过程中遇到相同的事件便会被触发。再来关注一个细节就是事件相继触发的【执行顺序】，事件的执行顺序是可控制的，即可以在捕获阶段被执行，也可以在冒泡阶段被执行。事件流是对事件执行过程的描述，了解事件的执行过程有助于加深对事件的理解，提升开发实践中对事件运用的灵活度。如果事件是在冒泡阶段执行的，我们称为冒泡模式，它会先执行子盒子事件再去执行父盒子事件，默认是冒泡模式。
2022-10-30 21:44:47
236
原创 Web APIs 使用点击事件,输入事件,键盘响应事件,光标事件实现评论功能
【代码】Web APIs 使用点击事件,输入事件,键盘响应事件,光标事件实现评论功能。
2022-10-26 20:44:57
165
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人