前端开发必备：7个高效JavaScript工具函数及实现原理

简介：涵盖复制粘贴、URL参数解析、设备检测等高频场景，提供现代浏览器兼容方案，附代码示例与原理说明。

日常开发中，我们经常会用到很多通用的 JS 代码，例如 复制内容、从 URL 中获取指定参数 等，这些代码基本都可以封装成公共函数，用于不同的地方调用。

为了方便大家日常开发，防止忘记具体的代码实现，今天我们就来看看这七中常用代码片段

一：将内容复制到剪贴板

原理是模拟鼠标点击【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('复制成功')
}

二：解析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));
}

三：平滑滚动至页面顶部

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

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

四：获取当前页面滚动距离

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

五：判断当前设备是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
}

六：格式化货币

格式化货币是将一个金额转换成具有逗号表现的格式。例如：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}")
        }
    }
}

7.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}")
        }
    }
}

 

有遗漏或者不对的可以在我的公众号留言哦