能够让你事半功倍的JS utils工具函数详解
短信预约 -IT技能 免费直播动态提醒
前言
今日分享一篇积累和收集了很久的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.class="lazy" data-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')
}DOM 相关
查询元素是否存在某个 class
export function hasClass(el, className) {
let reg = new RegExp('(^|\\s)' + className + '(\\s|$)');
return reg.test(el.className);
}给某个元素添加 class
export function addClass(el, className) {
if (hasClass(el, className)) {
return;
}
let curClass = el.className.split(' ');
curClass.push(className);
el.className = curClass.join(' ');
}删除某个元素的 class
export function removeClass(el, className) {
if (!hasClass(el, className)) {
return;
}
let reg = new RegExp('(^|\\s)' + className + '(\\s|$)', 'g');
el.className = el.className.replace(reg, ' ');
}获取页面滚动距离
export function getScrollTop() {
let e = 0
return (
document.documentElement && document.documentElement.scrollTop
? (e = document.documentElement.scrollTop)
: document.body && (e = document.body.scrollTop),
e
)
}滚动到某个位置回调
export function distanceScroll(distance, callback) {
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
const docHeight = document.body.clientHeight
const screenHeight = window.screen.availHeight
const differ = scrollTop > docHeight - screenHeight - distance
if (differ) {
callback && callback()
}
}拨打电话
export const callPhone = (phone) => {
const aElement = document.createElement('a')
aElement.setAttribute('href', `tel:${phone}`)
document.body.appendChild(aElement)
aElement.click()
document.body.removeChild(aElement)
}复制文本
export function copy(value, callback) {
if (!document.queryCommandSupported('copy')) {
callback('暂不支持复制')
return
}
const textarea = document.createElement('textarea')
textarea.value = value
textarea.readOnly = Boolean('readOnly')
document.body.appendChild(textarea)
textarea.select()
textarea.setSelectionRange(0, value.length)
document.execCommand('copy')
textarea.remove()
callback('复制成功')
}动态加载第三方js
export function asyncLoadScript(url) {
return new Promise(function (resolve, reject) {
const tag = document.getElementsByTagName('script')
for (const i of tag) {
if (i.class="lazy" data-src === url) {
resolve()
return
}
}
const script = document.createElement('script')
script.type = 'text/javascript'
script.class="lazy" data-src = url
script.onerror = reject
document.body.appendChild(script)
script.onload = () => {
resolve()
}
})
}解决 requestAnimationFrame 的兼容问题
export function requestAnimationFrame() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || function (callback) {
return setTimeout(callback, (callback.interval || （100 / 60) / 2);
};
}()动态创建form表单导出数据(POST)
const postExport = (url, data = {}) => {
const form = document.createElement("form");
form.style.display = "none";
form.action = `${Config.baseURL}${url}`;
form.method = "post";
document.body.appendChild(form);
// 动态创建input并给value赋值
for (const key in data) {
const input = document.createElement("input");
input.type = "hidden";
input.name = key;
input.value = data[key];
form.appendChild(input);
}
form.submit();
form.remove();
}图片相关
base64转Buffer
export function dataURItoBuffer(dataURI) {
var byteString = atob(dataURI.split(',')[1]);
var buffer = new ArrayBuffer(byteString.length);
var view = new Uint8Array(buffer);
for (var i = 0; i < byteString.length; i++) {
view[i] = byteString.charCodeAt(i);
}
return buffer;
}base64转Blob
export function dataURItoBlob(dataURI) {
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
var buffer = dataURItoBuffer(dataURI);
return new Blob([buffer], {
type: mimeString
});
}调整拍照图片方向
export function orientationHelper(canvas, ctx, orientation) {
var w = canvas.width;
var h = canvas.height;
if (orientation > 4) {
canvas.width = h;
canvas.height = w;
}
switch (orientation) {
case 2:
ctx.translate(w, 0);
ctx.scale(-1, 1);
break;
case 3:
ctx.translate(w, h);
ctx.rotate(Math.PI);
break;
case 4:
ctx.translate(0, h);
ctx.scale(1, -1);
break;
case 5:
ctx.rotate(0.5 * Math.PI);
ctx.scale(1, -1);
break;
case 6:
ctx.rotate(0.5 * Math.PI);
ctx.translate(0, -h);
break;
case 7:
ctx.rotate(0.5 * Math.PI);
ctx.translate(w, -h);
ctx.scale(-1, 1);
break;
case 8:
ctx.rotate(-0.5 * Math.PI);
ctx.translate(-w, 0);
break;
}
}缓存相关
获取指定 Cookie 值
export const getCookie = (k) => {
const res = RegExp('(^|; )' + encodeURIComponent(k) + '=([^;]*)').exec(document.cookie)
return res && res[2]
}设置 Cookie 值
export function setCookie(name, value, expriesDays, encode = false) {
var Days = expriesDays || 10
var exp = new Date()
exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000)
const val = encode ? escape(value) : value
document.cookie = name + '=' + val + ';domain=zhuanzhuan.com;path=/;expires=' + exp.toUTCString()
}简易版 Storage 操作，sessionStorage 及 localStorage 类似
const prefix = '_XXX_'
export function getStorage(key) {
const content = sessionStorage.getItem(`${prefix}${key}`)
if (content) {
try {
const params = JSON.parse(content)
const expires = params.expires
// 未设置过期 及 未过期
if (!expires || (expires && Date.now() <= expires)) {
return params.data
}
} catch (e) {
console.log(e)
}
}
}
export function setStorage(key, data = {}, expires) {
try {
const params = { data }
if (expires) {
params.expires = expires
}
sessionStorage.setItem(`${prefix}${key}`, JSON.stringify(params))
} catch (e) {
console.log(e)
}
}数字相关
数字四舍五入，保留n位小数
export function round(number, n) {
n = n ? parseInt(n) : 0
if (n <= 0) return Math.round(number)
number = Math.round(number * Math.pow(10, n)) / Math.pow(10, n)
return number
}数字每千位加逗号
export function toThousands(num) {
return num && num.toString()
.replace(/\d+/, function(s){
return s.replace(/(\d)(?=(\d{3})+$)/g, '$1,')
})
}随机数
export function random(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)
}字符串相关
手机号码中间4位隐藏星号
export function hideMobile(mobile) {
return mobile.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2")
}检测密码强度 1：密码弱 2：密码中等 3：密码强 4：密码很强
export function checkPassWord(str) {
let level = 0;
if (str.length < 6) {
return level
};
if (/[0-9]/.test(str)) {
level++
};
if (/[a-z]/.test(str)) {
level++
};
if (/[A-Z]/.test(str)) {
level++
};
if(/\W/.test(str)){
level++
}
return level
}随机产生某个颜色
export function randomColor() {
return `rgb(${this.random(0, 255)}, ${this.random(0, 255)}, ${this.random(0, 255)})`
}字符串替换全部
export function replaceAll(s0, s1, s2){
return s0.replace(new RegExp(s1, "gm"), s2);
}版本号比较
传入两个版本号，格式如：4.3.2，返回结果，小于-1，等于0，大于1。
export function compareVersion(v1, v2) {
var s1 = v1.split(".").map(v => parseInt(v));
var s2 = v2.split(".").map(v => parseInt(v));
var len1 = s1.length, len2 = s2.length, commonLen = Math.min(len1, len2);
for (var i = 0; i < commonLen; ++i) {
if (seq1[i] != seq2[i])
return seq1[i]<seq2[i] ? -1 : 1;
}
return len1 === len2 ? 0 : (len1 < len2 ? -1 : 1);
}对象转url字符串供导出接口(GET)使用
const objectToQueryString = (paramObj) => {
const tmpArray = []
// 特殊字符转义
const filter = (str) => {
str += '' // 隐式转换
str = str.replace(/%/g, '%25')
str = str.replace(/\+/g, '%2B')
str = str.replace(/ /g, '%20')
str = str.replace(/\//g, '%2F')
str = str.replace(/\?/g, '%3F')
str = str.replace(/&/g, '%26')
str = str.replace(/\=/g, '%3D')
str = str.replace(/#/g, '%23')
return str
}
for (const attr in paramObj) {
tmpArray.push(`${attr}=${filter(paramObj[attr])}`)
}
return tmpArray.join('&')
}其他
函数防抖
export function debounce(fn, delay) {
delay = delay || 1000;
let timer = null;
return function () {
let context = this;
let arg = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn.apply(context, arg);
}, delay);
};
}节流函数
export function throttle(fn, delay = 300) {
let timer = null;
return function () {
let context = this;
let args = arguments;
if (!timer) {
timer = setTimeout(function () {
fn.apply(context, args);
clearTimeout(timer);
}, delay);
}
};
}最后
除开本文所示的场景，也还有很多没有列举到的情况，如果你有认为很不错的工具函数，欢迎留言交流～
到此这篇关于能够事半功倍的JS utils工具函数的文章就介绍到这了,更多相关JS utils工具函数内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
