这篇文章，跟大家分享8个NPM的技术，希望这些小技巧能够帮助到你，我们现在就开始吧。
几乎所有的网站都有存在，因为它可以让用户更方便地使用功能。但令人难以置信的是，只需要 6 行有效代码就可以做到这一点。
复制
const copyToClipboard = (content) => { const textarea = document.createElement("textarea") textarea.value = content
document.body.appendChild(textarea) textarea.select() document.execCommand("Copy") textarea.remove()
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
我经常遇到这个要求。如果某个APP的版本大于x.y.z，则执行A逻辑，否则执行B逻辑。
其实就是比较app版本的问题。
复制
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 V2console.log(compareVersion(v2, v1)) // 1 V2 is greater than v1console.log(compareVersion(v2, v3)) // 0 V2 equals V3
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
那是前端开发人员经常做的事情，我们通常使用正则表达式来做，但现在我们有一个更简单的方法......
复制
const getQueryByName = (name) => { const query = new URLSearchParams(location.search) return decodeURIComponent(query.get(name))
}// url: https://medium.com/?name=fatfish&age=100const name = getQueryByName('name') // fatfishconst age = getQueryByName('age') // 100const gender = getQueryByName('gender') // null
1.
2.
3.
4.
5.
6.
7.
8.
如何让页面平滑滚动到顶部？
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)
}
}
1.
2.
3.
4.
5.
6.
7.
8.
有时候不需要平滑滚动到顶部，只需要获取滚动条滚动到多远就可以了。
复制
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 }
1.
2.
3.
4.
5.
6.
7.
复制
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() // 0
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
货币格式化的方式有很多种，比如这两种方式。
复制
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'
1.
2.
3.
4.
5.
6.
7.
正则表达式让我们太头疼了，不是吗？
所以我们需要找到一种更简单的方法来格式化货币。
复制
const formatMoney = (money) => { return money.toLocaleString()
}formatMoney(123456789) // '123,456,789'formatMoney(123456789.123) // '123,456,789.123'formatMoney(123) // '123'
1.
2.
3.
4.
5.
6.
7.
我喜欢这种方式，它简单易懂。
如何将网页设置为全屏模式？我在 Codepen 中写了一个小例子，Codepen：https://codepen.io/qianlong/pen/wvmJdXb
你可以试试。
复制
// Enter full screenfunction 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 screenfunction 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}")
}
}
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.