让你事半功倍的JS utils工具函数1

简介: 让你事半功倍的JS utils工具函数

本文已参与[新人创作礼]活动,一起开启掘金创作之路

今日分享一篇积累和收集了很久的JS utils工具函数,文章代码量较多,建议收藏起来慢慢看,当哪一天需要用到的时候,打开你尘封已久的收藏夹,相信能让你的业务代码开发事半功倍。

汇集了时间相关,DOM相关,URL相关,判断相关,图片相关,缓存相关等。部分逻辑处理较为简单,如果是业务量较为复杂的情况建议要斟酌使用,但对于大部分的项目应该是绰绰有余。接下来就进入代码部分吧~

时间相关

时间戳转自定义格式时间

export const dateRegExp = (time, strText) => {
  const date = new Date(time)
  if (/(y+)/.test(strText)) {
    strText = strText.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
  }
  const dataType = {
    'M+': date.getMonth() + 1,
    'd+': date.getDate(),
    'h+': date.getHours(),
    'm+': date.getMinutes(),
    's+': date.getSeconds()
  }
  for (const typeKey in dataType) {
    if (new RegExp(`(${typeKey})`).test(strText)) {
      const typeValue = dataType[typeKey] + ''
      strText = strText.replace(RegExp.$1, (RegExp.$1.length === 1 ? typeValue : padLeftZero(typeValue)))
    }
  }
  return strText
}

格式化距离现在已过去的时间

export function formatPassTime(startTime) {
    var currentTime = Date.parse(new Date()),
        time = currentTime - startTime,
        day = parseInt(time / (1000 * 60 * 60 * 24)),
        hour = parseInt(time / (1000 * 60 * 60)),
        min = parseInt(time / (1000 * 60)),
        month = parseInt(day / 30),
        year = parseInt(month / 12);
    if (year) return year + "年前"
    if (month) return month + "个月前"
    if (day) return day + "天前"
    if (hour) return hour + "小时前"
    if (min) return min + "分钟前"
    else return '刚刚'
}

判断两个不同格式的日期是否为同一天

export function isSameDay(d1, d2) {
    if (!d2) {
        d2 = new Date();
    }
    var d1_year = d1.getFullYear(),
        d1_month = d1.getMonth() + 1,
        d1_date = d1.getDate();
    var d2_year = d2.getFullYear(),
        d2_month = d2.getMonth() + 1,
        d2_date = d2.getDate()
    return d1_date === d2_date && d1_month === d2_month && d1_year === d2_year;
}

判断时间是不是今天

export function isTodayDate(time) {
    if (new Date(time).toDateString() === new Date().toDateString()) {
        return true;
    }
    return false;
}

URL 相关

URL 参数转对象

export function parseQueryString(url) {
    url = url ? url:window.location.search ;
    let search = url[0] === '?' ? url : url.substring(url.lastIndexOf('?')); 
    let q = {};
    search.replace(/([^?&=]+)=([^&]+)/g, (_, k, v) => q[k] = decodeURIComponent(v));
    return q;
}

获取URL参数

export function getQueryString(name) {
  const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
  const r = window.location.search.substr(1).match(reg)
  if (r !== null) {
    return decodeURI(r[2])
  }
  return null
}

获取URL hash后面的参数

export getHashQueryString = (key) => {
  const after = window.location.href.split('?')[1]
  if (after) {
    const reg = new RegExp(`(^|&)${  key  }=([^&]*)(&|$)`)
    const r = after.match(reg)
    if (r != null) {
      return decodeURIComponent(r[2])
    }
    return null
  }
  return null
}

对象序列化

export function serialize(query, encode = false) {
  return Object.keys(query)
    .map((key) => `${key}=${encode ? encodeURIComponent(query[key]) : query[key]}`)
    .join('&')
}

判断相关

判断是否支持 Intersection

export function isSupportIntersection() {
  return (
    'IntersectionObserver' in window &&
    'IntersectionObserverEntry' in window &&
    'intersectionRatio' in window.IntersectionObserverEntry.prototype
  )
}

判断是否IOS

export const isIOS = (() => {
  return /ios|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase())
})()

判断是否安卓

export const isAndroid = (() {
  return /android/.test(navigator.userAgent.toLowerCase())
})()

判断微信内置浏览器

export function isWeixin() {
  var ua = navigator.userAgent.toLowerCase();
  return (ua.match(/MicroMessenger/i) == "micromessenger")
}

判断是否支持webp格式 2种方式

export function checkSupportWebp() {
  return (
    document
      .createElement('canvas')
      .toDataURL('image/webp')
      .indexOf('data:image/webp') === 0
  )
}
export function checkSupportWebp2() {
  var img = new Image();
  img.onload = img.onerror = (event) => {
    return event && event.type === "load" ? img.width == 1 : false;
  };
  img.src = "data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA=";
}

判断浏览器是否是移动端

export function isMobile() {
    const agent = navigator.userAgent;
    const k = ["android", "iphone", "ipod", "ipad", "windows phone", "mqqbrowser"];
    let flag = false;
    // Windows
    if (agent.indexOf("Windows NT") < 0 || (agent.indexOf("Windows NT") >= 0 && agent.indexOf("compatible; MSIE 9.0;") >= 0)) {
        // Mac PC
        if (agent.indexOf("Windows NT") < 0 && agent.indexOf("Macintosh") < 0) {
            for (let item of k) {
                if (agent.indexOf(item) >= 0) {
                    flag = true;
                    break;
                }
            }
        }
    }
    return flag;
}

文件类型判断

export function checkFileName(fileName, list) {
    if (typeof fileName !== 'string') return;
    let name = fileName.toLowerCase();
    return list.some(i => name.endsWith(`.${i}`) === true)
}
export function isImage(fileName) {
    return checkFileName(fileName, ['png', 'jpeg', 'jpg', 'png', 'bmp'])
}
export function isH5Video(fileName) {
    return checkFileName(fileName, ['mp4', 'webm', 'ogg'])
}
export function isPdf(fileName) {
    return checkFileName(fileName, ['pdf'])
}
export function isWord(fileName) {
    return checkFileName(fileName, ['doc', 'docx'])
}
export function isExcel(fileName) {
    return checkFileName(fileName, ['xlsx', 'xls'])
}

数据类型判断

export function is(subject, type) {
  return Object.prototype.toString.call(subject).substr(8, type.length).toLowerCase() === type
}
export function isArray(subject) {
  return Array.isArray(subject)
}
export function isObject(subject) {
  return is(subject, 'object')
}
...
export function isNum(subject) {
  return !isNaN(subject) && is(subject, 'number')
}



目录
相关文章
|
10天前
|
JavaScript 前端开发 Java
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法,包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明,并提供了示例代码。文章强调了函数的学习应结合源码和实践,适合JavaScript初学者和进阶开发者参考。
20 2
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
|
9天前
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
15天前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
101 9
|
17天前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
45 10
|
23天前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
25天前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
28天前
|
存储 JavaScript 前端开发
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
16 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
95 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
118 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
81 4