自己收集的工作js库---2018-02-07

今年工作进度到这里结束，整理一下今年收集的自用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

}

};