這篇文章，跟大家分享8個(gè)NPM的技術(shù)，希望這些小技巧能夠幫助到你，我們現(xiàn)在就開(kāi)始吧。
1.復(fù)制內(nèi)容到剪貼板
幾乎所有的網(wǎng)站都有存在，因?yàn)樗梢宰層脩舾奖愕厥褂霉δ?。但令人難以置信的是，只需要 6 行有效代碼就可以做到這一點(diǎn)。
const copyToClipboard = (content) => {
const textarea = document.createElement("textarea")
textarea.value = content
document.body.appendChild(textarea)
textarea.select()
document.execCommand("Copy")
textarea.remove()
}2.比較應(yīng)用程序版本
我經(jīng)常遇到這個(gè)要求。如果某個(gè)APP的版本大于x.y.z，則執(zhí)行A邏輯，否則執(zhí)行B邏輯。
其實(shí)就是比較app版本的問(wèn)題。
const compareVersion = (version1, version2) => {
const arr1 = version1.split(".")
const arr2 = version2.split(".")
const len1 = arr1.length
const len2 = arr2.length
const minLength = Math.min(len1, len2)
for (let i = 0; i < minLength; i++) {
let diff = parseInt(arr1[i], 10) - parseInt(arr2[i], 10)
if (diff !== 0) return diff
}
return len1 < len2 ? -1 : len1 > len2 ? 1 : 0
}
const v1 = '2.0.1'
const v2 = '2.1.0'
const v3 = '2.1.0'
console.log(compareVersion(v1, v2)) // -1 V1 is less than V2
console.log(compareVersion(v2, v1)) // 1 V2 is greater than v1
console.log(compareVersion(v2, v3)) // 0 V2 equals V33.使用URLSearchParams獲取URL的搜索參數(shù)
那是前端開(kāi)發(fā)人員經(jīng)常做的事情，我們通常使用正則表達(dá)式來(lái)做，但現(xiàn)在我們有一個(gè)更簡(jiǎn)單的方法......
const getQueryByName = (name) => {
const query = new URLSearchParams(location.search)
return decodeURIComponent(query.get(name))
}
// url: https://medium.com/?name=fatfish&age=100
const name = getQueryByName('name') // fatfish
const age = getQueryByName('age') // 100
const gender = getQueryByName('gender') // null4.平滑滾動(dòng)到頁(yè)面頂部
如何讓頁(yè)面平滑滾動(dòng)到頂部？
Codepen地址：https://codepen.io/qianlong/pen/NWYpqZq
const scrollToTop = () => {
const c = document.documentElement.scrollTop || document.body.scrollTop
if (c > 0) {
window.requestAnimationFrame(scrollToTop)
window.scrollTo(0, c - c / 8)
}
}5.獲取當(dāng)前頁(yè)面的滾動(dòng)距離
有時(shí)候不需要平滑滾動(dòng)到頂部，只需要獲取滾動(dòng)條滾動(dòng)到多遠(yuǎn)就可以了。
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 }
6.判斷當(dāng)前設(shè)備是Android還是iOS
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() // 07.貨幣格式化
貨幣格式化的方式有很多種，比如這兩種方式。
第一種方式：?
const formatMoney = (money) => {
return money.replace(new RegExp(`(?!^)(?=(\\d{3})+${money.includes('.') ? '\\.' : '$'})`, 'g'), ',')
}
formatMoney('123456789') // '123,456,789'
formatMoney('123456789.123') // '123,456,789.123'
formatMoney('123') // '123'第二種方式：?
正則表達(dá)式讓我們太頭疼了，不是嗎？
所以我們需要找到一種更簡(jiǎn)單的方法來(lái)格式化貨幣。
const formatMoney = (money) => {
return money.toLocaleString()
}
formatMoney(123456789) // '123,456,789'
formatMoney(123456789.123) // '123,456,789.123'
formatMoney(123) // '123'我喜歡這種方式，它簡(jiǎn)單易懂。
8.進(jìn)入和退出全屏
?如何將網(wǎng)頁(yè)設(shè)置為全屏模式？我在 Codepen 中寫(xiě)了一個(gè)小例子，Codepen：https://codepen.io/qianlong/pen/wvmJdXb
你可以試試。?
// Enter full screen
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}")
}
}
}
// Exit full screen
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}")
}
}
}
