自己收集的工作js库---2018-02-07
2018-06-24 01:29:48来源：未知 阅读 ()
今年工作进度到这里结束，整理一下今年收集的自用js库,后期会更新，代码已贴github=>https://github.com/lpg-kobe/personal-github
/**
* @param {long} //通用函数库
* @param {onerror} //js错误调试
* @author lpg 2017-11-02
*/
window.onerror = function (errorMessage, scriptURI, lineNumber, columnNumber, errorObj) {
console.log("错误信息：", errorMessage);
console.log("出错文件：", scriptURI);
console.log("出错行号：", lineNumber);
console.log("出错列号：", columnNumber);
console.log("错误详情：", errorObj);
}
var eventUtils = {//跨浏览器事件
getEvent: function (event) {//获取事件
return event ? event : window.event
},
addHandler: function (ele, type, handler) {//事件监听
if (ele.addEventListener) {
ele.addEventListener(type, handler)
} else if (ele.attachEvent) {
ele.attachEvent('on' + type, handler)
} else {
ele['on' + type]
}
},
removeHandler: function (ele, type, handler) {//移除监听
if (ele.removeEventListener) {
ele.removeEventListener(type, handler)
} else if (ele.attachEvent) {
ele.detachEvent('on' + type, handler)
} else {
ele['on' + type]
}
},
getTarget: function (event) {//事件目标
if (event.target) {
return event.target
} else {
return event.srcElement
}
},
preventDefault: function (event) {//阻止默认事件
if (event.preventDefault) {
return event.preventDefault
} else {
return event.returnValue = false
}
},
stopPropagation: function (event) {//阻止冒泡
if (event.stopPropagation) {
return event.stopPropagation
} else {
return event.cancelBubble = true
}
}
}
/*
*通用ajax请求
*需引入jq库支持
*/
var xhr = {
ajaxRequest(options = {
type: 'Get'
}) {//同步ajax
var ajax = {
type: options.type,
url: options.url,
data: options.data,
dataType: 'json',
xhrFields: {
withCredentials: true
},
crossDomain: true
};
ajax.success = (result) => {
console.log(result)
};
$.ajax(ajax)
},
async asyncRequest(options = {
type: 'Get'
}) {//异步ajax
return new promise((resolve, reject) => {
var ajax = {
type: options.type,
url: options.url,
data: options.data,
dataType: 'json',
async: true,
xhrFields: {
withCredentials: true
},
crossDomain: true
};
ajax.success = (result) => {
resolve(result);
console.log(result)
};
ajax.error = (error) => {
resolve(error)
};
$.ajax(ajax)
})
}
}
/**
* @param {httpGet()}老版本http请求
* @method => httpGet({'请求url','传输data','回调函数'})
*/
function httpGet(services, data, callback) {
var url = 'example';
$.ajax({
url: url,
data: data,
dataType: 'json',
xhrFields: {
withCredentials: true
},
crossDomain: true,
success: function (data) {
var info = data['data']['info'];//返回数据格式视情况而定
if (data['ret'] == 200 && data['data']['code'] == 0) {
callback(info);
} else {
if (data['data']['code'] == 700) {
return;
}
var msg = data['data'] && data['data']['msg'] ? data['data']['msg'] : '';
msg = msg == '' && data['msg'] ? data['msg'] : msg;
//xhr.showmsg(msg);
}
},
error: function (data) {
}
})
}
/* 封装ajax函数
1 * @param 简易原生ajax
2 * @param {string}opt.type http连接的方式，包括POST和GET两种方式
3 * @param {string}opt.url 发送请求的url
4 * @param {boolean}opt.async 是否为异步请求，true为异步的，false为同步的
5 * @param {object}opt.data 发送的参数，格式为对象类型
6 * @param {function}opt.success ajax发送并接收成功调用的回调函数
7 */
function Ajax(opt) {
opt = opt || {};
opt.method = opt.method.toUpperCase() || 'POST';
opt.url = opt.url || '';
opt.async = opt.async || true;
opt.data = opt.data || null;
opt.success = opt.success || function () { };
var xmlHttp = null;
if (XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
else {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
};
var params = [];
for (var key in opt.data) {
params.push(key + '=' + opt.data[key]);
}
var postData = params.join('&');
if (opt.method.toUpperCase() === 'POST') {
xmlHttp.open(opt.method, opt.url, opt.async);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
xmlHttp.send(postData);
}
else if (opt.method.toUpperCase() === 'GET') {
xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
xmlHttp.send(null);
}
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
opt.success(xmlHttp.responseText);
}
};
}
/**
* 分页加载器
* @type {Function}
* 方法可扩展
*/
function pagingLoad(options) { //分页加载
if (!document.getElementById('load_txt')) {
this.loadTxt = document.createElement('div');
loadTxt.id = "load_txt";
loadTxt.style.textAlign = "center";
document.body.appendChild(loadTxt);
};
this.oPageLoad = {
page: 1,
el: options.el, //滚动的对象
apiUrl: options.url,
data: options.data || {},
tailload: true,
sucload: true,
totalpage: options.totalpage, //总页数
containArea: options.containArea, //内容区
callback: options.callback
};
var _this = this;
this.oPageLoad.el.onscroll = function () {
var scrollTop = this.scrollTop, //滚动条距顶部的高度
containHei = _this.oPageLoad.containArea.scrollHeight, //内容高度(scrollHeight)
clientHei = this.clientHeight; //可视高度
console.log('当前总页数' + _this.oPageLoad.totalpage, scrollTop, containHei, clientHei);
if (_this.oPageLoad.page == _this.oPageLoad.totalpage && containHei - scrollTop - clientHei < 20) { //判断页码是否等于总页码且滚动条到达最底部
if (_this.oPageLoad.tailload) {
_this.loadTxt.innerHTML = "已全部加载完成";
_this.oPageLoad.tailload = !_this.oPageLoad.tailload;
return;
} else {
_this.loadTxt.innerHTML = "已全部加载完成";
return;
}
};
if (containHei - scrollTop - clientHei < 20 && _this.oPageLoad.sucload) {
_this.oPageLoad.page++;
_this.oPageLoad.sucload = !_this.oPageLoad.sucload;
_this.loadTxt.innerHTML = "加载中...";
console.log('loading...第' + _this.oPageLoad.page + '页');
_this.oPageLoad.data["page"] = _this.oPageLoad.page;
httpGet(_this.oPageLoad.apiUrl, _this.oPageLoad.data, function (data) {//请求加载
commonArray = commonArray.concat(data);
if (pagingLoadOption.containArea == document.getElementById('successList')) {//区分区块分区加载
var $successData = template('success_list', {info: commonArray,timeFormat: timeFormat });
$("#successList").html($successData);
} else {
var $inviteData = template('invite_list', {info: commonArray,timeFormat: timeFormat });
$("#inviteList").html($inviteData);
};
_this.loadTxt.innerHTML = "";
_this.oPageLoad.sucload = !_this.oPageLoad.sucload;
});
};
};
}
/**
* @param {function} 实用函数
* @method => bVersion()判断浏览器内核信息EXP:if(bVersion.iwx)
* @method => getExplore获取浏览器类型和版本,EXP:return Safari:9.0
* @method => toArray(['1','2'],2)仿Array.shift()方法从头部清除数组指定长度并返回新数组
* @method => initRun() 根据设备视口clientWidth宽度调节字体大小(基于750px宽度设计稿设置跟元素字体大小20px==1rem)
* @method => getQueryString() 获取url链接中参数对应的值
* @method => setStore(key, value) 本地存储key的value
* @method => getStore(key, exp, name) 取存储的数据:key[名称]exp[过期时间]name[指定命名的变量]
* @method => hasClass(ele,cls)判断element节点是否存在clasName('cls')
* @method => addClass(ele,cls)在hasClass判断基础上添加clasName('cls')
* @method => removeClass(ele,cls)在hasClass判断基础上移除clasName('cls')
* @method => getCookie(name)获取名为name的cookie值cookName[0]为键名,cookName[1]为键值
* @method => setCookie(name,value,days)设置过期时间戳expires为days名为name值为value的cookie
* @method => removeCookie(name)重新设置过期的cookie即可移除
* @method => randomColor生成随机颜色#xxxxxx
* @method => randomNum生成指定范围的随机数(min-max)
* @method => isPhoneNum(str)是否为手机号
*/
var utils = {
bVersion: function () {
var u = navigator.userAgent;
return { //移动终端浏览器内核信息
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
iwx: /MicroMessenger/i.test(u),//是否微信
iWeiBo: /Weibo/i.test(navigator.userAgent)//微博客户端
};
}(),
getExplore: function () {//获取浏览器类型和版本
var sys = {},
ua = navigator.userAgent.toLowerCase(),
s; (s = ua.match(/rv:([\d.]+)\) like gecko/)) ? sys.ie = s[1] : (s = ua.match(/msie ([\d\.]+)/)) ? sys.ie = s[1] : (s = ua.match(/edge\/([\d\.]+)/)) ? sys.edge = s[1] : (s = ua.match(/firefox\/([\d\.]+)/)) ? sys.firefox = s[1] : (s = ua.match(/(?:opera|opr).([\d\.]+)/)) ? sys.opera = s[1] : (s = ua.match(/chrome\/([\d\.]+)/)) ? sys.chrome = s[1] : (s = ua.match(/version\/([\d\.]+).*safari/)) ? sys.safari = s[1] : 0;
// 根据关系进行判断
if (sys.ie) return ('IE: ' + sys.ie)
if (sys.edge) return ('EDGE: ' + sys.edge)
if (sys.firefox) return ('Firefox: ' + sys.firefox)
if (sys.chrome) return ('Chrome: ' + sys.chrome)
if (sys.opera) return ('Opera: ' + sys.opera)
if (sys.safari) return ('Safari: ' + sys.safari)
return 'Unkonwn'
},
toArray(arr, len) {
len = len || 0;
var i = arr.length - len;
var ret = new Array(i);
while (i--) {
ret[i] = arr[i + len];
}
console.log(ret);
return ret
},
hasClass: function (ele, cls) {//true||false
return (new RegExp('(\\s|^)' + cls + '(\\s|$)')).test(ele.className);
},
addClass: function (cls) {
if (!hasClass(ele, cls)) {
ele.className += '' + cls;
}
},
removeClass: function (cls) {
if (hasClass(ele, cls)) {
var exp = new RegExp('(\\s|^)' + cls + '(\\s|$)');
ele.className = ele.className.replace(exp, ' ');
}
},
getCookie: function (name) {
var cookArr = document.cookie.replace(/\s/g, "").split(';');
for (var i = 0, len = cookArr.length; i < len; i++) {
var cookName = cookArr[i].split('=');
if (cookName[0] == name) {
return decodeURIComponent(cookName[1]);
}
};
return '';
},
setCookie: function (name, value, days) {
var date = new Date();
date.setDate(date.getDate() + days);
document.cookie = name + '=' + value + ';expires=' + date;
},
removeCookie: function (name) {
//设置过期cookie会自动移除
setCookie(name, '1', -1)
},
randomColor: function () {
return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(- 6);
},
rendomNum: function (min, max) {
return Math.floor(Math.random() * (max - min) + min);
},
isPhoneNum: function (str) {
return /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/.test(str)
},
copy: function (event) {//有选择性使用
var input = document.createElement('input');
input.type = "text";
input.value = "contain to copy";
event.currentTarget.appendChild(input);
input.select();
document.execCommand('copy', false, null);
},
initRun: function () {//响应式字体大小
var _this = this,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
_this.fontAdapt();
window.onresize = function () {
_this.fontAdapt();
}
},
fontAdapt: function () {//div-width(375px)=>(html(20px)=>1rem)==(html(80px)=>html((80/2)px)=2rem)
var w = document.documentElement.clientWidth,
fz = w * 20 / 375;//375为基准视图宽度，为设计稿宽度/2; 20为自定义根字体像素大小
document.getElementsByTagName(html)[0].style.fontSize = fz + 'px';
},
getQueryString: function (key) { //正则获取url后面的参数值'?service=&name=name'=>name
const reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
const result = window.location.search.substr(1).match(reg);
return result ? decodeURIComponent(result[2]) : null;
},
setStore(key, value) { //localStorage存储数据 key[名称]value[数据]=>(配合store.min.js使用)
const storeTime = new Date().getTime();
value['setKeyTime'] = storeTime;
store.set(key, value);
},
getStore(key, exp, name) { //取存储的数据:key[名称]exp[过期时间]name[指定命名的变量]
const getKeyData = store.get(key);
exp && getKeyData && (new Date().getTime() - getKeyData.setKeyTime > exp) && store.remove(key) && (name && (name = store.get(key)));
return getKeyData;
},
showmsg(msg) {//提示框
const $formMsg = document.getElementById('form-msg');
if ($formMsg == null || $formMsg == "") {
const tipEle = document.createElement("div");
tipEle.className = "tc form-msg";
tipEle.id = "form-msg";
tipEle.innerHTML = msg;
document.body.appendChild(tipEle);
} else {
$formMsg.style.display = "block";
$formMsg.innerHTML = msg;
}
setTimeout(() => {
document.getElementById('form-msg').style.display = "none";
}, 1000);
}
}
utils.initRun();
/**
* localStorage兼容性处理
*/
if (!window.localStorage) {
Object.defineProperty(window, "localStorage", new (function () {
var aKeys = [], oStorage = {};
Object.defineProperty(oStorage, "getItem", {
value: function (sKey) { return sKey ? this[sKey] : null; },
writable: false,
configurable: false,
enumerable: false
});
Object.defineProperty(oStorage, "key", {
value: function (nKeyId) { return aKeys[nKeyId]; },
writable: false,
configurable: false,
enumerable: false
});
Object.defineProperty(oStorage, "setItem", {
value: function (sKey, sValue) {
if (!sKey) { return; }
document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/";
},
writable: false,
configurable: false,
enumerable: false
});
Object.defineProperty(oStorage, "length", {
get: function () { return aKeys.length; },
configurable: false,
enumerable: false
});
Object.defineProperty(oStorage, "removeItem", {
value: function (sKey) {
if (!sKey) { return; }
var sExpDate = new Date();
sExpDate.setDate(sExpDate.getDate() - 1);
document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; path=/";
},
writable: false,
configurable: false,
enumerable: false
});
this.get = function () {
var iThisIndx;
for (var sKey in oStorage) {
iThisIndx = aKeys.indexOf(sKey);
if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
else { aKeys.splice(iThisIndx, 1); }
delete oStorage[sKey];
}
for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
for (var iCouple, iKey, iCouplId = 0, aCouples = document.cookie.split(/\s*;\s*/); iCouplId < aCouples.length; iCouplId++) {
iCouple = aCouples[iCouplId].split(/\s*=\s*/);
if (iCouple.length > 1) {
oStorage[iKey = unescape(iCouple[0])] = unescape(iCouple[1]);
aKeys.push(iKey);
}
}
return oStorage;
};
this.configurable = false;
this.enumerable = true;
})());
} else {
return window.localStorage
}
/**
* 原生js仿jq常用API操作DOM
* @type {Object}
* @method $(".selector").method()
* @method {.css}=>$(".selector").css({Obj})
* @return this
*/
//$ selector
function $(selector) {
return document.querySelector(selector)
}
//hide()
Object.prototype.hide = function () {
this.style.display = "none";
return this;
};
//show()
Object.prototype.show = function () {
this.style.display = "block";
return this;
};
//hasClass()
Object.prototype.hasClass = function (cName) {
return !!this.className.match(new RegExp("(\\s|^)" + cName + "(\\s|$)"));
}
//addClass()
Object.prototype.addClass = function (cName) {
if (!this.hasClass(cName)) {
this.className += " " + cName;
}
return this;
}
//removeClass()
Object.prototype.removeClass = function (cName) {
if (this.hasClass(cName)) {
this.className = this.className.replace(new RegExp("(\\s|^)" + cName + "(\\s|$)"), " ");
}
return this;
}
//parent()
Object.prototype.parent = function () {
return this.parentNode;
}
//next()
Object.prototype.next = function () {
return this.nextElementSibling;
}
//prev()
Object.prototype.prev = function () {
return this.previousElementSibling;
}
//siblings()
Object.prototype.siblings = function () {
var chid = this.parentNode.children;
var eleMatch = [];
for (var i = 0, l = chid.length; i < l; i++) {
if (chid[i] != this) {
eleMatch.push(chid[i]);
}
}
return eleMatch;
}
//css()
Object.prototype.css = function (cssObj) {
var cssStr = '';
function objToCssStr(cssObj) {
for (var k in cssObj) {
cssStr += k + ':' + cssObj[k] + ';'
};
return cssStr
};
this.style.cssText = objToCssStr(cssObj);
}
/**
* @desc 判断原生类型
* @return {Boolean}
*/
function isObject(obj) {//Object or not
return Object.prototype.toString.call(obj) === '[object Object]'
}
function isNumber(num) {//Number or not
return Object.prototype.toString.call(num) === '[object Number]'
}
function isString(str) {//String or not
return Object.prototype.toString.call(str) === '[object String]'
}
function isArray(arr) {//Array or not
return Object.prototype.toString.call(arr) === '[object Array]'
}
function isBoolean(boolean) {//Boolean or not
return Object.prototype.toString.call(boolean) === '[object Boolean]'
}
function isFunction(fn) {//Function or not
return Object.prototype.toString.call(fn) === '[object Function]'
}
function isRegExp(reg) {//RegExp or not
return Object.prototype.toString.call(reg) === '[object RegExp]'
}
function looseEqual(a, b) {//check two parameter is looslyEqual or not(===)
if (a === b) { return true }
var isObjectA = isObject(a);
var isObjectB = isObject(b);
if (isObjectA && isObjectB) {
try {
var isArrayA = Array.isArray(a);
var isArrayB = Array.isArray(b);
if (isArrayA && isArrayB) {
return a.length === b.length && a.every(function (e, i) {
return looseEqual(e, b[i])
})
} else if (!isArrayA && !isArrayB) {
var keysA = Object.keys(a);
var keysB = Object.keys(b);
return keysA.length === keysB.length && keysA.every(function (key) {
return looseEqual(a[key], b[key])
})
} else {
/* istanbul ignore next */
return false
}
} catch (e) {
/* istanbul ignore next */
return false
}
} else if (!isObjectA && !isObjectB) {
return String(a) === String(b)
} else {
return false
}
};
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：react创建组件的三种方式
下一篇：vue中使用ueditor
相关文章
- 如何用算法删除重复数据 2020-03-18
- 工作查漏补缺 2019-08-14
- vue.js项目开发实战笔记001——准备工作 2019-08-14
- js实现div转图片并保存 2019-08-14
- 多个浏览器下应用前端JS实现一键导出excel表 2019-08-14
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
热门词条
最新资讯
热门关注
热门标签