序言
NPM 全称作 Node Package Manager，是两个如前所述 Node.js 的包命令行，也是 Node.js 街道社区最盛行、全力支持的服务器端组件最少的包命令行。它的本意是让开发者更容易撷取和宠信标识符。这首诗，深圳蓝景跟他们撷取8个NPM的控制技术，期望那些小基本机能协助到你，他们那时就已经开始吧。
1.拷贝文本到配置文件
那时基本上大部份的中文网站都有存有，即使它能让采用者更方便快捷地采用机能。但更让人不可思议的是，只须要 6 行有效率标识符就能努力做到这一点儿。
const copyToClipboard = (content) => {
const textarea = document.createElement(“textarea”)
textarea.value = content
document.body.appendChild(textarea)
textarea.select()
document.execCommand(“Copy”)
textarea.remove()
}
2.比较应用程序版本
我经常遇到这个要求。如果某个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 V2
console.log(compareVersion(v2, v1)) // 1 V2 is greater than v1
console.log(compareVersion(v2, v3)) // 0 V2 equals V3
3.采用URLSea
那是前端开发者经常做的事情，他们通常采用正则表达式来做，但那时他们有两个更简单的方法……
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) // null
4.平滑滚动到页面顶部
如何让页面平滑滚动到顶部？
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)
}
}
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.判断当前设备是Android还是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() // 0
7.货币格式化
货币格式化的方式有很多种，比如这两种方式。
第一种方式：
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
第二种方式：
正则表达式让他们太头疼了，不是吗？
所以他们须要找到一种更简单的方法来格式化货币。
const formatMoney = (money) => {
return money.toLocaleString()
}
formatMoney(123456789) // 123,456,789
formatMoney(123456789.123) // 123,456,789.123
formatMoney(123) // 123
我喜欢这种方式，它简单易懂。
8.进入和退出全屏
如何将网页设置为全屏模式？我在 Codepen 中写了两个小例子，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}”)
}
}
}
总结
以上文本是小蓝今天跟他们撷取的前端知识，如果对你们有协助的话，能点下赞，关注他们。
