快捷導(dǎo)航

vue前端常用的工具類總結(jié)

更新時間：2024年01月04日 15:08:25 作者：SuperYiY

這篇文章主要為大家詳細(xì)介紹了6個vue前端常用的工具類,可直接復(fù)用,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

Byte 轉(zhuǎn) KB/MB/GB

initUtil.getfilesize = (size = 0,) => {
    if (!size) return '0.00GB';
    const num = 1000.00; //byte
    if (size < num)
        return size + "B";
    if (size < Math.pow(num, 2))
        return (size / num).toFixed(2) + "KB"; //kb
    if (size < Math.pow(num, 3))
        return (size / Math.pow(num, 2)).toFixed(2) + "MB"; //M
    if (size < Math.pow(num, 4))
        return (size / Math.pow(num, 3)).toFixed(2) + "GB"; //G
}

知識點：

1、Math.pow(base, exponent)：Math.pow(2, 3)，2 的 3 次方是 8。

2、toFixed(2) 格式化數(shù)字，返回字符串類型，當(dāng)前保留數(shù)字后兩位

獲取url指定參數(shù)

使用 URLSearchParams 對象：

initUtil.getUrlParam = (name) => {
    // 假設(shè) URL 為：https://example.com/page?name=John&age=25
    // 創(chuàng)建 URLSearchParams 對象，將 URL 查詢參數(shù)解析到該對象中
    const urlParams = new URLSearchParams(window.location.search);
    // 獲取指定參數(shù)的值
    return urlParams.get(name)
}

使用正則表達(dá)式：

initUtil.getUrlParam = (name,url) => {
    name = name.replace(/[\[\]]/g, "\\$&");
    const regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url || window.location.href);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

getUrlParam('name')

知識點

1、正則表達(dá)式（Regular Expression）：正則表達(dá)式用于在 URL 中匹配指定的參數(shù)名，并捕獲對應(yīng)的參數(shù)值。 name = name.replace(/[[]]/g, “\$&”); 這一行用于將參數(shù)名中的方括號進(jìn)行轉(zhuǎn)義，確保正則表達(dá)式匹配正確。

2、RegExp 對象： const regex = new RegExp(“[?&]” + name + “(=([^&#]*)|&|#|$)”); 創(chuàng)建了一個正則表達(dá)式對象，該正則表達(dá)式匹配 URL 查詢字符串中指定參數(shù)名的模式。

3、exec 方法： regex.exec(url || window.location.href); 使用 exec 方法在URL中執(zhí)行正則表達(dá)式，返回匹配的結(jié)果數(shù)組。結(jié)果數(shù)組中，results[0] 包含整個匹配項，results[2] 包含參數(shù)值

日期格式化

initUtil.dateFormat = (date, format = 'YYYY-MM-DD HH:mm:ss') => {
    const config = {
        YYYY: date.getFullYear(),
        MM: date.getMonth() + 1,//getMonth() 方法根據(jù)本地時間返回指定日期的月份（從 0 到 11）
        DD: date.getDate(),
        HH: date.getHours(),
        mm: date.getMinutes(),
        ss: date.getSeconds(),
    }
    for (const key in config) {
        format = format.replace(key, config[key])
    }
    return format
}

知識點：

replace方法的基本語法是：

newString = originalString.replace(searchValue, replaceValue);

originalString 是原始字符串。

searchValue 是要被替換的子字符串或正則表達(dá)式。

replaceValue 是替換的內(nèi)容。

如果 searchValue 是一個字符串，只會替換第一次出現(xiàn)的匹配項。

如果 searchValue 是一個正則表達(dá)式，會替換所有匹配項。

返回的是一個新的字符串，原始字符串并沒有被改變

以下是一些示例：

let originalString = "Hello, world! Hello, universe!";
let newString = originalString.replace("Hello", "Hi");
console.log(newString);
// 輸出: "Hi, world! Hello, universe!"

let regex = /Hello/g;  // 使用正則表達(dá)式，全局匹配
newString = originalString.replace(regex, "Hi");
console.log(newString);
// 輸出: "Hi, world! Hi, universe!"

返回時間段

initUtil.getTimeState = (time, lang) => {
    let text = ``;
    if (time) {
        // 獲取當(dāng)前小時
        let hours = Number(time.split(':')[0]);
        // 設(shè)置默認(rèn)文字
        
        // 判斷當(dāng)前時間段
        if (lang !== 'en') {
            if (hours >= 0 && hours <= 11) {
                text = `上午`;
            } else {
                text = `下午`;
            }
        } else {
            if (hours >= 0 && hours <= 11) {
                text = `AM`;
            } else {
                text = `PM`;
            }
        }
    }
    // 返回當(dāng)前時間段對應(yīng)的狀態(tài)
    return text;
}

防抖

initUtil.debounce = (fn, delay = 500) => {
    let timer
    return function () {
        clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(this, arguments)
        }, delay)
    }
}

節(jié)流

initUtil.throttle = (fn, delay = 500) => {
    let timer
    return function () {
        if (!timer) {
            clearTimeout(timer)
            timer = setTimeout(() => {
                fn.apply(this, arguments)
                timer = null
            }, delay)
        }
    }
}

到此這篇關(guān)于vue前端常用的工具類總結(jié)的文章就介紹到這了,更多相關(guān)vue工具類內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: