不秃头的小铭-CSDN博客

原创 vue路由守卫以及用法

beforeRouteEnter守卫不可以访问this，因为首位在导航确认之前被调用，因此即将登场的新组件还没被创建，不过可以通过传一个回调给next来访问组件实例，在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数，其他两个都可以使用this。beforeEnter：这个守卫是写在路由里面的，只有进入这个路由时才会调用的，这些守卫与全局前置守卫的方法参数是一样的。钩子不会接受next函数也不会改变导航本身。它不管你去哪里，也不会拦你。beforeRouteEnter：路由进去。

2022-09-16 17:31:16 2123

原创 Vue生命周期（简单、好理解）

创建阶段有四个钩子函数，分别是：befortCreate，craeted，beforeMount，mounted。放在nextTick中的代码可以在dom更新之后再执行，这样就能在created里获取最新dom了。就是 created 比 mounted 执行的时间更早所以会更多的在 created 中请求。这个过程是从vue实例创建到实例销毁的过程中到了一定的时间节点就会触发。生命周期函数又叫钩子函数，钩子函数到了某一个时间点会自动触发。接下来就说说用的时候有哪些需要注意的呢？从上面我们可以看出几点，

2022-09-16 16:25:24 643

原创什么是防抖和节流？有什么区别？如何实现？

如：浏览器的 resize 、 scroll 、 keypress 、 mousemove 等事件在触发时，会不断地调⽤绑定在事件上的回调函数，极⼤地浪费资源，降低前端性能。例如，都设置时间频率为500ms，在2秒时间内，频繁触发函数，节流，每隔 500ms 就执⾏⼀次。为了优化体验，需要对这类事件进⾏调⽤次数的限制，对此我们就可以采⽤ throttle （防抖）和 debounce （节流）的⽅式来减少调⽤频率。使⽤定时器写法， delay 毫秒后第⼀次执⾏，第⼆次事件停⽌触发后依然会再⼀次执⾏。

2022-09-16 12:02:50 224

原创什么是事件代理？以及应用场景

如果⽤了事件委托就没有这种麻烦了，因为事件是绑定在⽗层的，和⽬标元素的增减是没有关系的，执⾏到⽬标元素是在真正响应执⾏事件函数的过程中去匹配的。但是如果⽤户能够随时动态的增加或者去除列表项元素，那么在每⼀次改变的时候都需要重新给新增的元素绑定事件，给即将删去的元素解绑事件。事件委托，会把⼀个或者⼀组元素的事件委托到它的⽗层或者更外层元素上，真正绑定事件的是外层元素，⽽不是⽬标元素。如果把所有事件都⽤事件代理，可能会出现事件误判，即本不该被触发的事件被绑定上了事件。

2022-09-16 11:52:08 310

原创 JavaScript如何实现继承

ES6继承是⽬前⽐较新，并且主流的继承⽅式，⽤class定义类，⽤extends继承类，⽤super()表示⽗类。ES5实现继承主要是基于prototype来实现的，具体有三种⽅法。2.借⽤构造函数继承(call或者apply的⽅式继承)JS继承实现⽅式也很多，主要分ES5和ES6继承的实现。组合继承是结合第⼀种和第⼆种⽅式。

2022-09-16 11:40:29 231

原创判断JS数据类型的方法有哪些

1.Type:typeof 检测数据类型会返回对应的数据类型小写字符。引用数据类型中的：Array，Object，Date，RegExp。不可以用 typeof 检测。都会返回小写的 objectconsole.log(typeof num);2 . instanceof除了使用 typeof 来判断，还可以使

2022-09-16 10:48:08 223

原创 var、let、const之间的区别

在ES5中，顶层对象的属性和全局变量是等价的，⽤ var 声明的变量既是全局变量，也是顶层变量注意：顶层对象，在浏览器环境指的是 window 对象，在 Node 指的是 global 对象。对于复杂类型的数据，变量指向的内存地址，保存的只是⼀个指向实际数据的指针， const 只能保证这个指针是固定的，并不能确保改变量的结构不变。let 和 const 不存在变量提升，即它们所声明的变量⼀定要在声明后使⽤，否则报错。使⽤ var ，我们能够对⼀个变量进⾏多次声明，后⾯声明的变量会覆盖前⾯的变量声明。

