前端開發必備：七個高效 JavaScript 工具函數及實現原理

作者：PHP星 2025-04-29 10:43:57

為了方便大家日常開發，防止忘記具體的代碼實現，今天我們就來看看這七種常用代碼片段。

日常開發中，我們經常會用到很多通用的 JS 代碼，例如復制內容、從 URL 中獲取指定參數等，這些代碼基本都可以封裝成公共函數，用于不同的地方調用。

為了方便大家日常開發，防止忘記具體的代碼實現，今天我們就來看看這七種常用代碼片段。

1. 將內容復制到剪貼板

原理是模擬鼠標點擊【input】，執行復制【input】中的內容，這種方式，兼容性極差。在開發APP嵌套網頁時就發現APP端可能會禁用此類行為，導致復制失敗。個人測試過發現IOS端基本不行，完整代碼如下：

input框也可以用textarea來代替

//參數為文本內容
function copy_content(text){
    //創建一個輸入框
    var transfer = document.createElement('input');
    // 防止頁面出現閃動的現象將輸入框高度設置為0
    transfer.style.height = 0;
    //將輸入框插入到頁面的一個div元素中
    document.body.appendChild(transfer)
    //給輸入框復制
    transfer.value = text;
    //讓輸入框獲得焦點
    transfer.focus();
    transfer.contentEditable = true;
    //設置輸入框為只讀狀態
    transfer.readOnly = false;
    //模擬點擊復制
    if(transfer.setSelectionRange) {
        transfer.setSelectionRange(0,transfer.value.length);
        var range = document.createRange();
        range.selectNodeContents(transfer);
    }else{
        transfer.select();
    }
    document.execCommand('copy',false,null);
    //讓輸入框失去焦點
    transfer.blur();
    //刪除輸入框元素
    transfer.remove()
    console.log('復制成功')
}

2. 解析URL獲取參數

在js中獲取url參數的方式有很多，在之前的文章【解析url獲取相關信息】中使用new URL對象解析url，今天我們結合new URLSearchParams對象來解析url并獲取指定參數內容，具體代碼如下：

function getQueryByName(url,name) {
    //解析url獲取參數部分內容
    let urlObj = new URL(url)
    //解析參數部分內容
    let query = new URLSearchParams(url.search)
    //獲取某個參數的內容并decode解碼
    return decodeURIComponent(query.get(name));
}

3. 平滑滾動至頁面頂部

function scrollToTop() {
    const c = document.documentElement.scrollTop || document.body.scrollTop


    if (c > 0) {
        window.requestAnimationFrame(scrollToTop)
        window.scrollTo(0, c - c / 8)
    }
}

4. 獲取當前頁面滾動距離

function getScrollPosition(el = window) {
    return {
        x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
        y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop,
    }
}

5. 判斷當前設備是Andoird還是iOS

在這里我們使用userAgent來判斷當前設備是安卓還是IOS

function getOSType() {
    let u = navigator.userAgent;
    let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
    let isIOS = !!u.match(/\(i[^]+( U)? CPU.+Mac OS X/);


    if (isIOS) {
        return 0
    }
    if (isAndroid) {
        return 1
    }
    return 2
}

6. 格式化貨幣

格式化貨幣是將一個金額轉換成具有逗號表現的格式。例如：123456789 轉換后：123,456,789

function formatMoney(money){
    return money.toLocaleString()
}

7. 進入和退出全屏

(1) 進入全屏

function fullScreen() {
    let el = document.documentElement
    let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen
    //typeof rfs != "undefined" && rfs
    if (rfs) {
        rfs.call(el)
    } else if (typeof window.ActiveXObject !== "undefined") {
        let wscript = new ActiveXObject("WScript.Shell")
        if (wscript != null) {
        wscript.SendKeys("{F11}")
        }
    }
}

(2) 推出全屏

function exitScreen() {
    let el = document
    let cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen
    //typeof cfs != "undefined" && cfs
    if (cfs) {
        cfs.call(el)
    } else if (typeof window.ActiveXObject !== "undefined") {
        let wscript = new ActiveXObject("WScript.Shell")
        if (wscript != null) {
        wscript.SendKeys("{F11}")
        }
    }
}

責任編輯：趙寧寧來源：編程經驗共享

開發代碼 JavaScript