前端常用js方法汇总

• 总结一些自己用的js方法，方便以后搜索和查看
• 说不定大家也会用到
• 欢迎评论区补充和留言

1.判断设备

export const judgeDevice = (function () {
  const ua = navigator.userAgent.toLowerCase();
  if (/ipad|ipod/.test(ua)) {
    return 'ipad';
  } else if (/android|iphone/.test(ua)) {
    return 'mobile';
  }
  return 'pc';
})();

2.判断微信环境

// 判断是否是微信浏览器的函数
export const isWeiXin = () => {
    if (isClient) {
        // window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
        const ua = window.navigator.userAgent.toLowerCase();
        // alert(ua)
        // 通过正则表达式匹配ua中是否含有MicroMessenger字符串
        return ua.includes('micromessenger');
    }
}

3.修改网站标题栏的图标

 export const changeFavicon = link => {
  let $favicon = document.querySelector('link[rel="icon"]');
  if ($favicon !== null) {
    $favicon.href = link;
  } else {
    $favicon = document.createElement("link");
    $favicon.rel = "icon";
    $favicon.href = link;
    document.head.appendChild($favicon);
  }
};

4.获取url上的querystring参数

export const getAllQueryString = (url) => {
  const r = {};
  const _url = url || window.location.href;
  if (_url.split('?')[1]) {
      let str = _url.split('?')[1];
      str = str.split('&');
      str.forEach((item) => {
          const key = item.split('=')[0];
          const val = item.split('=')[1];
          r[key] = decodeURIComponent(val);
      });
  }
  return r;
}

5.清除空格和换行

// 清除空格和换行
export const clearBr = (str = "") => {
      if (str.length === 0) return "";
      return str
        .replace(/\s+/g, "")
        .replace(/<\/?.+?>/g, "")
        .replace(/[\r\n]/g, "");
    },

6.动态插入script标签

• 用于某些不能直接改html的情况

/**
* 动态插入script/link标签
* @param {Array | String} url script/link的url队列
* @param {Element} appendee 插入的父元素 默认body
* @param {Function} callback 所有script onload回调 也可通过返回的promise执行回调
*/
export const scriptOnLoad = (urls, appendee, callback) => {
    urls = Array.isArray(urls) ? urls : [urls];
    const array = urls.map((src) => {
        const cssReg = /\w*.css$/;
        let script;
        if (cssReg.test(src)) {
            const link = document.createElement('link');
            link.type = 'text/css';
            link.rel = 'stylesheet';
            link.href = src;
            script = link;
        } else {
            script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = src;
        }
        const bodyElement = document.getElementsByTagName('body')[0];
        const currentAppendee = appendee || bodyElement;
        currentAppendee.appendChild(script);
        return new Promise((resolve) => {
            script.onload = () => {
                resolve();
            };
        });
    });

    return new Promise((resolve) => {
        Promise.all(array).then(() => {
            if (typeof callback === 'function') {
                callback();
            }
            resolve();
        });
    });
};

7.判断是否是移动端

/**
* 是否是移动端
*/
export const isMobile = () => {
    const ua = window.navigator.userAgent;
    if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(ua)) {
        return true;
    }
    return false;
};

8.禁止用户缩放js代码

export const prohibit = () => {
        const meta = document.createElement('meta');
        meta.name = 'viewport';
        meta.content = 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no';
        document.getElementsByTagName('head')[0].appendChild(meta);
    };

9.对象转querystring

function querystring(data = {}) {
  if (typeof data !== "object") {
    throw new TypeError("param must be object");
  }
  return Object.entries(data)
    .reduce(
      (searchParams, [name, value]) =>
        value === undefined || value === null
          ? (searchParams, searchParams)
          : (searchParams.append(decodeURIComponent(name), decodeURIComponent(value)), searchParams),
      new URLSearchParams()
    )
    .toString();
}
querystring({
 a: 1,
 b: 2,
 c: 3,
})
// 'a=1&b=2&c=3'

10.校验图片的尺寸

const isSize = file => {
    return new Promise((resolve, reject) => {
      let width = 750;
      let _URL = window.URL || window.webkitURL;
      let img = new Image();
      img.onload = function() {
        //(img.width==width*2) 2倍图
        let valid = img.width == width;
        valid ? resolve(true) : reject(false);
      };
      img.src = _URL.createObjectURL(file);
    });
  };

11.Toast提示

export default function Toast(msg, duration = 2000) {
      duration = Number.isNaN(duration) ? 3000 : duration;
      const dom = document.createElement('div');
      dom.innerHTML = msg;
      dom.style.cssText = `
      max-width:60%;
      min-width: 150px;
      padding:5px 10px;
      min-height: 20px;
      color: rgb(255, 255, 255);
      line-height: 150%;
      text-align: center;
      border-radius: 4px;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 999999;
      background: rgba(0, 0, 0,.7);
      font-size: 14px;
      word-break: break-all;`;
      document.body.appendChild(dom);
      setTimeout(function() {
        // dom.style.webkitTransition = `-webkit-transform ${d}s ease-in, opacity ${d}s ease-in`;
        dom.style.opacity = '0';
        setTimeout(() => document.body.removeChild(dom), 500);
      }, duration);
}