一切福田,不離方寸,從心而覓,感無不通。

Category Archives: Frontend

JS判断是否是数组

1、通过instanceof判断 instanceof运算符用于检验构造函数的prototype属性是否出现在对象的原型链中的任何位置,返回一个布尔值。

在上方代码中,instanceof运算符检测Array.prototype属性是否存在于变量a的原型链上,显然a是一个数组,拥有Array.prototype属性,所以为true。 需要注意的是,prototype属性是可以修改的,所以并不是最初判断为true就一定永远为真。 其次,当我们的脚本拥有多个全局环境,例如html中拥有多个iframe对象,instanceof的验证结果可能不会符合预期,例如:

导致这种问题是因为iframe会产生新的全局环境,它也会拥有自己的Array.prototype属性,让不同环境下的属性相同很明显是不安全的做法,所以Array.prototype !== window.frames[0].Array.prototype,想要arr instanceof Array为true,你得保证arr是由原始Array构造函数创建时才可行。 2、通过constructor判断 我们知道,实例的构造函数属性constructor指向构造函数,那么通过constructor属性也可以判断是否为一个数组。

同样,这种判断也会存在多个全局环境的问题,导致的问题与instanceof相同。   3、通过Object.prototype.toString.call()判断 Object.prototype.toString().call()可以获取到对象的不同类型,多个全局环境也适用

4、通过Array.isArray()判断 简单好用,而且对于多全局环境,Array.isArray() 同样能准确判断,但有个问题,Array.isArray() 是在ES5中提出,也就是说在ES5之前可能会存在不支持此方法的情况。

最终推荐方法

  from:https://www.cnblogs.com/chenmeijiao/p/12060845.html

龙生   17 Sep 2020
View Details

移动端touchstart,touchmove,touchend

touchstart:手指触摸到一个 DOM 元素时触发。 touchmove:手指在一个 DOM 元素上滑动时触发。 touchend:手指从一个 DOM 元素上移开时触发。 touchcancel:当系统停止跟踪触发触发   event.touches  当前触摸屏幕的触摸点数组 event.changedTouches   移动的触摸点信息数组 event.targetTouches  只包含放在元素上的触摸信息数组   touch对象代表一个触点,通过event.touches[0]获取

  from:https://www.cnblogs.com/fanbulaile/p/10880232.html

龙生   27 Aug 2020
View Details

简单理解Vue中的nextTick

Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下。其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick。 一、示例 先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用。 模板

  Vue实例

  点击前 点击后 从图中可以得知:msg1和msg3显示的内容还是变换之前的,而msg2显示的内容是变换之后的。其根本原因是因为Vue中DOM更新是异步的(详细解释在后面)。 二、应用场景 下面了解下nextTick的主要应用的场景及原因。 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中 在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数,因为该钩子函数执行时所有的DOM挂载和渲染都已完成,此时在该钩子函数中进行任何DOM操作都不会有问题 。 在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作都应该放进Vue.nextTick()的回调函数中。 具体原因在Vue的官方文档中详细解释: Vue 异步执行 DOM 更新。只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部尝试对异步队列使用原生的 Promise.then 和MessageChannel,如果执行环境不支持,会采用 setTimeout(fn, 0)代替。 例如,当你设置vm.someData = 'new value’,该组件不会立即重新渲染。当刷新队列时,组件会在事件循环队列清空时的下一个“tick”更新。多数情况我们不需要关心这个过程,但是如果你想在 DOM 状态更新后做点什么,这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们确实要这么做。为了在数据变化之后等待 Vue 完成更新 DOM ,可以在数据变化之后立即使用Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。 三、nextTick源码浅析 作用 Vue.nextTick用于延迟执行一段代码,它接受2个参数(回调函数和执行回调函数的上下文环境),如果没有提供回调函数,那么将返回promise对象。 源码

  首先,先了解nextTick中定义的三个重要变量。 callbacks 用来存储所有需要执行的回调函数 pending 用来标志是否正在执行回调函数 timerFunc 用来触发执行回调函数 接下来,了解nextTickHandler()函数。

  这个函数用来执行callbacks里存储的所有回调函数。 接下来是将触发方式赋值给timerFunc。 先判断是否原生支持promise,如果支持,则利用promise来触发执行回调函数; 否则,如果支持MutationObserver,则实例化一个观察者对象,观察文本节点发生变化时,触发执行所有回调函数。 如果都不支持,则利用setTimeout设置延时为0。 最后是queueNextTick函数。因为nextTick是一个即时函数,所以queueNextTick函数是返回的函数,接受用户传入的参数,用来往callbacks里存入回调函数。 上图是整个执行流程,关键在于timeFunc(),该函数起到延迟执行的作用。从上面的介绍,可以得知timeFunc()一共有三种实现方式。 Promise MutationObserver setTimeout 其中Promise和setTimeout很好理解,是一个异步任务,会在同步任务以及更新DOM的异步任务之后回调具体函数。 下面着重介绍一下MutationObserver。 MutationObserver是HTML5中的新API,是个用来监视DOM变动的接口。他能监听一个DOM对象上发生的子节点删除、属性修改、文本内容修改等等。 调用过程很简单,但是有点不太寻常:你需要先给他绑回调:

  通过给MutationObserver的构造函数传入一个回调,能得到一个MutationObserver实例,这个回调就会在MutationObserver实例监听到变动时触发。 这个时候你只是给MutationObserver实例绑定好了回调,他具体监听哪个DOM、监听节点删除还是监听属性修改,还没有设置。而调用他的observer方法就可以完成这一步:

