1.根据数组对象中某一属性进行数组对象的排序
/**
* @desc 根据数组对象中某一属性进行数组对象的排序
* @params { Array } objArr 数组对象
* @params { String } Attribute 排序属性名称
* @params { Boolean } OrderFlag 方式表述 true-正序(默认值) false-倒序
*/
export const ObjArrSortByAtr = (objArr, attribute, OrderFlag = true) => {
const compare = (key, sortFalg) => {
const sortFlagRes = sortFalg ? 1 : -1;
return (value1, value2) => {
const val1 = value1[key];
const val2 = value2[key];
if(val1 < val2)return sortFlagRes* -1;
if(val1 > val2)return sortFlagRes* 1;
return 0;
};
};
return objArr.sort(compare(`${attribute}`, OrderFlag));
};
2.节流函数
/**
*
* @desc 节流函数,再等待时间内,方法只会执行一次(用于防爆点击)
* @params { Function } fn 执行的方法
* @params { Number } milliseconds 等待时间
*
*/
export const throttle = function (fn, milliseconds = 1500){
let lastTime = null;
//返回的新函数
return function () {
const nowTime = +new Date();
if(nowTime - lastTime > milliseconds || !lastTime ){
fn.apply(this, arguments); //将this和参数传给原函数
lastTime = newTime;
}
};
};
3.防抖函数
/**
*
* @desc 防抖函数,一定时间内只会执行一次函数(用于输入框联想搜索)
* @params { Function } func 执行的方法
* @params { Number } delay 等待时间
*
*/
export const debounce = function (func, delay = 1500){
let timeout;
return function (e) {
clearTimeout(timeout);
const conext = this;
args = arguments;
timeout = setTimeout (() => {
func.apply(conext, args);
}, delay)
};
};
4.转换为字符串
/**
* @desc 转换为字符串
* @params { Object } v
* @returns { String }
*/
export const toString = v => Object.prototype.toString.apply(v);
5.是否为数组
/**
* @desc 是否为空
* @params { * } 值
* @returns { Boolean }
*/
export const isArray = v => Object.prototype.toString.apply(v) === '[object Array]'
6.是否为空
/**
* @desc 是否为空
* @params { * } 值
* @params { Boolean } allowBlank 是允许行空
* @returns { Boolean|* }
*/
export const isEmpty = ( v, allowBlank ) => v === null || v === undefined || String(v).toUpperCase() === 'NULL' || (Object.prototype.toString.apply(v) === '[object Array]' && !v.length)
7.是否是日期
/**
* @desc 是否是日期
* @params { * } 值
* @returns { Boolean }
*/
export const isDate = v => Object.prototype.toString.apply(v) === '[object Date]'
8.是否是对象
/**
* @desc 是否是对象
* @params { * } 值
* @returns { Boolean }
*/
export const isObject = v => Object.prototype.toString.apply(v) === '[object Object]'
9.获取URL中的参数
/**
* @desc 是否是对象
* @params { String } url URL地址
* @returns { Object }
*/
export const getUrlParams = (url = decodeURIComponent(location.href)) => {
const paramStr = url.subString(url.indexOf('?')+1, url.length).split('&');
const params = {};
for( let i of paramStr ){
params[i.substring(0, i.indexOf('='))] = i.substring(i.indexOf('=') +1), i.length)
}
return typeof params === 'underfind' ? {} : params;
}
10.动态加载JS文件
在一些特殊的场景下,特别是一些库和框架的开发中,我们有时会去动态的加载JS文件并执行,下面是利用Promise进行了简单的封装。
function loadJS(files, done) {
// 获取head标签
const head = document.getElementsByTagName('head')[0];
Promise.all(files.map(file => {
return new Promise(resolve => {
// 创建script标签并添加到head
const s = document.createElement('script');
s.type = "text/javascript";
s.async = true;
s.src = file;
// 监听load事件,如果加载完成则resolve
s.addEventListener('load', (e) => resolve(), false);
head.appendChild(s);
});
})).then(done); // 所有均完成,执行用户的回调事件
}
loadJS(["test1.js", "test2.js"], () => {
// 用户的回调逻辑
});