函数节流
const throttle = function (fn, interval, leading = true) {
let nowTime
let lastTime = 0
function _throttle(...args) {
nowTime = new Date().getTime()
if (!leading && lastTime === 0) {
lastTime = nowTime
}
if (nowTime - lastTime > interval) {
fn.apply(this, args)
lastTime = nowTime
}
}
return _throttle
},
函数防抖
const debounce = function(func, wait, immediate) { //函数防抖[func 函数,wait 延迟执行毫秒数,immediate true 表立即执行,false 表非立即执行,立即执行是触发事件后函数会立即执行,然后n秒内不触发事件才能继续执行函数的效果]
let timeout
return function() {
let context = this
let args = arguments
if (timeout) clearTimeout(timeout)
if (immediate) {
var callNow = !timeout
timeout = setTimeout(() => {
timeout = null
}, wait)
if (callNow) func.apply(context, args)
} else {
timeout = setTimeout(function() {
func.apply(context, args)
}, wait)
}
}
}
获取url参数
const getUrlParam = function(name) {
let reg = new RegExp('(^|&?)' + name + '=([^&]*)(&|$)', 'i')
let r = window.location.href.substr(1).match(reg)
if (r != null) {
return decodeURI(r[2])
}
return undefined
}
判断浏览器是否开启无痕模式
const isLocalStorage = function(name) {
if(window.Storage && window.localStorage && window.localStorage instanceof Storage) return true
else return false
}
本地存储封装
const store = {
set: function(name, value, day) {
let d = new Date()
let time = 0
day = (typeof(day) === 'undefined' || !day) ? 1 : day
time = d.setHours(d.getHours() + (24 * day))
localStorage.setItem(name, JSON.stringify({
data: value,
time: time
}))
},
get: function(name) {
let data = localStorage.getItem(name)
if (!data) {
return null
}
let obj = JSON.parse(data)
if (new Date().getTime() > obj.time) {
localStorage.removeItem(name)
return null
} else {
return obj.data
}
},
clear: function(name) {
if (name) {
localStorage.removeItem(name)
} else {
localStorage.clear()
}
}
}
cookie操作【set,get,del】
const cookie = {
set: function(name, value, day) {
let oDate = new Date()
oDate.setDate(oDate.getDate() + (day || 30))
document.cookie = name + '=' + value + ';expires=' + oDate + "; path=/;"
},
get: function(name) {
let str = document.cookie
let arr = str.split('; ')
for (let i = 0; i < arr.length; i++) {
let newArr = arr[i].split('=')
if (newArr[0] === name) {
return newArr[1]
}
}
},
del: function(name) {
this.set(name, '', -1)
}
}
时间格式化
const formatDate = function(fmt, date) {
if (typeof date !== 'object') {
date = !date ? new Date() : new Date(date)
}
var o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds(),
'q+': Math.floor((date.getMonth() + 3) / 3),
'S': date.getMilliseconds()
}
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
}
for (var k in o) {
if (new RegExp('(' + k + ')').test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
}
}
return fmt
}
封装一个原生ajax请求
const ajax = function(conf) {
let url = conf.url,
data = conf.data,
senData = [],
async = conf.async !== undefined ? conf.async : true,
type = conf.type || 'get',
dataType = conf.dataType || 'json',
contenType = conf.contenType || 'application/x-www-form-urlencoded',
success = conf.success,
error = conf.error,
isForm = conf.isForm || false,
header = conf.header || {},
xhr = ''
if (data == null) {
senData = ''
} else if (typeof data === 'object' && !isForm) {
for (var k in data) {
senData.push(encodeURIComponent(k) + '=' + encodeURIComponent(data[k]))
}
senData = senData.join('&')
} else {
senData = data
}
try {
xhr = new ActiveXObject('microsoft.xmlhttp')
} catch (e1) {
try {
xhr = new XMLHttpRequest()
} catch (e2) {
if (error != null) {
error('不支持ajax请求')
}
}
};
xhr.open(type, type !== 'get' ? url : url + '?' + senData, async)
if (type !== 'get' && !isForm) {
xhr.setRequestHeader('content-type', contenType)
}
for (var h in header) {
xhr.setRequestHeader(h, header[h])
}
xhr.send(type !== 'get' ? senData : null)
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
if (dataType === 'json' && success != null) {
let res = ''
try {
res = eval('(' + xhr.responseText + ')')
} catch (e) {
console.log(e)
}
success(res)
};
} else {
if (error != null) {
error('链接失败!' + xhr.status)
}
}
}
}
}
设备判断 【web、android、ios】
const isDevice = function() {
var ua = navigator.userAgent.toLowerCase()
if (ua.match(/iPhone\sOS/i) === 'iphone os' || ua.match(/iPad/i) === 'ipad') {
return 'iOS'
}
if (ua.match(/Android/i) === 'android') {
return 'Android'
}
return 'Web'
}
判断是否为微信
const isWx = function() {
var ua = window.navigator.userAgent.toLowerCase()
if (ua.match(/MicroMessenger/i) === 'micromessenger') {
return true
}
return false
}
图片地址转base64
const getBase64 = function(img) { //传入图片路径,返回base64,使用getBase64(url).then(function(base64){},function(err){})
let getBase64Image = function(img, width, height) { //width、height调用时传入具体像素值,控制大小,不传则默认图像大小
let canvas = document.createElement("canvas")
canvas.width = width ? width : img.width
canvas.height = height ? height : img.height
let ctx = canvas.getContext("2d")
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
let dataURL = canvas.toDataURL()
return dataURL
}
let image = new Image()
image.crossOrigin = ''
image.src = img
let deferred = $.Deferred()
if (img) {
image.onload = function() {
deferred.resolve(getBase64Image(image))
}
return deferred.promise()
}
}
url参数转换为对象
const parseQueryString = function(url) { //url参数转对象
url = !url ? window.location.href : url
if (url.indexOf('?') === -1) {
return {}
}
let search = url[0] === '?' ? url.substr(1) : url.substring(url.lastIndexOf('?') + 1)
if (search === '') {
return {}
}
search = search.split('&')
let query = {}
for (let i = 0
let pair = search[i].split('=')
query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '')
}
return query
}
对象序列化
const stringfyQueryString = function(obj) {
if (!obj) return '';
let pairs = [];
for (let key in obj) {
let value = obj[key];
if (value instanceof Array) {
for (let i = 0; i < value.length; ++i) {
pairs.push(encodeURIComponent(key + '[' + i + ']') + '=' + encodeURIComponent(value[i]));
}
continue;
}
pairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
}
return pairs.join('&');
}
字符串大小写转换
const changeCase = function(str, type) {
type = type || 4
switch (type) {
case 1:
return str.replace(/\b\w+\b/g, function(word) {
return word.substring(0, 1).toUpperCase() + word.substring(1).toLowerCase()
})
case 2:
return str.replace(/\b\w+\b/g, function(word) {
return word.substring(0, 1).toLowerCase() + word.substring(1).toUpperCase()
})
case 3:
return str.split('').map(function(word) {
if (/[a-z]/.test(word)) {
return word.toUpperCase()
} else {
return word.toLowerCase()
}
}).join('')
case 4:
return str.toUpperCase()
case 5:
return str.toLowerCase()
default:
return str
}
}
去除字符串空格
const trim = function(str, type) {
type = type || 1
switch (type) {
case 1:
return str.replace(/\s+/g, '')
case 2:
return str.replace(/(^\s*)|(\s*$)/g, '')
case 3:
return str.replace(/(^\s*)/g, '')
case 4:
return str.replace(/(\s*$)/g, '')
default:
return str
}
}
常用的正则验证
const checkStr = function(str, type) {
switch (type) {
case 'phone':
return /^1[3|4|5|6|7|8|9][0-9]{9}$/.test(str)
case 'tel':
return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str)
case 'card':
return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(str)
case 'pwd':
return /^[a-zA-Z]\w{5,17}$/.test(str)
case 'postal':
return /[1-9]\d{5}(?!\d)/.test(str)
case 'QQ':
return /^[1-9][0-9]{4,9}$/.test(str)
case 'email':
return /^[\w-]+(.[\w-]+)*@[\w-]+(.[\w-]+)+$/.test(str)
case 'money':
return /^\d*(?:.\d{0,2})?$/.test(str)
case 'URL':
return /(http|ftp|https)://[\w-_]+(.[\w-_]+)+([\w-.,@?^=%&:/~+#]*[\w-@?^=%&/~+#])?/.test(str)
case 'IP':
return /((?:(?:25[0-5]|2[0-4]\d|[01]?\d?\d)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d?\d))/.test(str)
case 'date':
return /^(\d{4})-(\d{2})-(\d{2}) (\d{2})(?::\d{2}|:(\d{2}):(\d{2}))$/.test(str) ||
/^(\d{4})-(\d{2})-(\d{2})$/.test(str)
case 'number':
return /^[0-9]$/.test(str)
case 'english':
return /^[a-zA-Z]+$/.test(str)
case 'chinese':
return /^[\u4E00-\u9FA5]+$/.test(str)
case 'lower':
return /^[a-z]+$/.test(str)
case 'upper':
return /^[A-Z]+$/.test(str)
case 'HTML':
return /<("[^"]*"|'[^']*'|[^'">])*>/.test(str)
default:
return true
}
}
时间与时间戳转换
const stamp = {
getTime: function(time) {
let date = time ? new Date(time.replace(/-/g, '/')) : new Date()
return Math.round(date.getTime() / 1000)
},
timeToStr: function(time, fmt) {
return new Date(time * 1000).pattern(fmt || 'yyyy-MM-dd')
}
}
简易深拷贝
const deepClone = function(obj) {
function isObject(o) {
return (typeof o === 'object' || typeof o === 'function') && o !== null
}
if(!isObject(obj)) {
return obj
}
let isArray = Array.isArray(obj)
let newObj = isArray ? [...obj] : {...obj}
// Reflect 是一个内置的对象,它提供拦截 JavaScript 操作的方法
Reflect.ownKeys(newObj).forEach(key => {
newObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]
})
return newObj
}