前端工具库浏览器判断

前言

2021年第一篇文章，也将会是持续时间最长的一篇文章。作为一个目前工作一年多的前端开发工程师来说，接触的项目比较多了，发现每个项目中的工具函数都大致相同。不想再去做重复性的工作，觉定将自己遇到的工具方法归类总结，形成自己的工具库。

工具库

数组处理

在JavaScript中，数组也叫数组对象，一个有序的数据集合，相较于变量，数组中可以存储多个变量。如：

var myArray = [1, 2, 3, 4];

浏览器判断

	const navigator = {
   // 是否是ios系统
    isIOS: function (){
      return !!window.navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
    },
    // 是否是android系统
    isAndroid: function (){
        return window.navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Linux') > -1
    }, 
    // 是否是chrome浏览器
    isChrome: function (){
        return window.navigator.userAgent.indexOf('Chrome') > -1
    },
    // 是否是在webview里面
    isWebview:() => Boolean(window.navigator.userAgent.match(new RegExp(`(${['WebView','; wv[)]'].join('|')})`, 'ig'))),
    // 是否是微博浏览器
    isWeibo: function (){
        return window.navigator.userAgent.toLowerCase().match(/WeiBo/i) == "weibo"
    } ,
    // 是否是微信浏览器
    isWechat: function (){
        return window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == "micromessenger"
    },
    // 是否是QQ浏览器
    isQQ: function (){
        return window.navigator.userAgent.toLowerCase().match(/QQ/i) == "qq"
    },
    // 是否是支付宝浏览器
    isAlipay: function (){
        return window.navigator.userAgent.toLowerCase().match(/AlipayClient/i) == "alipayclient"
    },
    // baidu浏览器
    isBaidu: function (){
        return window.navigator.userAgent.toLowerCase().indexOf("bidubrowser")>0
    },
    // sougou 浏览器
    isSougou: function (){
        return window.navigator.userAgent.toLowerCase().indexOf("se 2.x")>0
    } ,
    // uc 浏览器
    isUC: function () {
        return window.navigator.userAgent.indexOf('UCBrowser') > -1
    },
}

时间处理

// time 毫秒数（通常由后端返回）
// type 处理时间格式类型（详细类型参考代码）
function parseTime(time, type) {
  if (!time) { return '' }
  if (arguments.length === 0) { return '' }
  let format, iDate, timer;
  switch (type) {
    case 1: format = '{y}年{m}月{d}日'; break;
    case 2: format = '{y}-{m}-{d} {h}:{i}:{s}'; break;
    case 3: format = '{m}月{d}日'; break;
    case 4: format = '{h}:{i}:{s}'; break;
    case 5: format = '{m}-{d} {h}:{i}:{s}'; break;
    case 6: format = '{y}/{m}/{d}'; break;
    default: format = '{y}-{m}-{d}'; break;
  }
  if (typeof time === 'object') {
    iDate = time;
  } else if (time) {
    timer = time;
    let reg = /^[0-9]+$/, num = reg.test(time);
    if (('' + time).length === 10 && num) { timer = parseInt(time) * 1000 }
    if (('' + time).length === 13 && num) { timer = parseInt(time) }
    if (('' + time).length === 8) { timer = (time.substring(0, 4) + "/" + time.substring(4, 6) + "/" + time.substring(6)); }
    if (('' + time).indexOf('T') != -1) { time = time.replace(/T/, " "); timer = time; }
    if (('' + time).indexOf('-') != -1) { time = time.replace(/-/g, "/"); timer = time; }
    iDate = new Date(timer);
  } else {
    iDate = new Date();
  }
  let formatObj = {
    y: iDate.getFullYear(),
    m: iDate.getMonth() + 1,
    d: iDate.getDate(),
    h: iDate.getHours(),
    i: iDate.getMinutes(),
    s: iDate.getSeconds(),
    a: iDate.getDay()
  }
  let time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, function (result, key) {
    let value = formatObj[key];
    if (key === 'a') return ['日', '一', '二', '三', '四', '五', '六'][value];
    if (result.length > 0 && value < 10) {
      value = '0' + value;
    }
    return value || 0;
  })
  return time_str;
}

总结

每个项目有每个项目的特点，选择合适的工具库能够解决遇到的算法问题，从而提高工作效率。我是岚之炑（火木）_{一个爱健身的程序员}

本文地址：https://blog.csdn.net/m0_53742024/article/details/111661054