- 博客(43)
- 收藏
- 关注
RSS订阅原创 react
1. redux的实现原理（关键代码）dispatch：用于action的分发，改变store里面的statesubscribe：注册listener，store里面的state发生改变后，执行listenergetState：获取store里的stateaction属性都会带一个type属性，这个属性是必须的，其他还有name等，最后当作传递给reducer的内容。action通过dispatch触发。reducer接收两个参数，分别是state、action，任何使用switch…case…
2022-04-07 08:41:41
164
原创 js运行机制
js是单线程的，子线程受主线程控制同步任务：在线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务异步任务，不进入主线程，而进入“任务队列”的任务，只有“任务队列”通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行过程：只要主线程空了，就去读取任务队列，并不断重复。这个过程就是事件循环。（1）主线程-执行栈-同步任务（2）任务队列-异步任务5 .任务队列中的事件：IO设备、用户生产事件、定时器、promise。...
2022-03-29 10:34:12
257
原创 Ajax的原理步骤
什么是ajax：即异步的javascript和XML。是一种用于创建快速动态网页的技术。通过后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。可以在不重新加载整个网页的情况下，对页面的某部分进行刷新。Ajax工作原理客户端发送请求，请求交给xhr，xhr把请求提交给服务器进行业务处理，服务器响应数据交给xhr对象，xhr对象接收数据，由JavaScript把数据写到页面上。步骤创建XMLHttpRequest对象，即创建一个异步调用对象创建一个新的HTTP请求，并指定该HTTP请求.
2022-03-23 15:29:57
823
原创 set和map数据结构的区别
set是一种新的数据结构，类似于数组，但是成员的值是唯一的，没有重复的值。set本身是一个构造函数，用来生成set数据结构。set加入值时不会发生类型转换，set内部判断相等用的是===，两个nan认为是相等的。Set的操作方法add(value): 添加某个值，返回set结构本身delete(value): 删除某个值，返回一个布尔值，表示是否删除成功has(value): 返回一个布尔值，表示是否为set的成员clear()：清除所有成员，没有返回值。Set的遍历操作：数组的map和f.
2022-03-17 17:01:21
633
原创 new操作符干了什么？
new经过了4个阶段创建一个空对象obj的proto指向构造函数的原型对象prototype,链接到原型绑定this值，让this指向obj，并且执行函数体。返回新对象。
2022-03-16 14:27:06
101
原创 作用域/作用域链与原型/原型链
1. 作用域作用域就是代码的执行环境，全局执行环境就是全局作用域，函数的执行环境就是私有作用域，它们都是栈内存。2. 作用域链当代码在一个执行环境中执行时，会创建变量对象的一个作用域链（作用域形成的链条）3. 原型每当定义一个数据类型的时候，都会天生自带一个prototype属性，这个属性指向函数的原型对象，并且这个属性是一个对象数据类型的值。4. 原型链在JavaScript中通过prototype对象指向父类对象，直到指向Object对象为止，这样就形成了一个原型指向的联调，称为原型链。当
2022-03-16 14:22:44
518
原创 箭头函数与普通函数区别
1. 箭头函数使用箭头定义，普通函数中没有2. 箭头函数都是匿名函数普通函数可以有匿名函数，也有具名函数，但箭头函数都是匿名函数3. 箭头函数不能用于构造函数，不能使用new普通函数可以用于构造函数，以此创建对象实例4. 箭头函数的this指向不同在普通函数中，this指向调用它的对象。箭头函数本身不创建this，它在声明的时候可以铺获其所在上下文中的this供自己使用。箭头函数结合call(),apply()方法调用一个函数时，只传入一个参数对this没有影响。箭头函数的this永远指向其
2022-03-11 09:39:59
99
原创 keep-alive原理
keep-alive是vue.js的一个内置组件，它能够将不活动的实例组件保存在内存中，而不是直接将其销毁。它是一个抽象组件，不会渲染到真实的dom中，也不会出现在父组件中。它提供了include和exclude两个属性，允许有条件进行缓存。<keep-alive include="a"> <component></component></keep-alive>将缓存name为a的组件<keep-alive exclude="b">
2022-03-10 21:38:41
228
原创 js事件委托
1. 事件委托原理事件委托就是用事件冒泡来实现的。事件冒泡就是事件从最深节点开始，逐步向上传播（即向父级及以上节点），如div>ul>li>a，给a添加一个点击事件，那么这个事件就会一层一层的向父级执行，执行顺序为a>li>ul>div，所以，有这样一个机制，给最外面的div添加一个点击事件，那么里面子元素做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托他们父级代为执行事件。2. event对象提供了一个属性交target，可以返回事件
2022-03-04 14:30:19
182
原创 es6新特性
1. let 、 const两者都是块级作用域，没有变量提升，var有变量提升。2. 模板字符串``可以使用反引号``来进行字符拼接3. 解构可以对对象和数组进行解构const aaa = ['花1','花2','花3']const { a1,a2,a3 } = aaaconst aaa = {name：‘sss',age:20}const { name,age } = aaa4. 函数传参可以有默认值5. 操作符…6. 箭头函数不需要function关键字来创建函数省略r
2022-03-03 15:24:37
113
原创 HTML5新特性
语义标签：header\footer\nav等。增强型表单，新的input输入特性：color\date\email等。音频和视频：audio、videoCanvas绘图SVG绘图地理定位拖放APIweb Storageweb workerWebSocket
2022-03-03 14:28:40
99
原创 hash和history的区别
1. 实现了什么功能从用户角度看，记录当前页面的状态，可以使用浏览器的前进后退功能作为开发者，要实现这两个功能，需要做到：改变url且不让浏览器向服务器发出请求，监测url的变化，截获url地址，并解析出需要的信息来匹配路由规则。2. hash模式url尾巴后带#号，hash值变化不会导致浏览器向服务器发出请求，hash的传参是基于url的，如果要传递复杂的参数，会有体积的限制。3. history模式history模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中。histo
2022-03-03 11:03:18
325
原创 输入url地址按下回车会发生什么
输入url后，首先会去进行域名解析为ip地址客户端根据ip地址去寻找相应的服务器然后与服务器进行TCP的三次握手。所谓三次握手，就是客户端在请求与服务端连接时，彼此共计发送了三次数据包。客户端找到相应的资源库根据资源库返回页面信息浏览器根据自身的执行机制解析页面最后服务器将解析信息返回给客户端，进行TCP四次挥手客户端显示自己的请求，即服务端返回的东西。...
2022-03-03 09:57:34
1781
原创 深拷贝和浅拷贝
1. 数据类型基本数据类型（String,number,undefined,boolean,null）,直接存储在栈中引用数据类型（Object,array,date、function），存储的是该对象在栈中的引用，真实的数据放在堆内存里。2. 浅拷贝与深拷贝浅拷贝只复制指向某个对象的指针而不复制对象本身，新旧对象还是共享同一个内存。深拷贝会创造另外一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。3. 浅拷贝的实现方式Object.assign()，当只有A
2022-03-02 18:55:53
88
原创 vue-router路由守卫
vue-router的生命周期beforeEach 进入新路由之前执行beforeResolveafterEach 进入新路由之后执行beforeRouteEnter 进入组件之前被调用beforeRouteUpdate 不同路由组件被重复使用的时候被调用beforeRouteLeave 离开该组件的时候被调用...
2022-03-02 11:21:06
726
原创 CommonJs和Es Module
1. 为什么会有CommONjS和ES module呢？js文佳作用域都是顶层，这会造成变量污染js文件多，变得不好维护js依赖问题，稍微不注意顺序引入错，代码全错为了解决以上问题JavaScript社区出现了CommonJs，commomJs是一种模块化规法，在后来的ES6版本正式加入了Es Module模块，这两种都解决了上面的问题。2. CommonJs基本语法使用module.export导出变量及函数，也可以省略关键字export，直接写export导出。commonJsreq
2022-03-02 10:34:33
1421
原创 webpack和vite
工具本身定位不同webpack是底层的东西，vite则是更上层的工具。webpack是配置化，灵活度极高的工具，vite是开箱即用，使用更简单的工具原理不同webpack是bundle，自己实现了一套模块导入导出机制。vite是利用浏览器的esm能力，是bundless。优缺点vite开箱即用，更加简单，基于浏览器esm，使得hmr更加优秀，达到极速的效果；webpack更加灵活，api以及插件生态更加丰富。webpack先打包，再启动服务器，请求服务器时直接给予打包后的结果；vite直接启动.
2022-03-01 17:57:27
1417
原创 webpack的一些loader
webpack一些配置 enrty(项目入口) output（出口文件） module（模块的处理） plugin（loader不能做的处理都能交给plugin来做）
2022-03-01 15:31:09
261
原创 防抖和节流
防抖，应用场景（1）keyup事件（2）调整窗口大小。原理：假设要等待的时间500ms，如果500ms内有请求，则计时器清零重新开始计时，直到500ms内没有请求，则执行函数节流，应用场景（1）点击事件。原理，假设等待时间500ms，如果500ms之内有多个请求，忽略500ms之内除第一次请求的请求，在500ms后触发回调函数执行...
2022-03-01 15:22:41
76
原创 页面回流重绘
回流必将引起重绘，而重绘不一定会引起回流。比如只有颜色改变的时候只会发生重绘；当页面布局和几何属性改变时就需要回流，如增加或删除一些元素，元素位置改变，元素尺寸等发生改变。...
2022-03-01 15:13:35
109
原创 前端性能优化
1. 减少HTTP请求合并图片合并压缩css样式和js脚本去掉不必要的请求利用缓存2. 图片优化尽可能使用png,它相对来说体积较小图片进行压缩等图片延迟加载3. 非核心代码异步加载动态加载脚本，创建一个script标签，然后把这个标签放到body后面去使用async。defer等。defer再html解析完后才会执行，如果是多个，则按照加载顺序依次执行；async在加载完后立即执行，如果是多个，执行顺序和加载顺序无关。4. 使用CDN5. DNS预解析...
2022-03-01 14:58:59
46
原创 js执行顺序
1. js是单线程的语言，执行模式有两种：同步、异步2. js默认模式是同步模式，按流水线执行abc,不管a要多长，都要先等a执行完，再执行b，再执行c.3. 异步模式，所有的模块都一起执行，哪个模块执行完了，就先把哪个模块拿到流水线上执行4. if…else if … else会按照顺序执行，先执行if，再执行elseif ，再执行else5. for 循环是先执行完内部的循环，再跳出循环，for循环后面的代码，必须for循环完成后才能执行。...
2022-03-01 14:36:17
486
原创 同源与跨域
1. 同源策略同源是指：协议、端口、域名 三者相同2. 跨域跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制常见的跨域场景：同一域名，不同端口，不同协议域名和域名对应的ip相同、主域相同，但子域不同不同域名3. 常见的解决跨域方案JSONP跨域nodeji中间件代理跨域document.domain+iframe跨域location.hash+frame跨域postMessage跨域webSocket协议跨域Nginx代理跨域4. Nginx
2022-03-01 11:16:40
2211
原创 http缓存
1.HTTP缓存的分类根据是否要重新向服务器发起请求分类，可分为强制缓存和协商缓存；根据是否可以被单个或多个用户来分类，可以分为私有缓存和共享缓存。强制缓存如果生效，不需要再和服务器发生交互，而协商缓存不管是否生效，都需要与服务端发生交互。强缓存的状态码是200，协商缓存的状态码是3042.为什么要使用http缓存减少冗余的数据传输，节省了网费缓解了服务器的压力，提高了网站性能加快了客户端加载网页的速度3.http缓存的几个注意点强缓存情况下，只要缓存还没过期，就会直接从缓存中读取数据，
2022-03-01 10:46:06
70
原创 网页自适应
1. 在网页代码的头部，加入一行viewport元标签2. 宽度不要用绝对的width:auto;/width:XX%’3. 字体大小是页面默认大小的100%，即16像素，不要使用绝对大小px，要使用相对大小“rem”1rem = 10px4. 流动布局，“流动布局”的含义是，各个区块的位置是浮动的，不是固定不变的使用左浮动和右浮动，好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向上溢出，避免了水平滚动条的出现。5. 选择加载css使用css3引入的
2022-02-25 10:49:35
1213
原创 vue2和vue3区别
1. vue2和vue3双向数据绑定原理发生了改变vue2的双向数据绑定是利用了es5 的一个API Object.definepropert() 对数据进行劫持 结合发布订阅模式来实现的。vue3中使用了es6的proxyAPI对数据进行处理。相比与vue2，使用proxy API 优势有：defineProperty只能监听某个属性，不能对全对象进行监听；可以省去for in 、闭包等内容来提升效率（直接绑定整个对象即可）；可以监听数组，不用再去单独的对数组做特异性操作，vue3可以检测到数组内部
2022-02-24 09:26:13
104154
8
原创 函数柯里化
1函数柯里化函数柯里化是将多参数或者异化参数转变成但参数或者无异化参数的一种函数式编程的运算方式。这么做的好处是可以将核心逻辑与其他逻辑分离开来，做法是使用一个函数返回一个函数，在第一个个函数中执行其他逻辑，并且对差异化参数进行处理，然后返回一个无差异参数且只有核心逻辑代码的函数，以后每次执行都只需要执行这个函数。例子：func(a,b,c) 柯里化后是这样子的 func(a){ return func1(b){ return func2© {} } } ,func(a)是处理一些其他逻辑的代码，fun
2022-02-14 16:45:48
262
原创 this指向
全局环境中，this指向Window匿名函数通常指向window，严格模式下指向undefined箭头函数下，this指向函数定义的执行环境
2022-02-14 11:12:31
172
原创 axios面试题
1. axios为什么既能在浏览器环境运行又能在服务器(node)环境运行？因为axios在浏览器端使用XMLHttpRequest 对象发送ajax请求；在node环境使用 http 对象发送ajax请求。XMLHttpRequest 时一个API，它为客户端提供了在客户端和服务器之间传输数据的功能；process对象是一个global(全局变量)，提供有关信息，控制当前的node.js进程。通过判断XMLHttpRequest和process 这两个全局变量来判断程序的运行环境，从而在不同的环境提供
2022-02-09 15:53:55
5138
原创 导出Excel表格
/***导出excel*@{String}fileName 自定义导出的文件名**/export function exportExcelDown(res,fileName = '') { // res为后台请求回来的数据，res的格式为{config:{},data:{},headers:{},...} if(!res) return; const blod = new Blod([res.data],{type : 'application/vnd.ms-excel;charset=utf
2021-12-20 10:34:27
61
原创 vuex持久化
一旦刷新了页面，vuex就会被重置，刷新浏览器会导致js重新加载，Vuex的Store全部重置，为了防止被重置，一般会用localStorage对vuex进行一个存储防止Vuex丢失的情况。但是使用localStorage在每次状态变更时都要手动去存储。vuex官方文档给我们提供了一个插件选项，这时就可以通过插件做这些动作了。// 首先 npm install vuex-persistedstate --save// 在store/index.js中import createPersistedSta
2021-07-23 11:08:24
84
原创 字符串最长五重复子串
function fun(s){ let max = 1 let arrStr = s.split('') if(arrStr.length < 1){ max = 0 return 0 } for(var i = 0;i<arrStr.length;i++){ var strLength = 1 for(var j = i+1; j<arrStr.length ; j++){
2021-07-13 14:13:16
78
原创 js数组去重
利用es6的set去重function fun(arr){ return Array.form(new Set(arr)) // return [...new Set(arr)] // 或者}const arr = [1,2,2,3,3,4,5,6]const res = fun(arr)set数据结构，类似于数字，其成员的值是唯一的Array.form()用于将set结构转为数组。利用indexOf()去重function fun(arr){ var newArr = [] fo
2021-07-12 23:06:01
75
1
原创 v-model原理
简单描述就是提供了两个功能，view层输入的值改变data的属性值，data属性值发生改变会更新view层的数值变化。其核心是，一方面modal层通过definePropertry来劫持每个属性，一旦监听到变化就通过相关的页面更新元素。另一方面通过编译模板文件，为控件的v-model绑定input事件，从而页面输入能实时的更新相关的data属性值。...
2021-07-06 15:00:28
87
原创 闭包及其使用注意事项
function delay(x , y , time){ setTimeout( function(){ forTimeout(x , y) } , time); } 闭包的含义:闭包就是函数的嵌套，内层的函数可以使用外层函数的所有变量。闭包的注意事项2.1 闭包运行内层函数引用父函数中的变量，但是该变量是最终值。var lists = document.getElementsByTagName('li'); for(var i = 0 , len =
2021-07-02 14:48:48
179
原创 组件传参（子父、兄弟）
子父传参：子组件通过props接收父组件传过来的参数，通过$emit方法传给父组件。兄弟传参：需要再main.js里定义一个中间变量bus，即Vue.prototype.bus = new Vue()。子组件向另外一个子组件传值，通过中间变量bus中的emit来传递值，参数同子传父的一致；另外一个子组件接收方，通过beforeCreate生命周期来获得传过来的值，这时候需要调用this.bus.emit来传递值，参数同子传父的一致；另外一个子组件接收方，通过beforeCreate生命周期来获得传过来的.
2021-07-02 14:45:47
147
原创 Promise 对象
promise 对象的两个特点对象的状态不受外界影响。pending：初始状态。fulfilled：操作成功。rejected：操作失败。只有异步操作的结果，可以决定当前是哪一种状态。一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise 对象的状态改变，只有从初始状态变为成功状态，或者从初始状态变为失败状态。Promise 的优缺点可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数，此外，promise 对象提供了统一的接口，使得控制异步操作更加容易操作。
2021-06-30 10:51:58
151
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人