- 博客(27)
- 收藏
- 关注
RSS订阅原创 js中事件冒泡和事件委托（事件代理）
事件冒泡：子节点一层层冒泡到根节点优点：减少代码量，只为子元素添加方法就可以缺点：方法直接作用于父元素上取消事件冒泡方法W3C：e.stopPropagation()IE：e.cancelBubble=true事件委托（事件代理）：利用冒泡的原理 把加事件加到父级上，触发执行效果优点：新添加的元素还会有之前的事件（动态绑定事件）...
2021-08-08 21:56:24
179
原创 js中重要api封装
用ES5实现数组的map方法核心要点:1）回调函数的参数有哪些，返回值如何处理。2）不修改原来的数组。Array.prototype.MyMap = function(fn, context){ var arr = Array.prototype.slice.call(this); //由于是ES5所以就不用...展开符了 var mappedArr = []; for (var i = 0; i < arr.length; i++ ){ mappedArr.pu
2021-08-08 21:43:08
321
原创 async/await的运行机制
async/await被称为 JS 中异步终极解决方案。asyncMDN 的定义: async 是一个通过异步执行并隐式返回 Promise 作为结果的函数。返回结果为Promise。async function func() { return 100;}console.log(func()); // Promise {<resolved>: 100}awaitasync function test() { console.log(100) let x =
2021-08-08 21:35:44
319
原创 JS异步编程有哪些方案？
回调函数fs.readFile('xxx', (err, data) => {});PromisereadFilePromise('1.json').then(data => { return readFilePromise('2.json')}).then(data => { return readFilePromise('3.json')}).then(data => { return readFilePromise('4.json')}
2021-08-08 21:26:25
71
原创 EventLoop
console.log('start');setTimeout(() => { console.log('timeout');});Promise.resolve().then(() => { console.log('resolve');});console.log('end');分析一下:1）刚开始整个脚本作为一个宏任务来执行，因此先打印start和end2）setTimeout 作为一个宏任务放入宏任务队列3）Promise.then作为一个为微任务放入到微
2021-08-08 21:20:13
81
原创 js中宏任务和微任务
在 JS 中，大部分的任务都是在主线程上执行，常见的任务有:1）渲染事件2）用户交互事件3）js脚本执行4）网络请求、文件读写完成事件等等。普通任务队列和延迟队列中的任务，都属于宏任务。对于每个宏任务而言，其内部都有一个微任务队列。1）将异步回调进行宏任务队列的入队操作。2）将异步回调放到当前宏任务的末尾。常见的微任务有MutationObserver、Promise.then(或.reject) 以及以 Promise 为基础开发的其他技术(比如fetch API)这便是宏任务和微任务
2021-08-08 21:17:31
321
原创 js中数据是如何存储的？
基本数据类型用栈存储，引用数据类型用堆存储。看起来没有错误，但实际上是有问题的。可以考虑一下闭包的情况，如果变量存在栈中，那函数调用完栈顶空间销毁，闭包变量不就没了吗？注：闭包变量是存在堆内存中的。具体而言，以下数据类型存储在栈中:booleannullundefinednumberstringsymbolbigint而所有的对象数据类型存放在堆中。...
2021-08-08 21:13:29
290
原创 JS中浅拷贝和深拷贝
重要: 什么是拷贝？首先来直观的感受一下什么是拷贝。let arr = [1, 2, 3];let newArr = arr;newArr[0] = 100;console.log(arr);//[100, 2, 3]这是直接赋值的情况，不涉及任何拷贝。当改变newArr的时候，由于是同一个引用，arr指向的值也跟着改变。现在进行浅拷贝:let arr = [1, 2, 3];let newArr = arr.slice();newArr[0] = 100;console.log
2021-08-08 21:10:54
52
原创 JS中this的理解
其实JS中的this是一个非常简单的东西，只需要理解它的执行规则就OK。在这里不想像其他博客一样展示太多的代码例子弄得天花乱坠， 反而不易理解。call/apply/bind可以显式绑定, 这里就不说了。主要这些场隐式绑定的场景讨论:1）全局上下文2）直接调用函数3）对象.方法的形式调用4）DOM事件绑定(特殊)5）new构造函数绑定6）箭头函数全局上下文全局上下文默认this指向window, 严格模式下指向undefined。直接调用函数比如:let obj = { a: fu
2021-08-08 21:05:29
156
原创 JS中flat---数组扁平化
对于前端项目开发过程中，偶尔会出现层叠数据结构的数组，我们需要将多层级数组转化为一级数组（即提取嵌套数组元素最终合并为一个数组），使其内容合并且展开。那么该如何去实现呢？需求:多维数组=>一维数组let ary = [1, [2, [3, [4, 5]]], 6];// -> [1, 2, 3, 4, 5, 6]let str = JSON.stringify(ary);调用ES6中的flat方法ary = ary.flat(Infinity);replace + split
2021-08-03 18:33:35
171
原创 什么是闭包
首先要明白作用域链的概念，其实很简单，在ES5中只存在两种作用域————全局作用域和函数作用域，当访问一个变量时，解释器会首先在当前作用域查找标示符，如果没有找到，就去父作用域找，直到找到该变量的标示符或者不在父作用域中，这就是作用域链，值得注意的是，每一个子函数都会拷贝上级的作用域，形成一个作用域的链条。 比如:var a = 1;function f1() { var a = 2 function f2() { var a = 3; console.log(a);//3 }}
2021-08-03 18:29:08
134
原创 如何让if(a == 1 && a == 2)条件成立？
var a = { value: 0, valueOf: function() { this.value++; return this.value; }};console.log(a == 1 && a == 2);//true
2021-08-03 18:26:19
319
原创 typeof 是否能正确判断类型？以及和instanceof的区别
对于原始类型来说，除了 null 都可以调用typeof显示正确的类型。typeof 1 // 'number'typeof '1' // 'string'typeof undefined // 'undefined'typeof true // 'boolean'typeof Symbol() // 'symbol'但对于引用数据类型，除了函数之外，都会显示"object"。typeof [] // 'object'typeof {} // 'object'typeof console
2021-08-03 18:20:20
206
原创 javascript中 null是对象吗？
结论: null不是对象。解释: 虽然 typeof null 会输出 object，但是这只是 JS 存在的一个悠久 Bug。在 JS 的最初版本中使用的是 32 位系统，为了性能考虑使用低位存储变量的类型信息，000 开头代表是对象然而 null 表示为全零，所以将它错误的判断为 object 。...
2021-08-03 18:08:26
266
原创 javascript的基本数据类型
在 JS 中，存在着 7 种原始值，分别是：booleannullundefinednumberstringsymbolbigintSymbol 为es6引入意义为 独一无二的值bigint 可以表示任意大的整数
2021-08-03 18:06:40
66
原创 vue 路由传参 params 与 query两种方式的区别
首先是写法上的区别query：this.$router.push({ path:"/detail", query:{ code:10011 }});params:this.$router.push({ name:"detail", params:{ code:10011 }})//注意：如果用params传参，而name参数用的是path，例如this.$router.push({ path:"detail", //这里应该用name
2021-08-03 17:50:24
149
原创 vue的history路由模式配置及后台配置
项目根目录文件夹名称：rootFile一：后台配置：1、Nginx：location ~ ^/rootFile/ { root F:/XXX; try_files $uri $uri/ /rootFile/index.html;}二：Vue配置：1、文件 router.js将 mode 设置成 history 模式，并设置base：rootFile（和网站根目录名称一致，不然会报错）export default new Router({ mode:'history', base
2021-08-03 16:52:07
4436
原创 vue-router路由的两种模式
类型: string默认值: "hash" (浏览器环境) | "abstract" (Node.js 环境)可选值: "hash" | "history" | "abstract"配置路由模式:hash : 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。history : 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。abstract : 支持所有 JavaScript 运行环境，
2021-08-03 16:37:58
253
原创 Vue中自定义过滤器
虽然VueJs给我们提供了很多强有力的过滤器，但有时候还是不够。值得庆幸的，Vue给我们提供了一个干净简洁的方式来定义我们自己的过滤器，之后我们就可以利用管道 “ | ” 来完成过滤。定义一个全局的自定义过滤器，需要使用 Vue.filter() 构造器。这个构造器需要两个参数。// 定义一个全局过滤器Vue.filter('dataFormat', function (input, pattern = '') { var dt = new Date(input); // 获取年月日 var
2021-08-02 12:05:50
184
原创 利用v-mode让父组件的值与子组件input框里的值双向绑定
我们知道v-model可以实现数据的双向绑定，但是，如果说这是一个复杂的输入框，在项目中也经常使用。此时我们我们就把这个输入框封装成组件，那怎么利用v-mode让父组件的值与子组件input框里的值双向绑定起来。1）父组件<InputBox v-model="mes"></InputBox> 根据上面讲的v-model语法糖，所以 InputBox那行代码也可以写成 <InputBox v-bind:value="value" v-on:input="mes= $ev
2021-08-02 12:02:58
697
原创 vue中对象更改检测
还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：var vm = new Vue({ data: { a: 1 }})// `vm.a` 现在是响应式的vm.b = 2// `vm.b` 不是响应式的对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object,propertyName, value) 方法向嵌套对象添加响应式属性。例如，对于：var vm = new Vue({ data: { us
2021-08-02 11:54:15
386
原创 vue中子组件调用父组件的方法
Vue中子组件调用父组件的方法，这里有三种方法提供参考第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法父组件<template> <div> <child></child> </div></template><script>import child from '~/components/dam/child';export default {components: {
2021-08-02 11:44:59
859
原创 Vue 组件中 data 为什么必须是函数
在 new Vue() 中， data 是可以作为一个对象进行操作的，然而在 component 中， data 只能以函数的形式存在，不能直接将对象赋值给它。当data选项是一个函数的时候，每个实例可以维护一份被返回对象的独立的拷贝，这样各个实例中的data不会相互影响，是独立的。...
2021-08-02 11:40:11
57
原创 $nextTick的使用
参数： {Function} [callback]用法：将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。实例：<template> <div> <p ref="msgp">{{msg}}</p> <button @click="change">$nextTick</button> &
2021-08-02 11:39:21
61
原创 vue常用的修饰符
1.按键修饰符如：.delete（捕获“删除”和”退格“键） 用法上和事件修饰符一样，挂载在v-on:后面，语法：v-on:keyup.xxx=’yyy’ ``<inputclass = 'aaa' v-model="inputValue"@keyup.delete="onKey"/>2.系统修饰符可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器(1) .ctrl(2) .alt(3) .shift(4) .meta3.鼠标按钮修饰符(1) .lef
2021-08-02 11:35:48
118
原创 前端常用算法
1，时间复杂度通常使用最差的时间复杂度来衡量一个算法的好坏。常数时间 O(1) 代表这个操作和数据量没关系，是一个固定时间的操作，比如说四则运算。对于一个算法来说，可能会计算出如下操作次数 aN + 1，N 代表数据量。那么该算法的时间复杂度就是 O(N)。因为我们在计算时间复杂度的时候，数据量通常是非常大的，这时候低阶项和常数项可以忽略不计。当然可能会出现两个算法都是 O(N) 的时间复杂度，那么对比两个算法的好坏就要通过对比低阶项和常数项了。2，位运算位运算在算法中很有用，速度可以比四则运算快很多
2021-07-28 23:35:01
3335
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人