你要的几个JS实用工具函数(持续更新)

Jacquelyn38 等级 1068 0 1
标签: 源码httpsjs

你要的几个JS实用工具函数(持续更新)

今天,我们来总结下我们平常使用的工具函数,希望对大家有用。

1、封装fetch

「源码:」

/**  
 * 封装fetch函数,用Promise做回调  
 * @type {{get: (function(*=)), post: (function(*=, *=))}}  
 */  
const fetchUtil = {  
    get: (url) => {  
        return new Promise((resolve, reject) => {  
            fetch(url, {  
                method: 'GET',  
                headers: {  
                    'Content-Type': 'application/x-www-form-urlencoded',  
                }  
            }).then((response) => response.json()).then(response => {  
                resolve(response);  
            }).catch(err => {  
                reject(new Error(err));  
            });  
        });  
    },  
    post: (url, params) => {  
        return new Promise((resolve, reject) => {  
            fetch(url, {  
                method: 'POST',  
                headers: {  
                    'Content-Type': 'application/x-www-form-urlencoded',  
                },  
                body: params  
            }).then((response) => response.json()).then(response => {  
                resolve(response);  
            }).catch(err => {  
                reject(new Error(err));  
            });  
        });  
    }  
};  

export default fetchUtil;  

「使用:」

import Fetch from "../util/FetchUtil.js";  
    // post请求  
    post(){  
      let params = "";  
      params += "phone=" + "xxxxxx" + "&password="+"123456";  
      Fetch.post("https://carvedu.com/api/user/sms", this.params)  
        .then(res => {  
          console.log(res);  
        })  
        .catch(err => {  
          console.log(err);  
        });  
    }  
    // get请求  
    get() {  
      Fetch.get("https://carvedu.com/api/courses")  
        .then(res => {  
          console.log(res);  
        })  
        .catch(err => {  
          console.log(err);  
        });  
    }  

2、判断浏览器环境

「源码:」

function getSystem(){  
    const mac = /mac/i,  
        linux = /linux/i,  
        win = /win/i;  
    const platform = navigator.platform.toLowerCase();  
    if(mac.test(platform)){  
        return 'MAC';  
    } else if(win.test(platform)){  
        return 'WIN';  
    } else if(linux.test(platform)){  
        return 'Linux';  
    }  
    return undefined;  
}  
const browser = {   
    versions:function(){   
        let ret = 'xxSys';  
        const u = navigator.userAgent;  
        const isMobile = !!u.match(/AppleWebKit.*Mobile.*/),  
            ios = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),  
            android = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;  
        if(isMobile){  
            if(ios) return 'IOS';  
            if(android) return 'Android';  
        } else {  
            ret = getSystem() || ret;  
        }  
        return ret;  
    }(),  
};  
export default browser;  

「使用:」

import browser from "../util/browers.js"  

console.log(browser.versions);  

3、计算时间差

「源码:」

let startTime = new Date().getTime();  

export const start = (v) =>{  
  if(v==='reset'){  
    return startTime = new Date().getTime();  
  } else{  
    return startTime;  
  }  
}  

「使用:」

import {start} from "../util/Time.js"  

click(){  
  let userTime =  new Date().getTime()-start();  
  start('reset');  
}  

4、封装正则库

「源码:」

export default {  
    // 正则  
    regExp:()=>{  
      return {  
        mPattern :/^1[345789]\d{9}$/, //手机号验证规则  
        cP : /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, // 身份证验证规则  
        regCode : /^\d{4}$/ //验证码规则  
        /*......*/  
      }  
    }  
}  

「使用:」

import regExp from '../util/regExp.js'  

reg(){  
      var value ="" // 手机号码举例  
      console.log(regExp.regExp().mPattern.test(value));  
},  

5、判断浏览器是否支持摄像头

「源码:」

export default {  
  // 判断有无摄像头  
    videoCheck:()=>{  
      var deviceList = [];  
      navigator.mediaDevices  
        .enumerateDevices()  
        .then(devices => {  
          devices.forEach(device => {  
            deviceList.push(device.kind);  
          });  
          if (deviceList.indexOf("videoinput") == "-1") {  
            console.info("没有摄像头");  
            return false;  
          } else {  
            console.info("有摄像头");  
          }  
        })  
        .catch(function(err) {  
          alert(err.name + ": " + err.message);  
        });  
    },  

}  

「使用:」

import videoCheck from '../util/videoCheck.js'  

videoCheck.videoCheck();  

6、图片是否加载完成

「源码:」

export default {  
    // 图片加载  
    imgLoad:(src)=>{  
      let bgImg = new Image();  
      bgImg.src = src; // 获取背景图片的url  
      bgImg.onerror = () => {  
        console.log("img onerror");  
      };  
      bgImg.onload = () => {  
        console.log("加载完成");  
        return false  
      };  
    }  
} 

「使用:」

import imgLoad from '../util/imgLoad'  

imgLoad.imgLoad('这里写图片的地址');  

不断更新...... 谢谢关注


作者:「Vam的金豆之路」

主要领域:「前端开发」

我的微信:「maomin9761」

微信公众号:「前端历劫之路」

你要的几个JS实用工具函数(持续更新)


本文转转自微信公众号前端历劫之路原创https://mp.weixin.qq.com/s/2TDysyivuhq2faXszZH02g,如有侵权,请联系删除。

收藏
评论区

相关推荐

😎手撕吊打面试官系列面试题
js基础 1. 用js打印一个乘法表 这一题面试官考察的是你关于js的打印相关基础api的熟悉程度,以及基本的数学常识,送分题 console.log( 111 212 224 313 326 339 414 428 4312 4416 515 5210 5315 5420 5525
面试之手撕 JS 继承
提到JS继承,你首先想到的什么? 面试 继承方式 优缺点...,js继承作为曾经的苦主,我看了忘,忘了看,看了又忘,OMG,都0212年了面试官还不放过我。 ok
从 生成器 到 promise+async
本文主要讲解js中关于生成器的相关概念和作用,以及到后面结合 promise 实现 es7中的 async 原理,你将学习到js中异步流程控制相关知识 1、认识生成器思考如下代码:javascript let x 1 function foo() x++ bar() console.log(x) // 3 function bar(
CSS禁用鼠标拖拽选中内容
chrome  -webkit-user-select:none firxfox  -moz-user-select:none IE需要使用JS的onSelected事件了。 JS代码             dom.style.MozUserSelect = 'none';//fixrox禁止选择的JS脚本             dom.st
ES6 系列之我们来聊聊装饰器
_摘要:_ ## Decorator 装饰器主要用于: 1. 装饰类 2. 装饰方法或属性 ### 装饰类 \`\`\`js [@annotation](https://my.oschina.net/annotation) class MyClass { } function annotation(target) { target.annotated = t
JS导出页面为PDF文件,该如何操作?来看一眼就明白啦!
废话不多说,直接上代码。 1.资源文件或依赖 <script type="text/javascript" src="https://my.oschina.net//u/4265132/blog/4054317/js/canvg2.js"></script><script type="text/javascript" src="https://m
JS调试技术
这次分享的是Chrome开发工具中最有用的面板Sources。 Sources面板几乎是我最常用到的Chrome功能面板,也是在我看来决解一般问题的主要功能面板。通常只要是开发遇到了js报错或者其他代码问题,在审视一遍自己的代码而一无所获之后,我首先就会打开Sources进行js断点调试,而它也几乎能解决我80%的代码问题。Js断点这个功能让人兴奋不已,在没
1、webpack入门例子。
在下面的例子中,简单使用webpack打包一个js。并且把这个js引用的其他js、json数据一起打包进去。 官网:[http://webpack.github.io/](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwebpack.github.io%2F) 英文文档:  [http
D3.js 力导向图的显示优化(二)
> 摘要: 在本文中,我们将借助 D3.js 的灵活性这一优势,去新增一些 D3.js 本身并不支持但我们想要的一些常见的功能:Nebula Graph 图探索的删除节点和缩放功能。 > 文章首发于 Nebula Graph 官博:[https://nebula-graph.com.cn/posts/d3-js-examples-for-advaned-u
JavaScript 两个叹号含义
先起个例子吧~  这个用的是谋智的js引擎monkey spider  darion.yaphet@localhost.localdomain:/home/darion.yaphet> js               js> var i; js> print(i) undefined js>  js> va
JavaScript八张思维导图
**![](https://oscimg.oschina.net/oscnet/17104907-a0f0-4b40-ac9d-9c40d9b13157.jpg)** **目录** * JS基本概念 * JS操作符 * JS基本语句 * JS数组用法 * Date用法 * JS
JavaScript逆向教程之破解某麦参数加密的思路
正文共:2533 字 10 图 预计阅读时间: 7 分钟 作者:ThreeTails 原 文: http://www.threetails.xyz/2019/05/19/初探js逆向(二) ![](https://oscimg.oschina.net/oscnet/80c2c326-a706-47bc-b2cc-15c11bc80e24.jp
NodeJS 中文乱码解决
如果使用NodeJS 。当有中文时,如果不做任何处理就会出现乱码。因为,NodeJS 不支持 GBK。当然,UTF-8是支持的。所以,要确保不出现乱码:  1.保证你的 JS文件是以UTF-8格式保存的。  2. 在你的JS文件中的 writeHead 方法中加入 "**charset=utf-8**" 编码,如下例所示:   var http = r
OSChina 开源周刊第三十三期 —— Node.js 和 io.js 准备合作!
**每周技术抢先看,总有你想要的!** ### 开源资讯 1. [Node.js 和 io.js 准备合作!合久必分,分久必合?](http://www.oschina.net/news/62149/node-js-and-io-js-convergence) 2. [Nervana 开源深度学习软件,性能超 Facebook、Nvidia
React.createClass 、React.createElement、Component
react里面有几个需要区别开的函数 React.createClass 、React.createElement、Component 首选看一下在浏览器的下面写法: <div id="app"> </div> <script src="../js/react.js"></script> <scr