[…]

龙生   26 Aug 2020
View Details

使用CSS实现表格细边框的三种方式

说到表格,虽说随着前端技术的发展div已经遍地开花彻底推翻了table布局的时代。可是当遇到报表之类的操作是table还是非常值得使用的。 由于操作表格的时候不可避免使用到细边框效果,所以我就整理了一下常用的三种实现细边框表格的方式,分享给大家,代码如下:

  from:https://www.cnblogs.com/kutimes/p/5054357.html  

龙生   05 Aug 2020
View Details

js删除数组指定下标的元素

现在遇到一个需求要删掉下标为index的元素,下面介绍两种方法: 一、splice:删除后,后面的元素自动填补到前面 arr.splice(index, 1) 举例:现在有数组  arr=['a',’b',’c',’d'] arr.splice(1, 1); //结果arr=['a',’c',’d'](下标1开始,删除1个) 注意: 上面的代码中,我们要注意,如果想修改 arr 的值,直接这样操作 arr 直接就变了,而不要写作 arr= arr.splice(1,1),因为 splice() 方法的返回值为删除掉的元素。 补充: spice增加: arr.splice(1,0,’str'); //结果arr=['a',’str',’b',’c',’d'] spice替换: arr.splice(1,1,’str'); //结果arr=['a',’str',’c',’d'] spice替换2: arr.splice(1,2,’str'); //结果arr=['a',’str',’d'](就是说:下标1开始2个换成1个“str”) spice删除多个: arr.splice(1,2); //结果arr=['a',’d'] 二、delete:删除后,该下标位置元素为undefined deletearr[index];//结果arr=['a',undefined,’c',’d'] from:https://www.cnblogs.com/belongs-to-qinghua/p/12393296.html

龙生   31 Jul 2020
View Details

vue 强制刷新组件重新渲染

实现功能:使用富文本编辑器编写文章,然后把编写成功的文章用子组件显示。 问题描述:父组件给子组件传递数据,子组件第一次调用数据的时候页面渲染是正常的,当数据变化的时候,子组件的页面渲染就失效了。 问题判断:通过一次次测试发现,第一次打开子组件的时候页面的渲染是正常的,后面打开之后渲染就失效了。所以初步怀疑是第二次调用组件的时候没有对数据进行渲染。   解决方案一: 当数据变更后,通过watch 监听,先去销毁当前的组件,然后再重现渲染。使用 v-if 可以解决这个问题

  解决方案二: 通过vue key 实现,原理官方文档。所以当key 值变更时,会自动的重新渲染。(推荐)

  from:https://www.cnblogs.com/zyulike/p/12036456.html

龙生   30 Jul 2020
View Details

JS中find(), findIndex(), filter(), forEach(), some(), every(), map()方法

1. find()与findIndex() find()方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。 [1, 2, 5, -1, 9].find((n) => n < 0) //找出数组中第一个小于 0 的成员 // -1 find()方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。 findIndex()方法的用法与find()方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。 [1, 2, 5, -1, 9].findIndex((n) => n < 0) //返回符合条件的值的位置(索引) // 3 2. filter() filter()方法使用指定的函数测试所有元素,并创建一个包含所有通过测试的元素的新数组。 filter 为数组中的每个元素调用一次 callback 函数,并利用所有使得 callback 返回 true 或 等价于 true 的值 的元素创建一个新数组。那些没有通过 callback 测试的元素会被跳过,不会被包含在新数组中。filter 不会改变原数组。 var arr = [10, 20, 30, 40, 50] var newArr = arr.filter(item => item > 30); console.log(newArr); //[40, 50] //数组去重 var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7, 8, 8, 0, 8, 6, 3, […]

龙生   29 Jul 2020
View Details

JS数组转字符串(3种方法)

数组与字符串相互转换方法
toString() 将数组转换成一个字符串
toLocalString() 把数组转换成本地约定的字符串
join() 将数组元素连接起来以构建一个字符串

龙生   29 Jul 2020
View Details

element table 批量获取选择的行的数据(selection 勾选框)

批量选择table 的行数 代码实现: 在<el-table >添加属性 ref = "multipleTable " , 在<el-table-colum> 添加type属性 type=" selection "

再通过一下代码就能获取已选择的行的数据;

这里的 multipleTable 是上面ref 的值;   from:https://blog.csdn.net/weixin_42517975/article/details/89631128

龙生   29 Jul 2020
View Details

element-ui table 怎么保持选择状态

1.设置row-key

  2.设置选择行状态 :reserve-selection=“true”

  from:https://blog.csdn.net/weixin_43153741/article/details/104842331

龙生   29 Jul 2020
View Details
1 14 15 16 59