前端开发必备：7个高效JavaScript工具函数及实现原理

日常开发中，我们经常会用到很多通用的 JS 代码，例如 复制内容、从 URL 中获取指定参数 等，这些代码基本都可以封装成公共函数，用于不同的地方调用。

为了方便大家日常开发，防止忘记具体的代码实现，今天我们就来看看这七种常用代码片段

一：将内容复制到剪贴板

原理是模拟鼠标点击【input】，执行复制【input】中的内容，这种方式，兼容性极差。在开发APP嵌套网页时就发现APP端可能会禁用此类行为，导致复制失败。个人测试过发现IOS端基本不行，完整代码如下：

input框也可以用textarea来代替

//参数为文本内容function copy_content(text){   //创建一个输入框   var transfer = document.createElement('input');   // 防止页面出现闪动的现象将输入框高度设置为0   transfer.style.height = 0;   //将输入框插入到页面的一个div元素中   document.body.appendChild(transfer)   //给输入框复制   transfer.value = text;   //让输入框获得焦点   transfer.focus();   transfer.contentEditable = true;   //设置输入框为只读状态   transfer.readOnly = false;   //模拟点击复制   if(transfer.setSelectionRange) {       transfer.setSelectionRange(0,transfer.value.length);       var range = document.createRange();       range.selectNodeContents(transfer);   }else{       transfer.select();   }   document.execCommand('copy',false,null);   //让输入框失去焦点   transfer.blur();   //删除输入框元素   transfer.remove()   console.log('复制成功')}

二：解析URL获取参数

在js中获取url参数的方式有很多，在之前的文章【解析url获取相关信息】中使用new URL对象解析url，今天我们结合new URLSearchParams对象来解析url并获取指定参数内容，具体代码如下：

function getQueryByName(url,name) {   //解析url获取参数部分内容   let urlObj = new URL(url)   //解析参数部分内容   let query = new URLSearchParams(url.search)   //获取某个参数的内容并decode解码   return decodeURIComponent(query.get(name));}

三：平滑滚动至页面顶部

function scrollToTop() {   const c = document.documentElement.scrollTop || document.body.scrollTop

  if (c > 0) {       window.requestAnimationFrame(scrollToTop)       window.scrollTo(0, c - c / 8)   }}

四：获取当前页面滚动距离

function getScrollPosition(el = window) {   return {       x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,       y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop,   }}

五：判断当前设备是Andoird还是iOS

在这里我们使用userAgent来判断当前设备是安卓还是IOS

function getOSType() {   let u = navigator.userAgent;   let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;   let isIOS = !!u.match(/\(i[^]+( U)? CPU.+Mac OS X/);

  if (isIOS) {       return 0   }   if (isAndroid) {       return 1   }   return 2}

六：格式化货币

格式化货币是将一个金额转换成具有逗号表现的格式。例如：123456789 转换后：123,456,789

function formatMoney(money){   return money.toLocaleString()}

七：进入和退出全屏

7.1 进入全屏

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

7.2 推出全屏

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