前端使用频率最高的JS工具-lodash.js

1.介绍
Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。

Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。

Lodash 的模块化方法 非常适用于：

• 遍历 array、object 和 string
• 对值进行操作和检测
• 创建符合功能的函数

官方文档:https://www.lodashjs.com/docs/lodash.chunk

2.使用
1.直接引入jS

使用使用CDN
https://cdn.baomitu.com/lodash.js

<script src="https://lib.baomitu.com/lodash.js/4.17.21/lodash.core.js"></script>

2.使用npm安装

$ npm i -g npm //全局安装
$ npm i --save lodash

3.nodejs

// Load the full build.
var _ = require('lodash');
// Load the core build.
var _ = require('lodash/core');
// Load the FP build for immutable auto-curried iteratee-first data-last methods.
var fp = require('lodash/fp');
 
// Load method categories.
var array = require('lodash/array');
var object = require('lodash/fp/object');
 
// Cherry-pick methods for smaller browserify/rollup/webpack bundles.
var at = require('lodash/at');
var curryN = require('lodash/fp/curryN');

3.功能

我们介绍两个重要的函数 节流和

1.节流(_.throttle)

概念： 限制一个函数在一定时间内只能执行一次。

看下面例子，拖动滚动条实例

window.onscroll = functiion(){
     if(页面滚动距离 > 800) 显示按钮
     else 隐藏按钮
}

这段逻辑有什么问题，如果你一直拖动，页面的刷新频率会很高，每次都要加载页面，会导致页面很卡。

所以我们一般会限制一段时间内置加载一次，比如 200ms执行一次。那么用js怎么实现呢？

window.onscroll = (function(){
   var lasttime = 0; 
   return function(){
       var now = new Date().getTime(); //每次触发事件获取当前时间
       if( now-lasttime > 200 ){ //若时间间隔大于了200ms
           lasttime = now;  //执行代码，并重新计时
           //你的代码
       }
   }
})()

示意图如下；

用节流的方式，可以保证在一段时间内，只有第一次执行是生效的
直到超过了设定的时间段，才有机会执行下一次
大大的降低了原有函数的执行频率
顾名思义，函数节流。

那么，用lodashjs 怎么实现呢？

我们可以使用 _.throttle 函数来实现：

// 避免在滚动时过分的更新定位
jQuery(window).on('scroll', _.throttle(updatePosition, 100));
 
// 点击后就调用 `renewToken`，但5分钟内超过1次。
var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
jQuery(element).on('click', throttled);
 
// 取消一个 trailing 的节流调用。
jQuery(window).on('popstate', throttled.cancel);

2.防抖 (_.debounce)

比如我们做搜索模块时，如果每打一个字就从后台查询一次给予提示，但是如果有人手速非常快，这就会导致查询后台的次数更多。

当用户按下键盘后，我们不要立刻向服务器发起请求

而是等待300ms

如果接下来300ms内，用户不再输入内容。

则表示他已经把想要查询的单词写完了

这个时候我们再发起请求查询搜索提示

就大大的避免了浪费。

实现代码如下：

于是，我们接下来再对代码做一次优化：

inputEle.addEventListener("keyup", (function(e){ //这是一个自运行函数
    var t = null;
    return function(){ //真正的事件函数在这里
        clearTimeout(t); //每次触发，都把前面的定时器关闭，尽管第一次定时器并不存在
        t = setTimeout(function(){ //开启新的定时器
            //ajax(...); 发送请求到服务器
        }, 300);
    }
})())

示意图如下:

只要在300ms连续触发键盘事件，新的定时器总是会替代旧的定时器
那么，连续过快的键盘输入，将不会触发多次请求
而是在键盘输入结束后（300ms内不再输入）发出一次请求

那么 使用lodashjs 怎么实现呢？

// 避免窗口在变动时出现昂贵的计算开销。
jQuery(window).on('resize', _.debounce(calculateLayout, 150));
 
// 当点击时 `sendMail` 随后就被调用。
jQuery(element).on('click', _.debounce(sendMail, 300, {
  'leading': true,
  'trailing': false
}));
 
// 确保 `batchLog` 调用1次之后，1秒内会被触发。
var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
var source = new EventSource('/stream');
jQuery(source).on('message', debounced);
 
// 取消一个 trailing 的防抖动调用
jQuery(window).on('popstate', debounced.cancel);