--- theme: condensed-night-purple highlight: magula --- 本文已参与[新人创作礼]活动，一起开启掘金创作之路今日分享一篇积累和收集了很久的JS utils工具函数，文章代码量较多，建议收藏起来慢慢看，当哪一天需要用到的时候，打开你尘封已久的收藏夹，相信能让你的业务代码开发事半功倍。汇集了时间相关，DOM相关，URL相关，判断相关，图片相关，缓存相关等。部分逻辑处理较为简单，如果是业务量较为复杂的情况建议要斟酌使用，但对于大部分的项目应该是绰绰有余。接下来就进入代码部分吧～ ### 时间相关 #### 时间戳转自定义格式时间 ```javascript 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 } ``` #### 格式化距离现在已过去的时间 ```javascript 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 '刚刚' } ``` #### 判断两个不同格式的日期是否为同一天 ```javascript 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; } ``` #### 判断时间是不是今天 ```javascript export function isTodayDate(time) { if (new Date(time).toDateString() === new Date().toDateString()) { return true; } return false; } ``` ### URL 相关 #### URL 参数转对象 ```javascript 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参数 ```javascript 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后面的参数 ```javascript 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 } ``` #### 对象序列化 ```javascript export function serialize(query, encode = false) { return Object.keys(query) .map((key) => `${key}=${encode ? encodeURIComponent(query[key]) : query[key]}`) .join('&') } ``` ### 判断相关 #### 判断是否支持 Intersection ```javascript export function isSupportIntersection() { return ( 'IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in window.IntersectionObserverEntry.prototype ) } ``` #### 判断是否IOS ```javascript export const isIOS = (() => { return /ios|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase()) })() ``` #### 判断是否安卓 ```javascript export const isAndroid = (() { return /android/.test(navigator.userAgent.toLowerCase()) })() ``` #### 判断微信内置浏览器 ```javascript export function isWeixin() { var ua = navigator.userAgent.toLowerCase(); return (ua.match(/MicroMessenger/i) == "micromessenger") } ``` #### 判断是否支持webp格式 2种方式 ```javascript 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="; } ``` #### 判断浏览器是否是移动端 ```javascript 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; } ``` #### 文件类型判断 ```javascript 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']) } ``` #### 数据类型判断 ```javascript 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 ```javascript export function hasClass(el, className) { let reg = new RegExp('(^|\\s)' + className + '(\\s|$)'); return reg.test(el.className); } ``` #### 给某个元素添加 class ```javascript export function addClass(el, className) { if (hasClass(el, className)) { return; } let curClass = el.className.split(' '); curClass.push(className); el.className = curClass.join(' '); } ``` #### 删除某个元素的 class ```javascript export function removeClass(el, className) { if (!hasClass(el, className)) { return; } let reg = new RegExp('(^|\\s)' + className + '(\\s|$)', 'g'); el.className = el.className.replace(reg, ' '); } ``` #### 获取页面滚动距离 ```javascript export function getScrollTop() { let e = 0 return ( document.documentElement && document.documentElement.scrollTop ? (e = document.documentElement.scrollTop) : document.body && (e = document.body.scrollTop), e ) } ``` #### 滚动到某个位置回调 ```javascript 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() } } ``` #### 拨打电话 ```javascript export const callPhone = (phone) => { const aElement = document.createElement('a') aElement.setAttribute('href', `tel:${phone}`) document.body.appendChild(aElement) aElement.click() document.body.removeChild(aElement) } ``` #### 复制文本 ```javascript 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 ```javascript export function asyncLoadScript(url) { return new Promise(function (resolve, reject) { const tag = document.getElementsByTagName('script') for (const i of tag) { if (i.src === url) { resolve() return } } const script = document.createElement('script') script.type = 'text/javascript' script.src = url script.onerror = reject document.body.appendChild(script) script.onload = () => { resolve() } }) } ``` #### 解决 requestAnimationFrame 的兼容问题 ```javascript export function requestAnimationFrame() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || function (callback) { return setTimeout(callback, (callback.interval || （100 / 60) / 2); }; }() ``` #### 动态创建form表单导出数据(POST) ```javascript 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 ```javascript 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 ```javascript export function dataURItoBlob(dataURI) { var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; var buffer = dataURItoBuffer(dataURI); return new Blob([buffer], { type: mimeString }); } ``` #### 调整拍照图片方向 ```javascript 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 值 ```javascript export const getCookie = (k) => { const res = RegExp('(^|; )' + encodeURIComponent(k) + '=([^;]*)').exec(document.cookie) return res && res[2] } ``` #### 设置 Cookie 值 ```javascript 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 类似 ```javascript 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位小数 ```javascript 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 } ``` #### 数字每千位加逗号 ```javascript 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)})` } ``` #### 字符串替换全部 ```javascript export function replaceAll(s0, s1, s2){ return s0.replace(new RegExp(s1, "gm"), s2); } ``` #### 版本号比较传入两个版本号，格式如：4.3.2，返回结果，小于-1，等于0，大于1。 ```javascript 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] { 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('&') } ``` ### 其他 #### 函数防抖 ```javascript 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); }; } ``` #### 节流函数 ```javascript 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); } }; } ``` ### 最后除开本文所示的场景，也还有很多没有列举到的情况，如果你有认为很不错的工具函数，欢迎留言交流～ **专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）**