页面垂直平滑滚动到指定滚动高度
/**
* @param {object} ele 滚动区域的 dom 节点
* @param {number} position 滚动到指定位置的滚动距离。
* @description 页面垂直平滑滚动到指定滚动高度
*/
export const scrollSmoothTo = (ele , position) =>{
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback,element) {
return setTimeout(callback, 17);
};
}
// 当前滚动高度
let scrollTop = null;
if(ele === window){
scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
}else{
scrollTop = ele.scrollTop;
}
// 滚动step方法
var step = function () {
// 距离目标滚动距离
var distance = position - scrollTop;
// 目标滚动位置
scrollTop = scrollTop + distance / 6;
if (Math.abs(distance) < 1) {
ele.scrollTo(0, position);
} else {
ele.scrollTo(0, scrollTop);
requestAnimationFrame(step);
}
};
step();
};
对象/数组的深拷贝
/**
* @param {Object} obj 需要拷贝的数据
* @description 对象/数组的深拷贝
*/
export const deepClone = obj => {
let objClone = Array.isArray(obj)?[]:{};
if(obj && typeof obj==="object"){
for(let key in obj){
if(obj.hasOwnProperty(key)){
//判断obj子元素是否为对象,如果是,递归复制;否则,简单复制
if(obj[key] && typeof obj[key] ==="object"){
objClone[key] = deepClone(obj[key]);
}else{
objClone[key] = obj[key];
}
}
}
}
return objClone;
}
格式化数字
/**
@description 格式化数字
@param {Number} num:需要格式化的数字
*/
export const prefixZero = num =>{
return num >= 10 ? num : "0" + num;
}
倒计时时间格式化
/**
@param {Number} timeStamp : 需要倒计时间的秒数;
@description 倒计时时间格式化
*/
export const countDown = (timeStamp) =>{
//格式化数字
function prefixZero(num){
return num >= 10 ? num : "0" + num;
}
let day=parseInt(timeStamp/3600/24);
let hours=prefixZero(parseInt(timeStamp/3600%24));
let minutes=prefixZero(parseInt(timeStamp/60%60));
let seconds=prefixZero(parseInt(timeStamp%60));
if(timeStamp >= 86400){
return day + "天" + hours + "时" + minutes + "分"+ seconds + "秒";
}
if(timeStamp < 86400 && timeStamp >= 3600){
return hours + ":" + minutes + ":" + seconds;
}
if(timeStamp < 3600 && timeStamp >= 0){
return minutes + ":" + seconds;
}
}
时间戳转日期格式
/**
* @desc 时间戳转日期格式例如: 2020-03-03
* @param {Number} timestamp 时间戳
*/
export const timestamp2Date = timestamp => {
let date = new Date(timestamp * 1000)
let Y = date.getFullYear() + '-'
let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
return Y + M + D
}
对象数组按照某属性 升序排序
/**
* @desc 对象数组按照某属性 升序排序函数
* @param {String} prop 对象属性名
*/
export const ascCompare = (prop) => {
return (obj1, obj2) => {
let val1 = obj1[prop]
let val2 = obj2[prop]
if (val1 < val2) {
return -1
} else if (val1 > val2) {
return 1
} else {
return 0
}
}
对象数组按照某属性 降序排序函数
/**
* @desc 对象数组按照某属性 降序排序函数
* @param {String} prop 对象属性名
*/
export const dscCompare = prop => {
return (obj1, obj2) => {
let val1 = obj1[prop]
let val2 = obj2[prop]
if (val1 < val2) {
return 1
} else if (val1 > val2) {
return -1
} else {
return 0
}
}
}
判断是否是pc端
/**
* @returns {Boolean} 判断是否是pc端
*/
export const IsPC = () =>{
var userAgentInfo = navigator.userAgent;
var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod")
var flag = true
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false
break
}
}
return flag
}
获取当前浏览器名称
/**
* @returns {String} 当前浏览器名称
*/
export const getExplorer = () => {
const ua = window.navigator.userAgent
const isExplorer = (exp) => {
return ua.indexOf(exp) > -1
}
if (isExplorer('MSIE')) return 'IE'
else if (isExplorer('Firefox')) return 'Firefox'
else if (isExplorer('Chrome')) return 'Chrome'
else if (isExplorer('Opera')) return 'Opera'
else if (isExplorer('Safari')) return 'Safari'
}
判断设备类型:ios,android,wechat,qq
/**
* @returns {Object} 判断设备类型:ios,android,wechat,qq
*/
export const phoneVersions = () => {
var u = navigator.userAgent
return {
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1,
wechat: u.indexOf('MicroMessenger') > -1,
qq: u.match(/\sQQ/i) == "qq"
}
}
结束语
在工作中总结出来的,与更多的人交流分享,希望得到更优的代码。减少冗余代码,提高性能,让代码越来越漂亮、优雅、健壮。