今年工作进度到这里结束，整理一下今年收集的自用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'];//返回数据格式视情况而定
) {
callback(info);
} else {
) {
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 () {
) {
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 = {
,
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.tailload) {
_this.loadTxt.innerHTML = "已全部加载完成";
_this.oPageLoad.tailload = !_this.oPageLoad.tailload;
return;
} else {
_this.loadTxt.innerHTML = "已全部加载完成";
return;
}
};
&& _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] ] ] ] ] ] ] ;
// 根据关系进行判断
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;
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(';');
, len = cookArr.length; i < len; i++) {
var cookName = cookArr[i].split('=');
] == name) {
]);
}
};
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 () {
))));
},
rendomNum: function (min, max) {
return Math.floor(Math.random() * (max - min) + min);
},
isPhoneNum: function (str) {
[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;//375为基准视图宽度，为设计稿宽度/2; 20为自定义根字体像素大小
].style.fontSize = fz + 'px';
},
getQueryString: function (key) { //正则获取url后面的参数值'?service=&name=name'=>name
const reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
).match(reg);
]) : 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";
}, );
}
}
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);
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]); }
); }
delete oStorage[sKey];
}
; aKeys, )) { oStorage]); }
, aCouples = document.cookie.split(/\s*;\s*/); iCouplId < aCouples.length; iCouplId++) {
iCouple = aCouples[iCouplId].split(/\s*=\s*/);
) {
oStorage[iKey])]]);
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 = [];
, 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
}
};

自己收集的工作js库---2018-02-07的更多相关文章

  1. Vue-admin工作整理（十九）：从数字渐变组件谈第三方JS库Count-to的使用

    1.组件封装基础 npm install countup@latest 2.组件中使用id值 3.组件中获得dom 如何封装一个组件,在组件中用到需要传入HTML元素ID值的JS库时如何处理,如何获取 ...

  2. node.js在2018年能继续火起来吗？我们来看看node.js的待遇情况

    你知道node.js是怎么火起来的吗?你知道node.js现在的平均工资是多少吗?你知道node.js在2018年还能继续火吗?都不知道?那就来看文章吧,多学点node.js,说不定以后的你工资就会高 ...

  3. 【转载】写一个js库需要怎样的知识储备和技术程度？

    作者:小爝链接:https://www.zhihu.com/question/30274750/answer/118846177来源:知乎著作权归作者所有,转载请联系作者获得授权. 1,如何编写健壮的 ...

  4. 解决jQuery多个版本，与其他js库冲突方法

    jQuery多个版本或和其他js库冲突主要是常用的$符号的问题,这个问题 jquery早早就有给我们预留处理方法了,下面一起来看看解决办法. 1.同一页面jQuery多个版本或冲突解决方法. < ...

  5. 现在流行什么 JS库/框架？

    现在大家最感兴趣的 JS 库和框架是什么? jQuery 91.5% Underscore 38.6% AngularJS 28.5% Backbone 18.6% React 15.7% Knock ...

  6. 学习OpenSeadragon之一（一个显示多层图片的开源JS库）

    OpenSeadragon是一个可以显示多层图片(可放大缩小)的Web库,基于JavaScript,支持桌面和手机. 由于我项目需要,却没有找到任何中文教程,因此在官网上一边学习,一边总结于此. 官网 ...

  7. javascript学习(一)构建自己的JS库

    库是一个饱受争议的热门话题.一种观点认为它是一种非常棒的工具,是任何开发者都不可或缺的:另一种观点则认为在不理解库的内部工作原理的情况下对库形成依赖,会助长懒惰的风气从而导致开发者素质下降 库是一个饱 ...

  8. impress.js 一个创建在线幻灯的js库

    真的好奇怪,我居然会写前端技术的博客.没有办法的,最近实习,看的大多是前端.所以今天就用这个来练练手了. Impress.js 是一个非常棒的用来创建在线演示的Javascript库.它基于CSS3转 ...

  9. 12个值得关注的顶级可视化JS库 涉及图表、动画、时间处理，表格操作

    本文是译文,原文是https://da-14.com/blog/top-11...我在原文的基础上加了百度的Echats图表库,这个也是毫不逊色其他图表库的.另外Handsontable电子表格库也是 ...

随机推荐

  1. iptables网络安全服务详细使用

    iptables防火墙概念说明 开源的基于数据包过滤的网络安全策略控制工具. centos6.9  --- 默认防火墙工具软件iptables centos7    --- 默认防火墙工具软件fire ...

  2. cs231n spring 2017 lecture1 Introduction to Convolutional Neural Networks for Visual Recognition 听课笔记

    1. 生物学家做实验发现脑皮层对简单的结构比如角.边有反应,而通过复杂的神经元传递,这些简单的结构最终帮助生物体有了更复杂的视觉系统.1970年David Marr提出的视觉处理流程遵循这样的原则,拿 ...

  3. bzoj 2806: [Ctsc2012]Cheat

    传送门 好久没刷bzoj惹…… 题意不说可以嘛. 首先二分答案. SAM的事情搞完以后就是dp辣. 我们已经对于每个位置i,找到了最小的一个k,使得[k,i]这个子串在模版串中出现过.那么我们需要做的 ...

  4. [bzoj2333] [SCOI2011]棘手的操作 (可并堆)

    //以后为了凑字数还是把题面搬上来吧2333 发布时间果然各种应景... Time Limit: 10 Sec  Memory Limit: 128 MB Description 有N个节点,标号从1 ...

  5. 2017广东工业大学程序设竞赛C题爬楼梯

    Description 小时候,我只能一阶一阶得爬楼梯, 后来,我除了能一次爬一阶,还可以一次爬两阶, 到现在,我最多一次可以爬三阶. 那么现在问题来了,我想爬上n层楼,相邻楼层之间有一段楼梯,虽然我 ...

  6. tju_4147 kd树+最小生成树

    kd树模板+全图最小生成树 标签(空格分隔): kd树+最小生成树 题目链接 题意: k维太空中有n个点,每个点可以与距离它m近的点连边,现在给你一堆点,并给出坐标,现在要建立通信网络,一些可以互相到 ...

  7. cookie 和 session的区别

    一.总结: 1.cookie数据存放在客户的浏览器上,session数据放在服务器上. 2.cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗 考虑到安全应当使用ses ...

  8. 从零开始学习前端开发 — 11、CSS3选择器

    一.基本选择器 1.* 通配符(通用选择器) 2.id选择器 3.class选择器(类选择器) 4.标签选择器(元素选择符) 5.群组选择器 (选择符1,选择符2{...}) 二.层次选择器(关系选择 ...

  9. No input file specified的解决方法apache伪静态

    http://jingyan.baidu.com/article/dca1fa6f8d623ff1a44052e8.html (一)IIS Noinput file specified 方法一:改PH ...

  10. 怎么使用linux命令重启服务器

    一下的命令都可以重启Linux服务器: 1.shutdown -r now 2.reboot 3.startx