- 博客(32)
- 收藏
- 关注
RSS订阅
1原创 JS继承的几种方式
由于JS解析引擎是和页面渲染共用一个线程，所以JS执行过程中一直是单线程的，而单线程会阻塞代码的执行效率。为了不影响JS的执行效率，便将一些耗时操作定义为异步任务，等待后续被唤醒回调。事件循环起了调度这些异步任务的作用，一旦调用栈执行完毕，事件循环机制就会按触发顺序将异步任务放入调用栈中继续执行。异步任务分为宏任务和微任务，宏任务和微任务的区别是它们的执行时机，微任务在页面重绘前必须执行完毕，而宏任务在重绘后执行。所以事件循环的调度机制可以描述为：宏任务->清空微任务队列->页面重绘->下一个宏任务。
2022-09-05 09:51:20
185
原创 面试问到axios如何回答
拦截器原理：创建一个chn数组，数组中保存了拦截器相应方法以及dispatchRequest（dispatchRequest这个函数调用才会真正的开始下发请求），把请求拦截器的方法放到chn数组中dispatchRequest的前面，把响应拦截器的方法放到chn数组中dispatchRequest的后面，把请求拦截器和相应拦截器forEach将它们分unshift,push到chn数组中，为了保证它们的执行顺序，需要使用promise，以出队列的方式对chn数组中的方法挨个执行。
2022-09-04 19:45:14
707
原创 Vue 列表为什么加 key？
为了性能优化 因为vue是虚拟DOM，更新DOM时用diff算法对节点进行一一比对，比如有很多li元素，要在某个位置插入一个li元素，但没有给li上加key，那么在进行运算的时候，就会将所有li元素重新渲染一遍，但是如果有key，那么它就会按照key一一比对li元素，只需要创建新的li元素，插入即可，不需要对其他元素进行修改和重新渲染。如果绑定数组的索引index，则起不到优化diff算法的作用，因为一旦数组内元素进行增删，后续节点的绑定的key也会发生变化，导致diff进行多余的更新操作。
2022-09-04 19:39:55
420
原创 WebSocket
WebSocket是类似Socket的TCP长连接的通讯模式，一旦WebSocket连接建立后，后续数据都以帧序列的形式传输。在客户端断开WebSocket连接或Server端断掉连接前，不需要客户端和服务端重新发起连接请求。在海量并发和客户端与服务器交互负载流量大的情况下，极大的节省了网络带宽资源的消耗，有明显的性能优势，且客户端发送和接受消息是在同一个持久连接上发起，实时性优势明显。缺点是浏览器支持程度不一致，不支持断开重连。
2022-09-04 19:35:34
607
原创 flex：1 是什么含义
默认值为1，容器中项目超出容器大小时，把项目平均压缩到容器内。默认值为auto，定义容器中项目的占据空间，一般用百分数设值。简写 flex:1;默认值为0，容器中项目没有占满时，不分配剩余空间。
2022-09-04 18:58:21
172
原创 vue的设计思想？双向绑定的原理？什么样的设计思想？
因此当我们修改input输入框中的值时，我们通过v-model绑定的值也会同步修改。3.x的与2.x的核心思想一致，只不过数据的劫持使用Proxy而不是Object.defineProperty，只不过Proxy相比Object.defineProperty在处理数组和新增属性的响应式处理上更加方便。响应式原理是vue的核心特性之一，数据驱动视图，是修改数据视图随之响应更新，Vue2.x是借助Object.defineProperty()实现的，而Vue3.x是借助Proxy实现的。
2022-09-04 18:37:07
174
原创 **vue响应式原理**
Object.defindProperty虽然能够实现双向绑定了，但是还是有缺点，只能对对象的属性进行数据劫持，所以会深度遍历整个对象，不管层级有多深，只要数组中嵌套有对象，就能监听到对象的数据变化无法监听到数组的变化，Proxy就没有这个问题，可以监听整个对象的数据变化，所以用vue3.0会用Proxy代替definedProperty。改变/添加 对象属性的时候:this.$set(data 实例,"属性名(添加的属性名)","属性值(添加的属性值)")
2022-09-01 21:21:48
99
原创 **原型，原型链？**
继承存在的意义就是属性共享：好处有二：一是代码重用，字面意思；二是可扩展，不同对象可能继承相同的属性，也可以定义只属于自己的属性。原型链存在的意义就是继承：访问对象属性时，在对象本身找不到，就在原型链上一层一层找。说白了就是一个对象可以访问其他对象的属性。原型存在的意义就是组成原型链：引用类型皆对象，每个对象都有原型，原型也是对象，也有它自己的原型，一层一层，组成原型链。
2022-09-01 21:01:03
49
原创 数组的方法
Array.splice()方法是在数组中插入或删除的通用方法，它会修改调用的数组，splice()可以传入三个参数，第一参数表示删除元素索引开始的地方，第二参数表示删除元素总数，第三参数，表示插入的元素，元素插入的位置就是删除元素开始的位置。Array.shift()方法是删除数组最前面的元素，返回是删除的元素。Array.sort()方法将数组中的元素排序，并返回排序好的数组。如果不传参数默认以字母表顺序进行排序。Array.reverse()方法将数组中元素进行倒叙，返回倒叙的数组(反转)...
2022-08-31 07:39:48
59
原创 路由导航守卫
路由钩子在实际的开发过程中使用较少, 我在实际的项目中只在组件内使用过beforeRouteLeave, 使用场景分别为一下三类情况。当一个组件中有一个定时器时, 在路由进行切换的时候, 可使用 beforeRouteLeave 将定时器进行清楚, 以免占用内存。如果页面内有重要的信息需要用户保存后才能进行跳转, 或者有弹出框的情况. 应该阻止用户跳转。next(false) //回到当前页面, 阻止页面跳转。当页面中有未关闭的窗口, 或未保存的内容时, 阻止页面跳转。alert('请保存信息后退出!...
2022-08-30 19:34:54
63
原创 在项目当中定义一个环境变量，怎么去定义的？
开发环境 - > development的文件 生产上线 -> production的文件。格式： key = value key表示环境变量的名称 value表示环境变量的值。key = value 定义环境变量 process.env.环境变量名字。不同的环境（开发环境，生产环境，测试环境.......）可以设置不同的变量。自定义的环境变量要以：VUE_APP_开头。...
2022-08-30 14:10:25
58
原创 精灵图的优点
使用精灵图可以有效减少服务器接收和发送请求的次数，从而达到提高页面的加载性能。精灵图的显示主要借助于背景位置来实现——background-position。采用了精灵图这一技术可以缓解加载时间过长从而影响用户体验的这个问题。网页中的坐标：x轴右边是正值，左边是负值，y轴也是和x轴一样的原理。在一定程度上减少了页面的加载速度，也一定程度上缓解了服务器的压力。精灵图主要针对小的背景图片使用。一般情况下精灵图都是负值。...
2022-08-27 08:32:58
414
原创 Token的用途
Token 是用户登录成功之后服务端返回的一个身份令牌，在项目中的多个业务中需要使用到：访问需要授权的 API 接口校验页面的访问权限...但是我们只有在第一次用户登录成功之后才能拿到 Token。所以为了能在其它模块中获取到 Token 数据，我们需要把它存储到一个公共的位置，方便随时取用。往哪儿存？本地存储获取麻烦数据不是响应式Vuex 容器（推荐）获取方便响应式的登录成功，将 Token 存储到 Vuex 容器中获取方便响应式为了持久化，还需要把 Token 放到本地存储持久化登录成功之后后端会返回两
2022-08-27 08:31:14
757
原创 长列表滚动行为
安装，引入better-scroll，这里要注意有一个初始化过早的问题，就是可能数据还没有回来，dom还未完全上树，，着急让betterscroll进行管理，所以等确定dom已经上完树了之后，通过$nextTick（会保证dom上树）回调函数里定义new BetterScroll('box')进行初始化工作，this.$nextTick(()=>{要记得给box设置样式，不然会导致与浏览器的滚动条混淆。滚动条错位：加定位修正滚动条位置position:relative;...
2022-08-25 20:12:37
116
原创 轮播冲突解决方法
给两个轮播传传一个属性，然后分别定义两个轮播显示照片数，然后回到组件内接收，但两个轮播显示的照片数相同就会出现滑动问题，所以再给两个轮播传一个属性，一个名为actors，一个为photos， 再到组件内接收，然后通过父传子props通信方式，传到页面。轮播初始化：刚开始v-if为假，页面不会创建，生命周期不会执行，真数据收到后，v-if为真，生命周期才开始创建。一个页面传入两个一样的轮播封装组件：演职人员和剧照都用到了轮播。...
2022-08-25 19:17:47
901
原创 自定义指令
在mounted(事件监听的工作)中监听一个window.onscroll事件，当doucument.doumentElement.scrollTop>50显示，
2022-08-25 19:16:28
245
原创 基础的Web技术优化
是如何把这些模块合并到一起，并且保证其正常工作的，你是否了解呢？使用Chrome Performance查找性能瓶颈。首先我们应该简单了解一下。
2022-08-24 21:44:33
184
原创 Js错误有哪些？怎么定位
常见的是在渲染UI组件时对状态的初始化操作不当这个时候我们需要去查看组件的状态是否开始于undefined，然后异步获取数据时，组件在数据加载之前至少会呈现一次。解决方法：在构造函数中初始化state
2022-08-24 21:42:28
316
原创 自适应布局
表格布局在历史上遭到很多人的摒弃，说表格布局麻烦，操作比较繁琐，其实这是一种误解，在很多场景中，表格布局还是很适用的，比如这个三栏布局，用表格布局就轻易写出来了。缺点就是，绝对定位是脱离文档流的，意味着下面的所有子元素也会脱离文档流，这就导致了这种方法的有效性和可使用性是比较差的。表格布局也是有缺陷的，当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的，而有时候这种效果不是我们想要的。浮动布局是有局限性的，浮动元素是脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如高度塌陷等。
2022-08-23 19:14:11
636
原创 Git合并出问题了怎么办
首先，我们不要在master中去进行修改提交，一般这个时候我们新建一个分支，将合并后的代码复制到新的分支中去，然后我们对分支去进行一个修改，当修改完成之后，再合并到master主分支中。防止修改master分支，最终崩溃。有冲突解决冲突，解决冲突的方法：如果两个人在同一分支下开发，那就需要找到写同样分支的人，沟通解决问题。
2022-08-22 18:15:52
736
原创 项目中做了哪些优化
Vue是单页面应用，会有很多路由引入，这样webpack打包之后的文件很大，当加载资源过多时，页面会出现白屏的现象，所以我们可以把不同路由对应的组件分割成不同的代码块，在路由被访问的时候才加载对应的组件。如果存在非常长或者无限滚动的列表，需要采用窗口化的技术来优化性能，只需要渲染少部分区域的内容，减少重新渲染组件和创建dom节点的时间。(v-if是真正的条件渲染，切换过程中是销毁和重建的，v-show就相当于CSS中的display属性切换)按需引入需要的组件，达到减少项目体积的目的。
2022-08-22 18:14:40
439
原创 Promise
异步函数 async function 中可以使用 await 指令，await 指令后必须跟着一个 Promise，异步函数会在这个 Promise 运行中暂停，直到其运行结束再继续运行。当需要多次顺序执行异步操作的时候，例如，如果想通过异步方法先后检测用户名和密码，需要先异步检测用户名，然后再异步检测密码的情况下就很适合 Promise。异步函数实际上原理与 Promise 原生 API 的机制是一模一样的，只不过更便于程序员阅读。Promise 是一种将异步转换为同步的方法吗？
2022-08-19 18:13:40
32
原创 修改ElementUI样式
修改ElementUI样式的几种方式 在我们写项目的过程中，有的elementui的默认样式和项目中的样式不符合，所有我们需要强制行的修改，这时候就需要找几种修改ElementUI的方法了。1）.使用 /deep/ 深度修改标签样式 找到需要修改的 ElementUI 标签的类名，然后在类名前加上 /deep/ ，可以强制修改默认样式。去除scoped 在需要更改的组件里新增一个style标签【重点：不要加scoped】，然后直接获取class设置样式就可以咯，class自己去浏览器里右键审查元素可得到。.
2022-08-17 20:47:52
1236
原创 简易计算器
function getResult(num1, sign, num2) { var result; while (true) { switch (sign) { case '+': result = num1 + num2; return result; ...
2022-05-26 14:39:48
36
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人