xe utils基礎函式庫

2022-06-09 18:54:08 字數 2168 閱讀 2795

xe-utils函式庫api文件

// 安裝

npm install xe-utils

// 引入方式1

const xeutils = require('xe-utils')

// 引入方式2// 引入方式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) => // 返回自定義資料

}, )

節流函式#使用
/* 備註: 當被呼叫 n 毫秒才會執行,如果在這時間內被呼叫則至少每隔 n 毫秒才呼叫一次該函式; 

使用場景: 間隔一段時間執行一次**的場景有

1、滾動載入,載入更多或滾到底部監聽

2、谷歌搜尋框,搜尋聯想功能

3、高頻點選提交、表單重複提交

實現原理: 函式節流的目的,是為了限制函式一段時間內只能執行一次。因此,通過使用定時任務,延時方法執行。在延時的時間內,方法若被觸發,則直接退出方法。從而,實現函式一段時間內只執行一次。

*/throttle(callback, wait[, options])

// options:

// 預設: 在計時結束之前執行, 等價於

document.body.addeventlistener("scroll", xeutils.throttle(fn, 100))

// 在計時結束之前執行 leading: true

document.body.addeventlistener("scroll", xeutils.throttle(fn, 100, ))

// 在計時結束之後執行 trailing: true

document.body.addeventlistener("scroll", xeutils.throttle(fn, 100, ))

// 單獨使用時

let func = xeutils.throttle(function(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), )

// 在計時結束之前執行

document.addeventlistener('resize', xeutils.debounce(fn, 100, true))

document.addeventlistener('resize', xeutils.debounce(fn, 100, ))

// 單獨使用

let func = xeutils.debounce(function (msg) , 300)

func('計時結束之前執行一次')

func.cancel(); // 取消,中斷計時

func('取消後重新計時,在計時結束之前執行')

jQuery函式庫基礎

src js jquery 1.12.4.min.js script 寫自己的 呼叫jquery函式 script 將獲取元素的語句寫到頁面頭部,會因為元素還沒有載入而出錯,jquery提供了ready方法解決這個問題,它的速度比原生的 window.onload 更快。src jquery jqu...

js基礎 陣列函式庫

陣列函式庫 var aarr 1,2,3,3,2,1,4,5,6,6,5,4 function arrtools arrtools.prototype var arr2 for var key in arr return arr2 2 陣列亂序 randomarr function arr 3 獲取...

函式庫檔案

乙個很簡單的問題除錯了好久,不過還算有收穫。現總結一下 1.vs2008中 math.h 標頭檔案中沒有定義m pi,如果程式確實要用m pi則需自己定義。define m pi 3.14159265358979323846 2.如果程式中自己定義的函式比較多,為了除錯方便使用方便,可以將這些函式都...