前端開發必備：七個高效 JavaScript 工具函數及實現原理
作者：PHP星
為了方便大家日常開發，防止忘記具體的代碼實現，今天我們就來看看這七種常用代碼片段。
日常開發中，我們經常會用到很多通用的 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}")
}
}
}責任編輯：趙寧寧
來源：
編程經驗共享
