.loomf-CSDN博客

原创必不可少的数组操作技巧

Array.splice()方法第三个参数大多数的时候都是用这个方法来截取数组中的某些内容，今天突然仔细阅读文档的时候发现它可以传递三个参数，有了这个参数可以在数组中指定的位置插入内容，直接上简单的代码看看吧// 常规使用，从索引1开始删除两项结果 [ 0, 3 ]let arr = [0,1,2,3];arr.splice(1, 2) // 第三个参数插入使用此时结果为 ['a',0, 1,2,3] let arr = [0,1,2,3]; arr.splice(0, 0,

2020-12-25 14:22:58 211 3

原创前端性能优化实现列表虚拟滚动

前端如何实现虚拟滚动最近项目列表数据越来越多,每次都要加载所有的性能不好的浏览器特别卡顿.前端有一个虚拟滚动的技术可以优化列表,所以特别研究了一下图示:根据上述图示,可以理解为虚拟滚动就是三个盒子外层为视窗, 中间层为整个数据列表的高度盒子没有渲染任何数据只是做撑开高度和滚动的作用, 内层盒子进行数据渲染和展示并且滚动的时候内层盒子不断的替换数据并且模拟滚动效果;代码实现// vue进行实现:<template> <div :style="`height:${v

2021-02-26 14:23:20 2470 1

原创 JS实现拖拽效果注意点

最近工作中要去实现组织架构的拖拽行为，然后被一个点给坑了乘着周末有时间记录一下避免再次采坑简单效果图示：步骤：其实就是监听几个事件，主要是坑在最好一步放入的时候需要阻止拖拽结束的默认事件拖拽开始 dragstart拖拽中 drag拖拽结束 dragover拖拽离开 dragleave拖拽进入 drageenter监听放入 drop 需要阻止默认事件并且阻止拖拽结束的默认事件简单代码：<body><div class="box"> <.

2021-01-03 20:30:26 204 1

原创必须了解的JS函数

1. 什么是函数？数学中函数定义: x为自变量经过y计算后有唯一的对应值则y就是x的函数。编程中函数定义: 一个固定的功能或者程序被封装的过程,实现一个固定的功能或者程序在这个封装体中需要一个入口和出口,入口就是参数,出口就是返回。2. 了解函数声明函数声明式函数字面量(匿名函数) // 申明一个test函数function test() { // 里面为执行语句}// 函数字面量let test = function () { // 执行语句}函数表达式和

2020-12-30 21:04:02 78 1

原创兼容优化方案之惰性函数

什么是惰性函数？首先看下专业术语吧，它表示函数的执行的分支只会在函数第一次执行调用的过程中该函数覆盖为另一个按照合适的方法执行的函数。简单的理解就是惰性函数执行后改变了自己。简单案例function changFn(num) { switch (num) { case 1: changFn = () => { console.log(1) } break;

2020-12-28 22:02:00 109

原创函数防抖和节流区别

今天旁边刚毕业同事的问我函数节流和防抖到底怎么简单区分概念，突然一下哽住了忘记怎么回答了。现在刚回家好好理一下。函数防抖和函数节流区别其实很简单，举例：一个button如果绑定了函数防抖并且时间设置为3秒钟，如果快速不停的点击按钮回调事件不会触发只有两次点击的间隔超过3秒后才会触发。如果button绑定的是函数节流时间设置也是3秒钟，此时快速不停的点按钮，回调函数还是会3秒触发一次。总结：函数防抖每次点击后会重新计时。函数节流不会重新计时，时间到了就会触发函数防抖封装实现方法（拷.

2020-12-24 22:43:03 128

原创函数式编程-函数节流实现

简单实现函数节流函数节流简介代码实现逻辑说明函数节流简介对于在事件被触发n秒后再执行的回调函数，不停的进行触发每n秒只会执行一次。举例：对于一个绑定了函数节流的按钮，设置每5秒执行一次，不停的点击的时候每5秒只会执行一次回调函数。项目中可以节约性能。代码实现// fn 回调函数 time 节流时间function throttle(fn, time) { // 设置下定时器和开始时间 begin 执行后形成闭包 let t = null, begin = ne

2020-12-23 21:59:44 212

weixin_44777554的博客