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

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

1、封装fetch

「源码：」

1/**  
2 * 封装fetch函数，用Promise做回调  
3 * @type {{get: (function(*=)), post: (function(*=, *=))}}  
4 */  
5const fetchUtil = {  
6    get: (url) => {  
7        return new Promise((resolve, reject) => {  
8            fetch(url, {  
9                method: 'GET',  
10                headers: {  
11                    'Content-Type': 'application/x-www-form-urlencoded',  
12                }  
13            }).then((response) => response.json()).then(response => {  
14                resolve(response);  
15            }).catch(err => {  
16                reject(new Error(err));  
17            });  
18        });  
19    },  
20    post: (url, params) => {  
21        return new Promise((resolve, reject) => {  
22            fetch(url, {  
23                method: 'POST',  
24                headers: {  
25                    'Content-Type': 'application/x-www-form-urlencoded',  
26                },  
27                body: params  
28            }).then((response) => response.json()).then(response => {  
29                resolve(response);  
30            }).catch(err => {  
31                reject(new Error(err));  
32            });  
33        });  
34    }  
35};  
36  
37export default fetchUtil;  
38

「使用：」

1import Fetch from "../util/FetchUtil.js";  
2    // post请求  
3    post(){  
4      let params = "";  
5      params += "phone=" + "xxxxxx" + "&password="+"123456";  
6      Fetch.post("https://carvedu.com/api/user/sms", this.params)  
7        .then(res => {  
8          console.log(res);  
9        })  
10        .catch(err => {  
11          console.log(err);  
12        });  
13    }  
14    // get请求  
15    get() {  
16      Fetch.get("https://carvedu.com/api/courses")  
17        .then(res => {  
18          console.log(res);  
19        })  
20        .catch(err => {  
21          console.log(err);  
22        });  
23    }  
24

2、判断浏览器环境

「源码：」

1function getSystem(){  
2    const mac = /mac/i,  
3        linux = /linux/i,  
4        win = /win/i;  
5    const platform = navigator.platform.toLowerCase();  
6    if(mac.test(platform)){  
7        return 'MAC';  
8    } else if(win.test(platform)){  
9        return 'WIN';  
10    } else if(linux.test(platform)){  
11        return 'Linux';  
12    }  
13    return undefined;  
14}  
15const browser = {   
16    versions:function(){   
17        let ret = 'xxSys';  
18        const u = navigator.userAgent;  
19        const isMobile = !!u.match(/AppleWebKit.*Mobile.*/),  
20            ios = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),  
21            android = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;  
22        if(isMobile){  
23            if(ios) return 'IOS';  
24            if(android) return 'Android';  
25        } else {  
26            ret = getSystem() || ret;  
27        }  
28        return ret;  
29    }(),  
30};  
31export default browser;  
32

「使用：」

1import browser from "../util/browers.js"  
2  
3console.log(browser.versions);  
4

3、计算时间差

「源码：」

1let startTime = new Date().getTime();  
2  
3export const start = (v) =>{  
4  if(v==='reset'){  
5    return startTime = new Date().getTime();  
6  } else{  
7    return startTime;  
8  }  
9}  
10

「使用：」

1import {start} from "../util/Time.js"  
2  
3click(){  
4  let userTime =  new Date().getTime()-start();  
5  start('reset');  
6}  
7

4、封装正则库

「源码：」

1export default {  
2    // 正则  
3    regExp:()=>{  
4      return {  
5        mPattern :/^1[345789]\d{9}$/, //手机号验证规则  
6        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]$/, // 身份证验证规则  
7        regCode : /^\d{4}$/ //验证码规则  
8        /*......*/  
9      }  
10    }  
11}  
12

「使用：」

1import regExp from '../util/regExp.js'  
2  
3reg(){  
4      var value ="" // 手机号码举例  
5      console.log(regExp.regExp().mPattern.test(value));  
6},  
7

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

「源码：」

1export default {  
2  // 判断有无摄像头  
3    videoCheck:()=>{  
4      var deviceList = [];  
5      navigator.mediaDevices  
6        .enumerateDevices()  
7        .then(devices => {  
8          devices.forEach(device => {  
9            deviceList.push(device.kind);  
10          });  
11          if (deviceList.indexOf("videoinput") == "-1") {  
12            console.info("没有摄像头");  
13            return false;  
14          } else {  
15            console.info("有摄像头");  
16          }  
17        })  
18        .catch(function(err) {  
19          alert(err.name + ": " + err.message);  
20        });  
21    },  
22  
23}  
24

「使用：」

1import videoCheck from '../util/videoCheck.js'  
2  
3videoCheck.videoCheck();  
4

6、图片是否加载完成

「源码：」

1export default {  
2    // 图片加载  
3    imgLoad:(src)=>{  
4      let bgImg = new Image();  
5      bgImg.src = src; // 获取背景图片的url  
6      bgImg.onerror = () => {  
7        console.log("img onerror");  
8      };  
9      bgImg.onload = () => {  
10        console.log("加载完成");  
11        return false  
12      };  
13    }  
14} 
15

「使用：」

1import imgLoad from '../util/imgLoad'  
2  
3imgLoad.imgLoad('这里写图片的地址');  
4

❝

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

❞

❝

作者：「Vam的金豆之路」

主要领域：「前端开发」

我的微信：「maomin9761」

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

❞

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