簡化你的工作，七種常用的 JS 代碼片段
作者：程序員Sunday
日常開發(fā)中，我們經(jīng)常會用到很多通用的 JS 代碼，比如：復(fù)制內(nèi)容、從 URL 中獲取指定參數(shù)等。這些代碼通常有固定實(shí)現(xiàn)，即：代碼片段。所以，為了方便大家的開發(fā)，今天咱們就來看看常用的 7 種代碼片段。
Hello，大家好，我是 Sunday。
日常開發(fā)中，我們經(jīng)常會用到很多通用的 JS 代碼，比如：復(fù)制內(nèi)容、從 URL 中獲取指定參數(shù)等。
這些代碼通常有固定實(shí)現(xiàn)，即：代碼片段。
所以，為了方便大家的開發(fā)，今天咱們就來看看常用的 7 種代碼片段。
1.將內(nèi)容復(fù)制到剪貼板
通過按鈕，將指定 dom 中的內(nèi)容復(fù)制到用戶的剪貼板
const copyToClipboard = (content) => {
const textarea = document.createElement("textarea")
textarea.value = content
document.body.appendChild(textarea)
textarea.select()
document.execCommand("Copy")
textarea.remove()
}2.使用URLSearchParams獲取URL的搜索參數(shù)
這應(yīng)該是一個非常常見的操作，之前經(jīng)常會使用 正則來完成，現(xiàn)在有了更簡單的方式：
const getQueryByName = (name) => {
const query = new URLSearchParams(location.search)
return decodeURIComponent(query.get(name))
}
// url: https://sunday.com/?name=fatfish&age=100
const name = getQueryByName('name') // fatfish
const age = getQueryByName('age') // 100
const gender = getQueryByName('gender') // null3.平滑滾動至頁面頂部
const scrollToTop = () => {
const c = document.documentElement.scrollTop || document.body.scrollTop
if (c > 0) {
window.requestAnimationFrame(scrollToTop)
window.scrollTo(0, c - c / 8)
}
}4.獲取當(dāng)前頁面滾動距離
const getScrollPosition = (el = window) => ({
x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop,
})
getScrollPosition() // { x: 0, y: 215 }5.判斷當(dāng)前設(shè)備是Andoird還是iOS
function getOSType() {
let u = navigator.userAgent,
app = navigator.appVersion
let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1
let isIOS = !!u.match(/\(i[^]+( U)? CPU.+Mac OS X/)
if (isIOS) {
return 0
} else if (isAndroid) {
return 1
} else {
return 2
}
}
getOSType() // 06.格式化貨幣
const formatMoney = (money) => {
return money.toLocaleString()
}
formatMoney(123456789) // '123,456,789'
formatMoney(123456789.123) // '123,456,789.123'
formatMoney(123) // '123'7.進(jìn)入和退出全屏
// 進(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}")
}
}
}
// 退出全屏
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é)任編輯：武曉燕
來源：
程序員Sunday
