8 个实用的 NPM 技术

2023-03-01

英文 | https://javascript.plainenglish.io/8-useful-javascript-coding-techniques-that-you-should-use-d5d63f7c7037

翻译 | web前端开发（ID：web_qdkf)

这篇文章，跟大家分享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 V2console.log(compareVersion(v2, v1)) // 1  V2 is greater than v1console.log(compareVersion(v2, v3)) // 0  V2 equals V3

3.使用URLSearchParams获取URL的搜索参数

那是前端开发人员经常做的事情，我们通常使用正则表达式来做，但现在我们有一个更简单的方法......

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

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)  }}

5.获取当前页面的滚动距离

有时候不需要平滑滚动到顶部，只需要获取滚动条滚动到多远就可以了。

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 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}\")    }  }}

最后总结

以上就是我今天跟你分享的全部内容，如果觉得有用的话，请点赞我，关注我，并将这篇文章分享给你的朋友，也许能够帮助到他。

最后，感谢你的阅读，编程愉快！

8 个实用的 NPM 技术

学习更多技能
请点击下方公众号

本栏目精选

热门推荐

频道导航

8 个实用的 NPM 技术

学习更多技能请点击下方公众号

本栏目精选

热门推荐

频道导航

学习更多技能
请点击下方公众号