前端
王的剑鞘&wkq
这个作者很懒,什么都没留下…
展开
-
js如何动态生成变量、函数并使用
在项目中,为了实现一个需求,走入了误区。然后实现了动态创建变量和函数这么个操作,想了想还是分享出来,有需要的盆友还可以参考下。目的:let a = 'x'// 根据变量a,动态声明一个名为x的变量 let x首先把坑列出来吧:1.利用window创建全局变量window[a] = 'xxx'// 结果就是利用了全局变量都挂载在window的特点首先我们并不一定希望创建全局变量,其次此变量若为一个构造函数的话,通过此构造函数声明的变量,最终的构造函数会是一个匿名函数。原创 2020-09-29 15:57:41 · 5352 阅读 · 0 评论 -
深拷贝的几种实现,以及注意的点。
一直以来,都在用深拷贝。但从没自己实现过,想着是挺简单的,其实动手做还是有点坑的。概念: 普通的赋值,如果是引用类型(object)的话,如果把a赋值给b,那么我改变b,a也会变化,这个是浅拷贝。深拷贝则是与之相反,赋值与被赋值的怎样改变,也不会影响彼此。这也是我们大多数时候想要的。原理: 之所以会出现深浅拷贝的情况,是因为普通赋值如果是引用类型,那么js并不会在堆栈中新开辟空间来存储,而是仅仅将其指向堆栈中数据,这样本质上其实最终无论操作被赋值或者赋值的变量,其实都相当于操作...原创 2020-09-29 15:12:41 · 1053 阅读 · 0 评论 -
开发高阶vue组件时,打通父子兄通信,轻松调用任意父子兄的实例。
vue项目开发中,父子、子父、兄弟等等组件之间的通信总是很讨厌的,除了父子可以使用ref很简单的搞定,其余的都显得不是那么方便,这点放到开发高阶组件中体现的更明显。 例如,我们目标是开发一个类似锚点跳转效果的组件,结构期望大致如下:<anchor-scroll> <trigger-view trigger-key="xxx"> </trigger-view> <anchor-view anchor-key="xxx">...原创 2020-09-02 10:15:31 · 190 阅读 · 0 评论 -
记录一下,PC端实现拖拽操作需要注意的点。
一. mousemove并非逐帧监听,而是大概10-20毫秒触发一次。这个问题会导致:1.如果我们将鼠标移动事件绑在被拖动的滑块上,用户快速拖动会导致鼠标脱离滑块。所以将移动事件绑在body之类上会更友好。2.如果我们做了一些边缘限制,例如拖拽至边缘50px处便不可继续拖动。由于10-20毫秒鼠标可能移动1到30+ px的样子,所以只是普通做了个判断会导致我们超出一些这个限制,或者达不到这个限制就停止。二. 鼠标脱离滑块后的操作如果做了一些边缘限制,那么需要对鼠标脱离滑块后的一些操作进行原创 2020-08-26 15:14:09 · 539 阅读 · 0 评论 -
js中,微任务与宏任务的简单解析
大概整理了一下微任务与宏任务 微任务 宏任务 promise setTimeout MutationObserver setInterval requestAnimationFrame 其中requestAnimationFrame实际需求中我也没使用过,查阅了资料,解释为请求动画帧的api,应该也是挂window上的方法。首先,众所周知js是单线程...原创 2020-08-14 13:54:15 · 264 阅读 · 0 评论 -
简单实现函数防抖、函数节流
节流概念: 限制函数触发频率,规定时间内只能触发一次。代码实现:function Throttle(fun,t) { let timeout return function () { if(!timeout){ timeout = setTimeout(()=>{ timeout=null },t) fun(arg原创 2020-08-13 11:27:46 · 808 阅读 · 0 评论 -
常用的JSON数据操作汇总
开发小程序,vue项目,react项目等的出现,使得由传统的大量操作dom,改为了只操作数据就dom可以响应变化。所以日常开发中,接触最多的就是数据格式处理,在此记录一些常用的,并陆续整理:多个数组合并并去重:let a = [1,2,3,4,5,6]let b = [5,6,7,8,9,10]let c = Array.from(new Set(a.concat(b)))console.log(c)// [1,2,3,4,5,6,7,8,9,10]多个数组提取共同部分:le..原创 2020-08-12 15:57:42 · 396 阅读 · 0 评论 -
手写基础Promise构造函数
实现前,先总结下promise的基本特点:1.接受一个函数,函数的两个参数为两个回调函数,分别对应成功与失败。2.一旦执行了一个回调方法,那么内部状态则会变为对应的成功或失败,不可逆(一旦改变后,不会再改变,并且不会执行本身以外的回调函数)3.可以以then方法,实现链式的调用,接受两个参数,分别对应成功与失败以上三点基本为一个promise的核心了,具体分段解析都写在下面代码的注释中:// 创建pro构造函数 function Pro(fn) { // 声明相原创 2020-08-07 17:35:35 · 536 阅读 · 0 评论 -
继承中,this和原型链的区别
群里有小伙伴面试遇到这个问题,这个初学js的时候,大家肯定都有研究过。无奈现在大环境都是各种使用第三方插件、框架。导致很多基础的东西都有些淡忘了,在此进行简单的记录与解释。this继承最经典的当属利用apply与call这两个方法了,方法没什么区别,区别只在于参数是一个还是多个。function Human(name) { this.age = '14' this.sex =' boy' this.name = name}let people = {...原创 2020-08-06 17:00:28 · 276 阅读 · 0 评论 -
js中,为什么倒序for循环的速度大于正序for循环?
首先要说明的是,这个命题是不完整的,应该说是特定条件下倒序循环优于正序循环。在解决这个疑问前,我们先做几个小实验来证明一些事情:1.数值大小对计算加减法速度的影响 let number = 1000000000 console.time() for (let i = 0; i<10001;i++) { number-=1 } console.timeEnd()由以上一段简单的代码,我分别设置了10w与一亿(数值过小没测..原创 2020-08-05 10:20:31 · 1709 阅读 · 0 评论 -
generator个人浅析
本文无配图,无代码讲解,纯粹个人总结+记录对generator函数的理解:generator本意是一个js异步编程解决方案。ps: 根据它的特性也许一些特殊使用场景也适合使用。generator函数作为异步执行方案的优缺点:缺点是不写一个执行器的话,可读性极差,嵌套很多;优点是有了执行器后,代码非常直观,阅读上最接近于同步编程,并且代码量很少。ps:执行器是指可以让generator函数自动的调用至执行完毕,目前generator函数的执行器都需要yield后面为函数,这个勉强.原创 2020-08-04 16:41:24 · 389 阅读 · 0 评论 -
vue中keepAlive缓存清除的问题
vue项目中经常会用到keepalive来做缓存,在应付基本要求上可以说非常方便。但是遇到一个页面,根据条件不同,分别缓存或者不缓存,就有些麻烦了。首先先把坑列出来:1.<keep-alive v-if="xxx"> <router-view /></keep-alive><keep-alive v-else> <router-view /></keep-alive>网上很原创 2020-06-10 10:12:16 · 13417 阅读 · 6 评论 -
express中通过req.body获取值为undefined的问题
自己记录用。由于express处理返回值是通过一个中间件进行处理的(其实就类似把不规整的数据格式化再输出,也就是说未经过处理是没有body这个值的)。这个中间件就是:body-parser引入express后 就可以通过require引入 body-parservar app = require('express')(); //引入express库var bodyParser = require('body-parser');//用于req.body获取值的app.use(bo原创 2020-06-02 14:02:32 · 2464 阅读 · 2 评论