2022-09-15 16:39:14 97

原创 ES6中 Promise的理解以及有哪些使⽤场景？

Promise.allSettled() ⽅法接受⼀组 Promise 实例作为参数，包装成⼀个新的 Promise 实例只有等到所有这些参数实例都返回结果，不管是 fulfilled 还是 rejected ，包装实例才会结束。注意，如果作为参数的 Promise 实例，⾃⼰定义了 catch ⽅法，那么它⼀旦被 rejected ，并不会触发 Promise.all() 的 catch ⽅法。Promise.all() ⽅法⽤于将多个 Promise 实例，包装成⼀个新的 Promise 实例。

2022-09-15 11:59:34 233

原创 this对象的理解

其实严格来说，所有的函数都可以new⼀个对象，但是有些函数的定义是为了new⼀个对象，⽽有些函数则不是。如上代码，如果fn函数被赋值到了另⼀个变量中，并没有作为obj的⼀个属性被调⽤，那么this的值就是 window，this.x为undefined。以上代码中，fn不仅作为⼀个对象的⼀个属性，⽽且的确是作为对象的⼀个属性被调⽤。如果函数作为对象的⼀个属性时，并且作为对象的⼀个属性被调⽤时，函数中的this指向该对象。当⼀个函数被call和apply调⽤时，this的值就取传⼊的对象的值。

2022-09-15 11:33:10 181

原创什么是作用域和作用域链？

当在 Javascript 中使⽤⼀个变量的时候，⾸先 Javascript 引擎会尝试在当前作⽤域下去寻找该变量，如果没找到，再到它的上层作⽤域寻找，以此类推直到找到该变量或是已经到了全局作⽤域。词法作⽤域，⼜叫静态作⽤域，变量被创建时就确定好了，⽽⾮执⾏阶段确定的。这⾥拿⼀张图解释：把作⽤域⽐喻成⼀个建筑，这份建筑代表程序中的嵌套作⽤域链，第⼀层代表当前的执⾏作⽤域，顶层代表全局作⽤域。任何不在函数中或是⼤括号中声明的变量，都是在全局作⽤域下，全局作⽤域下声明的变量可以在程序的任意位置访问。

2022-09-15 10:59:42 3274

原创如何实现上拉加载和下拉刷新

开源社区也有很多优秀的解决⽅案，如 iscroll 、 better-scroll 、 pulltorefresh.js 库等等这些第三⽅库使⽤起来⾮常便捷。下拉刷新、上拉加载原理本身都很简单，真正复杂的是封装过程中，要考虑的兼容性、易⽤性、性能等诸多细节。我们通过原⽣的⽅式实现⼀次上拉加载，下拉刷新，有助于对第三⽅库有更好的理解与使⽤。下拉刷新的本质是⻚⾯本身置于顶部时，⽤户下拉时需要触发的动作。最重要的是要理解在什么场景，什么时机下触发交互动作。上拉加载的本质是⻚⾯触底，或者快要触底时的动作。

2022-09-15 10:41:03 1265

原创 JavaScript原型,原型链的理解

在对象实例和它的构造器之间建⽴⼀个链接（它是 __proto__ 属性，是从构造函数的 prototype 属性派⽣的），之后通过上溯原型链，在构造器中找到这些属性和⽅法。当试图访问⼀个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到⼀个名字匹配的属性或到达原型链的末尾。刚刚上⾯说了，所有的构造器都是函数对象，函数对象都是 Function 构造产⽣的。__proto__ 作为不同对象之间的桥梁，⽤来指向创建它的构造函数的原型对象的。

2022-09-15 08:33:27 105

原创 New操作符具体都做了些什么？

new 通过构造函数 Person 创建出来的实例可以访问到构造函数原型链中的属性（即实例与构造函数通过原型链连接了起来）new 通过构造函数 Person 创建出来的实例可以访问到构造函数中的属性。4.根据构建函数返回类型作判断，如果是原始值则被忽略，如果是返回对象，需要正常处理。在 JavaScript 中， new 操作符⽤于创建⼀个给定构造函数的实例对象。从上⾯可以发现，构造函数如果返回值为⼀个对象，那么这个返回值会被正常使⽤。可以发现，构造函数中返回⼀个原始值，然⽽这个返回值并没有作⽤。

