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

小灰灰 2021-08-30 00:45 575阅读 0赞

![format_png][]

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

## 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、判断浏览器环境 ##

**源码：**

**使用：**

import browser from "../util/browers.js"
    
    console.log(browser.versions);

## 3、计算时间差 ##

**源码：**

**使用：**

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('这里写图片的地址');

## 7、解析html字符串 ##

**源码：**

export default { 
    		getHtmlobj:(htmlobj)=>{ 
    	      var el = document.createElement('div');
    	      el.innerHTML = htmlobj;
    	      var tags = el.getElementsByTagName('img');
    	      var text = tags[0].getAttribute("src");
    	      return text;
    	    }
    	}

**使用：**

import getHtmlobj from '../util/getHtmlobj';
    	const htmlobj = '<div><p>标签</p><img src="ggg"/></div>';
    	getHtmlobj(htmlobj);

## 8、定义数组内部对象形式 ##

export const objArrtransArr = (olddata, oldval, oldname)=>{ 
        const newArr = [];
        olddata.forEach(item => { 
            // 定义数组内部对象形式
            let obj = { };
            obj.value = item[oldval];
            obj.name = item[oldname];
            // 将对象数据推到数组中
            newArr.push(obj);
        });
        return newArr;
    }

> 不断更新… 谢谢关注

--------------------

> 作者：**Vam的金豆之路**
> 
> 主要领域：**前端开发**
> 
> 我的微信：**maomin9761**
> 
> 微信公众号：**前端历劫之路**
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70][]

--------------------

[format_png]: /images/20210813/99b5b5c0476347ad9c7b8baf4d11e33c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]: /images/20210813/ec7d9e998b17462aa648a76a6e686482.png