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


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


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




相关文章
|
JavaScript
如何使用内存快照分析工具来分析Node.js应用的内存问题?
需要注意的是,不同的内存快照分析工具可能具有不同的功能和操作方式,在使用时需要根据具体工具的说明和特点进行灵活运用。
787 159
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
494 19
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
编解码 JavaScript 前端开发
如何在网页播放英文的m3u8文件(基于Javascript搭建的在线网页工具)
什么是m3u8?又该如何在网页中高效、便捷地播放英文的m3u8文件呢?今天这篇文章就带你一起了解,并推荐一种基于Javascript搭建的在线网页工具,让你轻松解决播放问题。
3763 0
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
765 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
JavaScript
JS实现多条件搜索函数
JS封装的多条件搜索
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
353 32
|
人工智能 监控 前端开发
基于 Next.js 的书法字体生成工具架构设计与 SSR 优化实践
本项目是一款书法字体生成工具,采用 Next.js 14(App Router)与 Tailwind CSS 构建前端,阿里云 Serverless 部署后端。通过混合渲染策略(SSG/SSR/CSR)、Web Worker 异步计算及 CDN 字体分片加载优化性能。服务端借助阿里云函数计算处理计算密集型任务,将平均耗时从 1200ms 降至 280ms,支持 1000+ QPS。动态路由与 ARMS 监控提升工程化水平,未来计划引入 WebGPU 和 AI 字体风格迁移技术,进一步优化用户体验。
|
存储 资源调度 JavaScript
npm、cnpm 和 pnpm 是三种常用的 Node.js 包管理工具
npm、cnpm 和 pnpm 是三种常用的 Node.js 包管理工具。npm 是官方默认的包管理器,提供依赖管理、安装和更新等功能;cnpm 是由阿里巴巴开发的 npm 镜像,专为中国大陆用户优化,解决下载速度慢的问题;pnpm 通过硬链接技术提高安装速度并节省磁盘空间,特别适合磁盘资源紧张的环境。三者命令类似,但各有特色,开发者可根据需求选择合适的工具。
2793 5