2022-09-15 08:17:20 247

原创初级JS能力练习

3.一下数组中，var arr=["小铭不秃头"，"小铭真帅" ，"小铭才18" ，"小铭185"， "小铭真有钱" ，"小铭吃不胖"， "小铭能上天"， "你真丑" ]1.已知数组 var stringArray=["I","love","you"],打印出"i love you"5.将数组[20,0,16,11,77,0,5,0,25,7]中大于等于10的元素选出来，放到新数组中。4.求数组[26,24,56,34,15,57,45]里面所有元素的和，以及平均值。

2022-09-14 17:34:09 223

原创数组的操作方法及七种操作数组本身的方法

some -- 判断数组中是否有满足条件的元素如果有返回true 没有 false。lastIndexOf -- 查找最后一个符合条件的下标，查到不到返回-1。findIndex -- 查找第一个符合条件的下标，查到不到返回-1。filter -- 数组过滤返回所有符合条件的元素一个新数组。indexOf -- 查找第一个符合条件的下标，查到不到返回-1。pop -- 尾部删除返回的是被删除的元素。map -- 对数组的每一项进行操作，返回新数组。reverse -- 数组反转。

2022-09-14 16:40:10 272

原创如何解决跨域以及原理

后端会返回回调函数执行并包裹参数 callback(data) 备注：服务端不再返回 JSON 格式的数据，而是返回回调函数包裹数据（fn({name:'tom',age:18}），在 src 中进行了调用，这样实现了跨域。将添加到页面中执行（body.appendChild('script')）跨域是浏览器的跨域是由于浏览器的同源策略引起的不符合域名、协议、端口号的请求都会出现跨域的问题。里面定义proxy：要跨域的地址。最多的情况是后端处理跨域。

2022-09-14 14:51:34 325

原创 vuex(含图文)

4. actions内的方法一般是异步的方法，需要使用 this.$store.dispatch('actions内的方法名'，参数)2. 调用mutations内的方法 this.$store.commit('mutations内的方法名',参数)actions -- 异步的操作需要通过 mutations 来修改 state内的数据 --方法。mutations -- 唯一一个可以修改 state内数据的方法同步的方法 -- 方法。state -- 存放数据 -- 数据。

2022-09-14 13:58:35 200

原创原生js绑定事件的方法和dom操作

元素选择器.addEventListener(事件名（click,keydown...）, 回调函数, true捕获/false冒泡);绑定事件的第三种方法是用addEventListener()或者attachEvent()来绑定事件监听函数。1.行内绑定：在标签上写onclick=“事件名”2.在script中绑定。3.绑定事件监听函数。

2022-09-14 13:40:50 4803

原创事件循环（Event Loop）的理解（宏任务与微任务、async与await执行流程）

从上⾯我们可以看到，同步任务进⼊主线程，即主执⾏栈，异步任务进⼊任务队列，主线程内的任务执⾏完毕为空，会去任务队列读取对应的任务，推⼊主线程执⾏。上述过程的不断重复就事件循环。上⾯的例⼦中， await 会同步代码执⾏完，再回到 async 函数中，再执⾏之前阻塞的代码阻塞下⾯的代码（即加⼊微任务队列），先执⾏ async 外⾯的同步代码，5. 最后⼀⾏直接打印 script end ，现在同步代码执⾏完了，开始执⾏微任务，即 await 下⾯的代码，打印 async1 end。

2022-09-14 13:20:44 474

原创组件传值的十种方式

组件传值的十种方式 1.父传子 2.子传父 3.兄弟传值 4.本地存储 5.vuex 6. provide inject 7.attrs 8. refs 9.$parent和$children 10.v-model

2022-09-14 12:12:56 1709

原创 ajax和axios封装

1.需要对核心对象进行实例化 var 变量=new XMLHttpRequest（）ajax是async JavaScript and xml /异步的js和xml。if（变量.readystate==4&&变量.status==200）{变量.onreadystatechange=function（）{在浏览器里内置了ajxa的核心对象的：XMLHttpRequest。2.建立链接变量.open（请求方式，请求路径，同步/异步）3.发送请求变量.send（请求的参数）主要用来实现页面的局部刷新。

2022-09-14 11:45:03 454

weixin_58385666的博客