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

程序员文章站 2022-06-28 11:12:04

今年工作进度到这里结束，整理一下今年收集的自用js库,后期会更新，代码已贴github=>https://github.com/lpg-kobe/personal-github /** * @param {long} //通用函数库 * @param {onerror} //js错误调试 * @au ......

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

打赏

微信扫一扫

Head内常用标签

一、标签分类 1.1 自闭和标签自闭和标签只有开头没有结尾，自动闭合： 1.2主动闭合标签有开头也有结尾，是主动闭合的，称为主动闭合标签，我们用... [阅读全文]
自己收集的工作js库---2018-02-07

今年工作进度到这里结束，整理一下今年收集的自用js库,后期会更新，代码已贴github=>https://github.com/lpg-kob... [阅读全文]
Google资深工程师深度讲解Go语言

后端开发:1、高级java软件架构师实战培训视频教程2、大型SpringMVC，Mybatis，Redis，Solr，Nginx，SSM分布式电商项... [阅读全文]
jQuery 实战读书笔记之第六章：事件本质

理解浏览器事件模型 understandEventModel.html 代码： understandEventModel.js： jQuery 事件... [阅读全文]
进程如何执行

... [阅读全文]