JS_通用模块封装
主要记录一些在项目中常常用到模块，进行了一个封装，增长代码的可维护性及易读性。vue
1.比较两个对象/数组..中的值是否彻底相等
// 对比两个对象之间的差异
contrastObjSame(originObj, curObj) {
if(originObj === undefined || curObj === undefined) {
return false;
}
if(Object.prototype.toString.call(originObj) !== Object.prototype.toString.call(curObj)) {
return false;
}
if(typeof originObj !== 'object') {
if(originObj !== curObj) {
return false;
}
return true;
} else if(Object.prototype.toString.call(originObj).toLowerCase().indexOf(' object') >= 0) {
let originObjKeyArr = Object.keys(originObj);
let curObjKeyArr = Object.keys(curObj);
if(originObjKeyArr.length !== curObjKeyArr.length) {
return false;
}
for(let key in originObj) {
if(curObj[key] === undefined) {
return false;
}
if(!this.contrastObjSame(originObj[key], curObj[key])) {
return false;
}
}
return true;
} else if(Object.prototype.toString.call(originObj).toLowerCase().indexOf(' array') >= 0) {
let originLen = originObj.length;
let curLen = originObj.length;
if(originLen !== curLen) {
return false;
}
for(let i = 0; i < originLen; i++) {
if(!this.contrastObjSame(originObj[i], curObj[i])) {
return false;
}
}
return true;
} else{
return originObj === curObj;
}
}
2.深拷贝
deepCopy(o) {
// 数组
if (o instanceof Array) {
return o.map(item => {
return this.deepCopy(item);
});
} else if (o instanceof Object) {
let temp = {};
Object.keys(o).map(item => {
temp[item] = this.deepCopy(o[item]);
});
return temp;
} else {
return o;
}
}
3.值校验
/** 值校验
* @params:
* {obj.name}校验的值;
* {obj.errorTip}错误显示内容;
* {obj.required}是否必填;
* {obj.regExp}正则数组;
* {obj.regExp[index].reg}校验规则-正则
* {obj.regExp[index].attr}校验规则属性-正则
* {obj.regExp[index].ifForbid}校验规则-true:符合规则的不经过；false:符合规则的经过
* {obj.regExp[index].err}错误提示
*/
validateValue(value, obj, item) {
if (typeof obj === 'undefined') {
return {
result: true,
msg: '不存在校验项'
};
} else if (typeof value === 'undefined' && typeof obj.errorTip !== 'undefined') {
obj.errorTip = '';
return {
result: true,
msg: '不存在校验项'
};
} else if (typeof value === 'undefined' && typeof obj.errorTip === 'undefined') {
return {
result: true,
msg: '不存在校验项&不存在信息错误提示'
};
}
if (typeof obj.errorTip !== 'undefined') {
obj.errorTip = '';
}
if (obj.required && (!value && value !== 0)) {
if (typeof obj.errorTip !== 'undefined') {
obj.errorTip = '请输入正确的值';
}
return {
result: false,
ifRequiredFill: false,
msg: '请输入正确的值'
};
} else if (obj.regExp && obj.regExp.length > 0) {
for (var i = 0, len = obj.regExp.length; i < len; i++) {
let attr = obj.regExp[i].attr || 'ig';
let pattern = new RegExp(obj.regExp[i].reg, attr);
let ifForbid = obj.regExp[i].ifForbid || false;
let ifHasValueCheck = obj.regExp[i].ifHasValueCheck || false;
if (ifHasValueCheck && !value) {
continue;
}
if (value && ((ifForbid && pattern.test(value)) || (!ifForbid && !pattern.test(value)))) {
if (obj.regExp[i].err && typeof obj.errorTip !== 'undefined') {
obj.errorTip = obj.regExp[i].err;
}
break;
}
}
if (i >= len) {
return {
result: true,
msg: '校验经过'
};
} else {
return {
result: false,
ifRequiredFill: true,
msg: obj.regExp[i].err || '校验未经过'
};
}
} else {
return {
result: true,
msg: '校验经过'
};
}
}
4.生成随机数
// 生成随机数
getRandomNum(randomLength) {
let rL = randomLength || 18;
return Number(Math.random().toString().substr(3, rL) + Date.now()).toString(36);
}
5.文件导出
// 导出文件 - base64转为文件
base64ToFile(base64Data, tempfilename, contentType) {
if (!base64Data) {
return;
}
contentType = contentType || 'application/vnd.ms-excel';
var sliceSize = 1024;
var byteCharacters = atob(base64Data);
var bytesLength = byteCharacters.length;
var slicesCount = Math.ceil(bytesLength / sliceSize);
var byteArrays = new Array(slicesCount);
for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
var begin = sliceIndex * sliceSize;
var end = Math.min(begin + sliceSize, bytesLength);
var bytes = new Array(end - begin);
for (var offset = begin, i = 0; offset < end; ++i, ++offset) {
bytes[i] = byteCharacters[offset].charCodeAt(0);
}
byteArrays[sliceIndex] = new Uint8Array(bytes);
}
var file = new File(byteArrays, tempfilename, { type: contentType });
return file;
},
// 导出文件 -- 下载二进制流binary
// 注意download兼容性不佳
downloadBinary(data, filename, type) {
if (!data) {
return;
}
type = type || 'application/vnd.ms-excel';
var file = new Blob([data], { type: type });
if (window.navigator.msSaveOrOpenBlob) // IE10+
window.navigator.msSaveOrOpenBlob(file, filename);
else { // Others
var link = document.createElement("a"),
url = URL.createObjectURL(file);
link.style.display = 'none';
link.href = url;
link.download = filename || this.getRandomNum();
document.body.appendChild(link);
link.click();
setTimeout(function() {
document.body.removeChild(link);
window.URL.revokeObjectURL(url);
}, 0);
}
},
// 导出文件 -- base64 -- 先转为binary-文件-blob在下载
downloadBase64File(data, filename, type) {
if (!data) {
return;
}
this.downloadBinary(this.base64ToFile(data, filename, type), filename, type);
},
// 导出文件 -- 下载base64
// 注意download兼容性不佳
// 注释部分有待检验
downloadBase64(data, filename, type) {
if (!data) {
return;
}
type = type || 'application/vnd.ms-excel';
let file = `data:${type};base64,${data}`
// if (window.navigator.msSaveOrOpenBlob) // IE10+
// window.navigator.msSaveOrOpenBlob(file, filename);
// else { // Others
var link = document.createElement("a"),
url = file;
link.style.display = 'none';
link.href = url;
link.download = filename;
document.body.appendChild(link);
link.click();
}
6.格式化时间
// 获取时间
// @params: {time}时间戳/date格式;{format}显示示格式 Y-M-D H:F:S
getFormateTime(time, formatStr) {
let format = formatStr || 'Y-M-D';
if (!time) return '- -';
// if (time.toString().length !== 13) return time;
if (!(Object.prototype.toString.call(time).toLowerCase().indexOf('date') >= 0 || typeof time === 'number' || typeof time === 'string')) {
return '- -';
}
let date = null;
if (Object.prototype.toString.call(time).toLowerCase().indexOf('date') < 0) {
time = parseInt(time);
date = new Date(time);
}
if (Object.prototype.toString.call(date).toLowerCase().indexOf('date') < 0) {
return '- -';
}
let year = date.getFullYear();
let month = date.getMonth() + 1;
month = month < 10 ? '0' + month : month;
let day = date.getDate();
day = day < 10 ? '0' + day : day;
let hours = date.getHours();
hours = hours < 10 ? '0' + hours : hours;
let minutes = date.getMinutes();
minutes = minutes < 10 ? '0' + minutes : minutes;
let seconds = date.getSeconds();
seconds = seconds < 10 ? '0' + seconds : seconds;
// 去头尾空格
format = format.replace(/(^\s*)|(\s*$)/g, '');
format = format.replace(/(Y|y)/gi, year);
format = format.replace(/(M|m)/gi, month);
format = format.replace(/(D|d)/gi, day);
format = format.replace(/(H|h)/gi, hours);
format = format.replace(/(F|f)/gi, minutes);
format = format.replace(/(S|s)/gi, seconds);
return format;
}
// 获取距离如今XX天的时间
// 有大的值取大的（1年10月 = 1年前）
// @params: {time}时间戳/date格式;{format}显示示格式最小的显示时间：Y/M/D/H/F/S
getFromTime(time, format) {
if (!time) return "- -";
// if (time.toString().length != 13) return time;
if (!(Object.prototype.toString.call(time).toLowerCase().indexOf('date') >= 0 || typeof time === 'number' || typeof time === 'string')) {
return '- -';
}
let date = null;
if (Object.prototype.toString.call(time).toLowerCase().indexOf('date') < 0) {
time = parseInt(time);
date = new Date(time);
}
if (Object.prototype.toString.call(date).toLowerCase().indexOf('date') < 0) {
return '- -';
}
// 默认最小是天
let level = 3;
switch (format) {
case 'Y':
level = 1;
break;
case 'M':
level = 2;
break;
case 'D':
level = 3;
break;
case 'H':
level = 4;
break;
case 'F':
level = 5;
break;
case 'S':
level = 6;
break;
};
let curDate = new Date();
if (level <= 3) {
curDate.setHours(date.getHours());
}
if (level <= 4) {
curDate.setMinutes(date.getMinutes());
}
if (level <= 5) {
curDate.setSeconds(date.getSeconds());
}
curDate.setMilliseconds(date.getMilliseconds());
let tag = curDate - date < 0 ? "后" : "前";
let timeOffset = Math.abs(curDate.getTime() - date.getTime()) / 1000;
let secondsOffset = Math.floor(timeOffset);
let minutesOffset = Math.floor(timeOffset / 60);
let hoursOffset = Math.floor(timeOffset / 60 / 60);
let dayOffset = Math.floor(timeOffset / 60 / 60 / 24);
if (level <= 3) {
dayOffset = curDate - date > 0 ? Math.floor(timeOffset / 60 / 60 / 24) : Math.ceil(timeOffset / 60 / 60 / 24);
}
let monthOffset = Math.floor(dayOffset / 30);
let yearOffset = Math.floor(dayOffset / 365);
let ans = '';
if (yearOffset !== 0 && level >= 1) {
ans = `${yearOffset} 年`;
} else if (monthOffset !== 0 && level >= 2) {
ans = `${monthOffset} 月`;
} else if (dayOffset !== 0 && level >= 3) {
ans = `${dayOffset} 天`;
} else if (hoursOffset !== 0 && level >= 4) {
ans = `${hoursOffset} 小时`
} else if (minutesOffset !== 0 && level >= 5) {
ans = `${minutesOffset} 分钟`
} else if (secondsOffset !== 0 && level >= 6) {
ans = `${secondsOffset} 秒`;
} else if (level === 3) {
ans = '今天';
} else if (level > 3) {
ans = '刚刚'
}
ans = (ans === '今天' || ans === '刚刚') ? ans : ans + tag;
return ans;
}
终极版node
// 时间格式化辅助函数 date:毫秒数 format:'yyyy-MM-dd hh:mm:ss'
dateTimeFormatter(date, format) {
if (!date || date == "") {
return ""
}
if (typeof date === "string") {
var mts = date.match(/(\/Date\((\d+)\)\/)/)
if (mts && mts.length >= 3) {
date = parseInt(mts[2])
}
}
date = new Date(date)
if (!date || date.toUTCString() == "Invalid Date") {
return ""
}
var map = {
"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() //毫秒
}
format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
var v = map[t]
if (v !== undefined) {
if (all.length > 1) {
v = '0' + v
v = v.substr(v.length - 2)
}
return v
} else if (t === 'y') {
return (date.getFullYear() + '').substr(4 - all.length)
}
return all
})
return format
}
7. vue element-ui 指令 - 让弹窗可移动
// 让elemntui的el-dialog能够移动
// 调用方式v-dialogDrag='弹窗显示/隐藏参数'
dialogDrag: {
bind(el, binding, vnode, oldVnode) {
const dialogHeaderEl = el.querySelector('.el-dialog__header');
const dragDom = el.querySelector('.el-dialog');
const windowWidth = document.body.clientWidth;
const windwoHeight = document.body.clientHeight;
// 空间不足，禁止移动
if (windowWidth <= dragDom.offsetWidth && windwoHeight <= dragDom.offsetHeight) {
return;
}
// 初始化
el.style.overflow = 'visible';
el.style.marginTop = dragDom.style.marginTop;
el.style.marginLeft = 'auto';
el.style.marginRight = 'auto';
setTimeout(() => {
el.style.left = (windowWidth - dragDom.offsetWidth) / 2 + 'px';
}, 0);
el.style.right = 'auto';
el.style.bottom = 'auto';
dragDom.style.marginTop = 0;
dialogHeaderEl.style.cursor = 'move';
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
const sty = el.currentStyle || window.getComputedStyle(el, null);
const styMarginTop = el.style.marginTop;
dialogHeaderEl.onmousedown = (e) => {
// 鼠标按下，计算当前元素距离可视区的距离
const disX = e.clientX - dialogHeaderEl.offsetLeft;
const disY = e.clientY - dialogHeaderEl.offsetTop;
// 获取到的值带px 正则匹配替换
let styL, styT;
// 注意在ie中 第一次获取到的值为组件自带50% 移动以后赋值为px
if (sty.left.includes('%')) {
styL = +windowWidth * (+sty.left.replace(/\%/g, '') / 100);
styT = +windwoHeight * (+sty.top.replace(/\%/g, '') / 100);
} else {
styL = +sty.left.replace(/\px/g, '');
styT = +sty.top.replace(/\px/g, '');
};
document.onmousemove = function(e) {
// 经过事件委托，计算移动的距离
let l = e.clientX - disX + styL;
let t = e.clientY - disY + styT;
let marginTopPx = styMarginTop;
let leftOver = windowWidth - dragDom.offsetWidth;
if (styMarginTop.indexOf('vh') >= 0) {
marginTopPx = windwoHeight / 100 * parseFloat(styMarginTop.replace(/\px/g, ''))
}
let marginBottomLeft = windwoHeight - marginTopPx - el.offsetHeight + 50;
// 边界值控制
if (l < 0 && windowWidth > dragDom.offsetWidth) {
l = 0;
} else if (l > leftOver && windowWidth > dragDom.offsetWidth) {
l = leftOver;
}
if (t < -marginTopPx && windwoHeight > dragDom.offsetHeight) {
t = -marginTopPx;
} else if (t > marginBottomLeft && windwoHeight > dragDom.offsetHeight) {
t = marginBottomLeft;
}
// 移动当前元素
if (windowWidth > dragDom.offsetWidth) {
el.style.left = `${l}px`;
}
if (windwoHeight > dragDom.offsetHeight) {
el.style.top = `${t}px`;
}
//将此时的位置传出去
//binding.value({x:e.pageX,y:e.pageY})
};
document.onmouseup = function(e) {
document.onmousemove = null;
document.onmouseup = null;
};
}
},
update(el, binding, vnode, oldVnode) {
const dragDom = el.querySelector('.el-dialog');
const windowWidth = document.body.clientWidth;
// 恢复位置
if (binding.value && binding.oldValue !== binding.value) {
setTimeout(() => {
el.style.left = (document.body.clientWidth - dragDom.offsetWidth) / 2 + 'px';
el.style.top = 0;
}, 0);
}
}
}
以上内容，若有错误请指出，不甚感激。
如需转载，请注明出处element-ui
相关文章
- 1. Android Http通信模块封装
- 2. head通用模板封装
- 3. JavaScript 模块封装
- 4. IGBT模块封装
- 5. simulink的模块封装与解封装
- 6. 如何封装Node.js和前端通用的模块
- 7. （三）工具模块封装
- 8. 网络模块封装
- 9. logging日志模块（封装）
- 10. node封装mysql模块
- 更多相关文章...
- • C# 封装 - C#教程
- • Lua 模块与包 - Lua 教程
- • Composer 安装与使用
- • 委托模式
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Window下Ribbit MQ安装
- 2. Linux下Redis安装及集群搭建
- 3. shiny搭建网站填坑战略
- 4. Mysql8.0.22安装与配置详细教程
- 5. Hadoop安装及配置
- 6. Python爬虫初学笔记
- 7. 部署LVS-Keepalived高可用集群
- 8. keepalived+mysql高可用集群
- 9. jenkins 公钥配置
- 10. HA实用详解
欢迎关注本站公众号,获取更多信息
相关文章
- 1. Android Http通信模块封装
- 2. head通用模板封装
- 3. JavaScript 模块封装
- 4. IGBT模块封装
- 5. simulink的模块封装与解封装
- 6. 如何封装Node.js和前端通用的模块
- 7. （三）工具模块封装
- 8. 网络模块封装
- 9. logging日志模块（封装）
- 10. node封装mysql模块