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('取消后重新計時，在計時結束之前執行')