前端開(kāi)發(fā)必備：七個(gè)高效 JavaScript 工具函數(shù)及實(shí)現(xiàn)原理
作者：PHP星
為了方便大家日常開(kāi)發(fā)，防止忘記具體的代碼實(shí)現(xiàn)，今天我們就來(lái)看看這七種常用代碼片段。
日常開(kāi)發(fā)中，我們經(jīng)常會(huì)用到很多通用的 JS 代碼，例如 復(fù)制內(nèi)容、從 URL 中獲取指定參數(shù) 等，這些代碼基本都可以封裝成公共函數(shù)，用于不同的地方調(diào)用。
為了方便大家日常開(kāi)發(fā)，防止忘記具體的代碼實(shí)現(xiàn)，今天我們就來(lái)看看這七種常用代碼片段。
1. 將內(nèi)容復(fù)制到剪貼板
原理是模擬鼠標(biāo)點(diǎn)擊【input】，執(zhí)行復(fù)制【input】中的內(nèi)容，這種方式，兼容性極差。在開(kāi)發(fā)APP嵌套網(wǎng)頁(yè)時(shí)就發(fā)現(xiàn)APP端可能會(huì)禁用此類(lèi)行為，導(dǎo)致復(fù)制失敗。個(gè)人測(cè)試過(guò)發(fā)現(xiàn)IOS端基本不行，完整代碼如下：
input框也可以用textarea來(lái)代替
//參數(shù)為文本內(nèi)容
function copy_content(text){
//創(chuàng)建一個(gè)輸入框
var transfer = document.createElement('input');
// 防止頁(yè)面出現(xiàn)閃動(dòng)的現(xiàn)象將輸入框高度設(shè)置為0
transfer.style.height = 0;
//將輸入框插入到頁(yè)面的一個(gè)div元素中
document.body.appendChild(transfer)
//給輸入框復(fù)制
transfer.value = text;
//讓輸入框獲得焦點(diǎn)
transfer.focus();
transfer.contentEditable = true;
//設(shè)置輸入框?yàn)橹蛔x狀態(tài)
transfer.readOnly = false;
//模擬點(diǎn)擊復(fù)制
if(transfer.setSelectionRange) {
transfer.setSelectionRange(0,transfer.value.length);
var range = document.createRange();
range.selectNodeContents(transfer);
}else{
transfer.select();
}
document.execCommand('copy',false,null);
//讓輸入框失去焦點(diǎn)
transfer.blur();
//刪除輸入框元素
transfer.remove()
console.log('復(fù)制成功')
}2. 解析URL獲取參數(shù)
在js中獲取url參數(shù)的方式有很多，在之前的文章【解析url獲取相關(guān)信息】中使用new URL對(duì)象解析url，今天我們結(jié)合new URLSearchParams對(duì)象來(lái)解析url并獲取指定參數(shù)內(nèi)容，具體代碼如下：
function getQueryByName(url,name) {
//解析url獲取參數(shù)部分內(nèi)容
let urlObj = new URL(url)
//解析參數(shù)部分內(nèi)容
let query = new URLSearchParams(url.search)
//獲取某個(gè)參數(shù)的內(nèi)容并decode解碼
return decodeURIComponent(query.get(name));
}3. 平滑滾動(dòng)至頁(yè)面頂部
function scrollToTop() {
const c = document.documentElement.scrollTop || document.body.scrollTop
if (c > 0) {
window.requestAnimationFrame(scrollToTop)
window.scrollTo(0, c - c / 8)
}
}4. 獲取當(dāng)前頁(yè)面滾動(dòng)距離
function getScrollPosition(el = window) {
return {
x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop,
}
}5. 判斷當(dāng)前設(shè)備是Andoird還是iOS
在這里我們使用userAgent來(lái)判斷當(dāng)前設(shè)備是安卓還是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. 格式化貨幣
格式化貨幣是將一個(gè)金額轉(zhuǎn)換成具有逗號(hào)表現(xiàn)的格式。例如：123456789 轉(zhuǎn)換后：123,456,789
function formatMoney(money){
return money.toLocaleString()
}7. 進(jìn)入和退出全屏
(1) 進(jìn)入全屏
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}")
}
}
}責(zé)任編輯：趙寧寧
來(lái)源：
編程經(jīng)驗(yàn)共享
