xe-utils基础函数库

xe-utils函数库API文档
函数库、工具类：基本函数、日期转换函数、浏览器相关操作函数、cookie操作、对数组和对象操作的函数等... 可对比对象数组，千分符，格式化字符串各种形式

// 安装
npm install xe-utils

// 引入方式1
const XEUtils = require('xe-utils')

// 引入方式2
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>

// 引入方式3 
import XEUils from 'xe-utils'
// 注入到根实列中
Vue.prototype.$utils = XEUils;
// 使用的时候  this.$utils 即可

.mapTree 循环树形

# 循环树形，并返回树形，适用于对树形进行加工处理。
this.$utils.mapTree(tree, (item: any, index: number, items: any[], path: string[], parent: any, nodes: any[]) => {
	// item 每一条数据-包含子数据
	// index 对应索引
	// items 源数据
	// path 路径
	// parent 父节点数据
	// nodes 含当前节点及所有父节点
	// return item; // 返回元数据 
	return {} // 返回自定义数据
}, {children: 'children'})

---

节流函数#使用

/* 备注: 当被调用 n 毫秒才会执行，如果在这时间内被调用则至少每隔 n 毫秒才调用一次该函数; 
   使用场景: 间隔一段时间执行一次回调的场景有
      1、滚动加载，加载更多或滚到底部监听
      2、谷歌搜索框，搜索联想功能
      3、高频点击提交、表单重复提交
    实现原理: 函数节流的目的，是为了限制函数一段时间内只能执行一次。因此，通过使用定时任务，延时方法执行。在延时的时间内，方法若被触发，则直接退出方法。从而，实现函数一段时间内只执行一次。
 */
throttle(callback, wait[, options]) 
// options: { leading: true/false, trailing: true/false }
// 默认: 在计时结束之前执行, 等价于 { leading: true, trailing: false }
document.body.addEventListener("scroll", XEUtils.throttle(fn, 100))
// 在计时结束之前执行 leading: true
document.body.addEventListener("scroll", XEUtils.throttle(fn, 100, {
	leading: true,
	trailing: false
}))
// 在计时结束之后执行 trailing: true
document.body.addEventListener("scroll", XEUtils.throttle(fn, 100, {
	leading: false,
	trailing: true
}))

// 单独使用时
let func = XEUtils.throttle(function(msg) {
	console.log(msg);
}, 300);
func('延迟执行');
func.cancel(); // 取消，中断计时
func("取消后中断计时, 再次调用会马上执行");

---

防抖函数#使用

/* 备注: 当被调用 n毫秒后才会执行, 如果在这时间内又被调用则重新计算执行时间
   使用场景: 连续的事件，只需触发一次回调的场景有
      1、搜索框搜索输入; 只需用户最后一次输入完，再发送请求
      2、手机号、邮箱验证输入检测
      3、窗口大小Resize; 窗口调整完成后，计算窗口大小，防止重复渲染
   实现原理: 在执行目标方法时，会等待一段时间。当又执行相同方法时，若前一个定时任务未执行完，则 clear 掉定时任务，重新定时.
 */
debounce(callback, wait[, options])
// 在计时结束之后执行
document.addEventListener('resize', XEUtils.debounce(fn, 100))
// 在计时结束之后执行
document.addEventListener('resize', XEUtils.debounce(fn, 100), {
	leading: fase,
	trailing: true
})
// 在计时结束之前执行
document.addEventListener('resize', XEUtils.debounce(fn, 100, true))
document.addEventListener('resize', XEUtils.debounce(fn, 100, {
	leading: true,
	trailing: false
}))

// 单独使用
let func = XEUtils.debounce(function (msg) {
	console.log(msg)
}, 300)
func('计时结束之前执行一次')
func.cancel(); // 取消，中断计时
func('取消后重新计时，在计时结束之前执行')