javascript中最最最常用的方法封装

Posted 2020-08-15

javascript 常用方法的封装，小编持续升级中...

 　　方法封装（js原生）：

一、Object 类型

• MHQ.ajaxUtils 定义一个ajax工具类

  • ajax 定义一个ajax工具函数

  • get 方法

  • post 方法

• MHQ.elementUtils DOM元素工具类

  • replaceClassName 替换字符串，设置className属性

  • getInnerText 获取DOM元素内部文本的兼容方法

  • setInnerText 设置DOM元素内部文本的兼容方法

  • getNextElement 封装了获取元素的下一个兄弟元素的方法

  • getPreviousElement 封装了获取元素的上一个兄弟元素的方法

  • getFirstElement 封装寻找某个元素的第一个子元素的方法

  • getLastElement 封装寻找某个元素的最后一个子元素的方法

  • my$ 封装了通过id获取元素的方法

• MHQ.eventUntil事件处理类 封装了事件处理的兼容方法

  • addSeveralEvent(element, eventName, fn);  给一个元素同时多个事件

  • addEvent(element, eventName, fn);  封装添加事件的方法

  • removeEvent(element, eventName, fn);  封装移除事件的方法

• MHQ.getDateObj 获取指定格式的日期

• getDate 获取指定格式的日期

• transDateFormat 日期显示格式化函数

• MHQ.getRandomObj 获取n个随机数 最终得到数组 object.getRandomArr 得到随机数的数组

  • getRandomArr(count, min, max); 获取n个随机数的方法 最终得到数组

二、接口类:   

• MHQ.Interface(interfaceName, methodsArr) 接口类

  • 　verifyInterface(instanceSets) 接口校验方法

三、方法：

• MHQ.animate(element, json, fn); js 特效中的动画函数封装

• MHQ.getAttrValue(element,attr); 获取属性的兼容方法

• MHQ.getObjArrMax(arr) 得到诸如[{attr1:2,attr2:3}, {attr1:1,attr2:2}]数组中各对象的attr1属性中最大的一个（仅仅根据第一个属性的最大来返回一个对象）

• MHQ.getRandom(min, max); 获取一个随机整数 Math.random(); 中的参数可以是一个，考虑了参数是一个的情况

• MHQ.getColor(count); 获取随机的颜色数组

• MHQ.sortArr(arr) 数组冒泡排序

注： 每个函数的功能都在代码中详细说明。

/**
 * Created by mhq on 2016/10/16.
 *
 * Object:
 *      MHQ.ajaxUtils 定义一个ajax工具类
 *          ajax 定义一个ajax工具函数
 *          get 方法
 *          post 方法
 *
 *      MHQ.elementUtils DOM元素工具类
 *          replaceClassName  替换字符串，设置className属性
 *          getInnerText  获取DOM元素内部文本的兼容方法
 *          setInnerText  设置DOM元素内部文本的兼容方法
 *          getNextElement  封装了获取元素的下一个兄弟元素的方法
 *          getPreviousElement  封装了获取元素的上一个兄弟元素的方法
 *          getFirstElement  封装寻找某个元素的第一个子元素的方法
 *          getLastElement  封装寻找某个元素的最后一个子元素的方法
 *          my$  封装了通过id获取元素的方法
 *
 *      MHQ.eventUntil 事件处理对象，封装了绑定事件的方法
 *          addSeveralEvent(element, eventName, fn);  给一个元素同时多个事件
 *          addEvent(element, eventName, fn);  封装添加事件的方法
 *          removeEvent(element, eventName, fn);  封装移除事件的方法
 *
 *      MHQ.getDateObj 获取指定格式的日期
 *          getDate 获取指定格式的日期
 *          transDateFormat 日期显示格式化函数
 *
 *      MHQ.getRandomObj 获取n个随机数 最终得到数组  object.getRandomArr 得到随机数的数组
 *          getRandomArr(count, min, max);  获取n个随机数的方法 最终得到数组
 *
 * Class:
 *      MHQ.Interface(interfaceName, methodsArr) 接口类
 *          verifyInterface(instanceSets) 接口校验方法
 *
 * METHOD:
 *      MHQ.animate(element, json, fn); js 特效中的动画函数封装
 *      MHQ.getAttrValue(element,attr);  获取属性的兼容方法
 *      MHQ.getObjArrMax(arr) 得到诸如[{attr1:2,attr2:3}, {attr1:1,attr2:2}]数组中各对象的attr1属性中最大的一个（比较勉强的方法）
 *      MHQ.getRandom(min, max);  获取一个随机整数 Math.random(); 中的参数可以是一个，考虑了参数是一个的情况
 *      MHQ.getColor(count); 获取随机的颜色数组
 *      MHQ.sortArr(arr) 数组冒泡排序
 */
// 命名空间
var MHQ = {};

/**
 * OBJECT 定义一个ajax工具
 * @type {{ajax, get, post}}
 */
MHQ.ajaxUtils = (function () {
    return {
        /**
         * ajax 工具函数
         * @param options 是一个对象
         * @returns {*}
         */
        ajax: function (options) {
            /*如果你什么都没传呢？停止执行*/
            if (!options || typeof  options != ‘object‘) return fasle;
            /*如果传了*/
            var type = options.type || ‘get‘;
            var url = options.url || location.pathname;
            /* false true  "" false  */
            var async = options.async === false ? false : true;
            /*需要传递的数据*/
            var data = options.data || {};
            /*需要data转化成ajax传递数据的格式 {name:‘‘,age:‘‘} ===>>> name=gc&age=10 */
            var dataStr = ‘‘;
            for (key in data) {
                dataStr += key + ‘=‘ + data[key] + ‘&‘;
            }
            /*str.slice(0,-1); 取到倒着数几个字符*/
            dataStr = dataStr && dataStr.slice(0, -1);
            /*ajax编程*/
            /*初始化*/
            var xhr = new XMLHttpRequest();
            /*设置请求行*/
            /*如果是get请求  参数是不是该拼接在url后面*/
            xhr.open(type, type == ‘get‘ ? url + ‘?‘ + dataStr : url, async);
            /*设置请求头*/
            if (type == ‘post‘) {
                xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded‘);
            }
            /*设置请求内容*/
            xhr.send(type == ‘get‘ ? null : dataStr);
            /*响应*/
            xhr.onreadystatechange = function () {
                /*首先确定通讯完全完成*/
                if (xhr.readyState == 4) {
                    /*如果是成功的请求 status == 200 */
                    if (xhr.status == 200) {
                        /*成功*/
                        /*知道后台想要返回什么数据类型 application/json;charset=utf-8*/
                        /*application/xml application/json text/html text/xml text/json text/css*/
                        var contentType = xhr.getResponseHeader(‘Content-Type‘);
                        var result = null;
                        if (contentType.indexOf(‘xml‘) > -1) {
                            /*返回什么数据类型xml*/
                            result = xhr.responseXML;
                        } else if (contentType.indexOf(‘json‘) > -1) {
                            /*返回什么数据类型json*/
                            var data = xhr.responseText;
                            result = data && JSON.parse(data);
                        } else {
                            result = xhr.responseText;
                        }
                        /*执行成功回调函数*/
                        options.success && options.success(result);

                    } else {
                        /*失败*/
                        options.error && options.error({status: xhr.status, statusText: xhr.statusText});
                    }
                }
            }
        },
        /**
         * get 方法
         * @param options
         */
        get: function (options) {
            options.type = ‘get‘;
            this.ajax(options);
        },
        /**
         * post 方法
         * @param options
         */
        post: function (options) {
            options.type = ‘post‘;
            this.ajax(options);
        }
    }
})();

/**
 * OBJECT 事件处理对象，封装了绑定事件的方法
 * @returns {{addSeveralEvent: addSeveralEvent, addEvent: addEvent, removeEvent: removeEvent}}
 * @constructor
 */
MHQ.eventUntil = (function () {
    return {
        /**
         * METHOD 给一个元素同时多个事件
         * @param element 需要绑定事件的元素 Dom Object
         * @param eventName 需要绑定的事件类型名称 string
         * @param fn 回调函数 function
         */
        addSeveralEvent: function (element, eventName, fn) {
            var oddEvent = element["on" + eventName];
            if (oddEvent == null) {
                element["on" + eventName] = fn;
            } else {
                element["on" + eventName] = function () {
                    oddEvent();
                    fn();
                }
            }
        },
        /**
         * 封装添加事件的方法
         * @param element 需要绑定事件的元素 Dom Object
         * @param eventName 需要绑定的事件类型名称 string
         * @param fn 回调函数 function
         */
        addEvent: function (element, eventName, fn) {
            if (element.addEventListener) {  // 谷歌和火狐
                element.addEventListener(eventName, fn, false);
            } else if (element.attachEvent) {  // IE8
                element.attachEvent("on" + eventName, fn);
            } else {  // 所有浏览器
                element["on" + eventName] = fn;
            }
        },
        /**
         * 移除事件的兼容方法
         * @param element 需要绑定事件的元素 Dom Object
         * @param eventName 需要绑定的事件类型名称 string
         * @param fn 回调函数 function
         */
        removeEvent: function (element, eventName, fn) {
            if (element.removeEventListener) { // 谷歌和火狐
                element.removeEventListener(eventName, fn, false);
            } else if (element.attachEvent) { // IE8
                element.attachEvent("on" + eventName, fn);
            } else {  // 所有浏览器
                element["on" + eventName] = null;
            }
        }
    };
})();

/**
 * OBJECT DOM元素工具类
 * @type {{replaceClassName, getInnerText, setInnerText, getNextElement, getPreviousElement, getFirstElement, getLastElement, my$}}
 */
MHQ.elementUtils = (function () {
    return {
        /**
         * 替换字符串，设置className属性
         * @param element 要替换class属性的元素
         * @param oldStr 替换前的类名
         * @param newStr 新的类名
         */
        replaceClassName: function (element, oldStr, newStr) {
            element.className = element.className.replace(oldStr, newStr);
        },

        /**
         * 获取DOM元素内部文本的兼容方法
         * @param element DOM元素
         * @returns {*}
         */
        getInnerText: function (element) {
            if (typeof element.innerText === "string") {
                return element.innerText;
            } else {
                return element.textContent;
            }
        },

        /**
         * 设置DOM元素内部文本的兼容方法
         * @param element DOM元素
         * @param content 要设置的内容
         */
        setInnerText: function (element, content) {
            if (typeof element.innerText === "string") {
                element.innerText = content;
            } else {
                element.textContent = content;
            }
        },

        /**
         * 封装了获取元素的下一个兄弟元素的方法
         * @param element DOM元素
         * @returns {*}
         */
        getNextElement: function (element) {
            if (element.nextElementSibling) {
                return element.nextElementSibling;
            } else {
                var next = element.nextSibling;
                while (next && next.nodeType !== 1) {
                    next = next.nextSibling;
                }
                return next;
            }
        },

        /**
         * 封装了获取元素的上一个兄弟元素的方法
         * @param element DOM元素
         * @returns {*}
         */
        getPreviousElement: function (element) {
            if (element.previousElementSibling) {
                return element.previousElementSibling;
            } else {
                var previous = element.previousSibling;
                while (previous && 1 !== next.nodeType) {
                    previous = previous.previousSibling;
                }
                return previous;
            }
        },

        /**
         * 封装寻找某个元素的第一个子元素的方法
         * @param element DOM元素
         * @returns {*}
         */
        getFirstElement: function (element) {
            // return element.children[0];  // 为了更严瑾用下面的方法
            if (element.firstElementChild) {
                return element.firstElementChild;
            } else {
                var first = element.firstChild;
                while (first && 1 !== first.nodeType) {
                    first = first.nextSibling;
                }
                return first;
            }
        },

        /**
         * 封装寻找某个元素的最后一个子元素的方法
         * @param element DOM元素
         * @returns {*}
         */
        getLastElement: function (element) {
            // return element.children[element.children.length-1];  // 为了更严瑾用下面的方法
            if (element.lastElementChild) {
                return element.lastElementChild;
            } else {
                var last = element.lastChild;
                if (last && 1 !== last.nodeType) {
                    last = last.previousSibling;
                }
                return last;
            }
        },

        /**
         * 封装了通过id获取元素的方法
         * @param id
         * @returns {Element}
         */
        my$: function (id) {
            return document.getElementById(id);
        }
    }
})();

/**
 * OBJECT 获取指定格式的日期
 * @type {{getDate, transDateFormat}}
 */
MHQ.getDateObj = (function () {
    return {
        /**
         * 获取指定格式的日期
         * @param date
         * @returns {string}
         */
        // 封装一个指定日期格式的获取日期的函数
        getDate: function (date) {
            // 获取年
            var year = date.getFullYear();
            // 获取月
            var mouth = date.getMonth() + 1;
            // 获取日
            var day = date.getDate();
            // 获取小时
            var hours = date.getHours();
            // 获取分钟
            var minute = date.getMinutes();
            // 获取秒
            var second = date.getSeconds();
            // 设置格式
            mouth = this.transDateFormat(mouth);
            day = this.transDateFormat(day);
            hours = this.transDateFormat(hours);
            minute = this.transDateFormat(minute);
            second = this.transDateFormat(second);
            return year + "年" + mouth + "月" + hours + "日" + " " + hours + ":" + minute + ":" + second;
        },
        /**
         * 日期显示格式化函数
         * @param val 时分秒数字 0~59
         * @returns {string}
         */
        transDateFormat: function (val) {
            return val < 10 ? "0" + val : val;
        }
    }
})();

/**
 * OBJECT 获取n个随机数 最终得到数组  object.getRandomArr 得到随机数的数组
 * 说明：因为要传递参数，所以不能用立即执行函数
 * @type {{getRandomArr}}
 */
MHQ.getRandomObj = (function () {
    var arr = [];
    return {
        /**
         * 获取n个随机数的方法 最终得到数组
         * @param count 需要得到的随机数组中随机数的个数
         * @param min 随机数的最小值
         * @param max 随机数的最大值
         * @returns {Array}
         */
        getRandomArr: function (count, min, max) {
            while (arr.length < count) {
                var num = MHQ.getRandom(min, max);
                if (arr.indexOf(num) === -1) {
                    arr.push(num);
                }
            }
            return arr;
        }
    }
})();

/**
 * METHOD js 特效中的动画函数封装
 * @param element 要添加动画的元素
 * @param json 需要产生动画的数据
 * @param fn 回调函数
 */
MHQ.animate = function (element, json, fn) {
    clearInterval(element.timeId);
    element.timeId = setInterval(function () {
        var flag = true;//假设都达到了目标
        for (var attr in json) {
            if (attr == "opacity") {//判断属性是不是opacity
                var current = getAttrValue(element, attr) * 100;
                //每次移动多少步
                var target = json[attr] * 100;//直接赋值给一个变量,后面的代码都不用改
                var step = (target - current) / 10;//(目标-当前)/10
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                current = current + step;
                element.style[attr] = current / 100;
            } else if (attr == "zIndex") {//判断属性是不是zIndex
                element.style[attr] = json[attr];
            } else {//普通的属性
                //获取当前的位置----getAttrValue(element,attr)获取的是字符串类型
                var current = parseInt(getAttrValue(element, attr)) || 0;
                //每次移动多少步
                var target = json[attr];//直接赋值给一个变量,后面的代码都不用改
                var step = (target - current) / 10;//(目标-当前)/10
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                current = current + step;
                element.style[attr] = current + "px";
            }
            if (current != target) {
                flag = false;//如果没到目标结果就为false
            }
        }
        if (flag) {//结果为true
            clearInterval(element.timeId);
            if (fn) {//如果用户传入了回调的函数
                fn(); //就直接的调用,
            }
        }
    }, 10);
};

/**
 * CLASS 接口类：2个参数
 * @param interfaceName 接口名称
 * @param methodsArr 接口抽象方法的方法名存放数组
 * @constructor MHQ.Interface
 */
MHQ.Interface = function (interfaceName, methodsArr) {
    // 判断参数传入的参数个数是否等于2
    if (arguments.length !== 2) {
        throw new Error("传入的接口参数个数不正确");
    }
    this.interfaceName = interfaceName;
    // 用一个空数组接收第二个参数数组
    this.methods = [];
    for (var i = 0; i < methodsArr.length; i++) {
        // 判断方法是否存在，方法名是否是"string"类型
        if (typeof methodsArr[i] !== "string") {
            throw new Error("接口方法名必须是string类型的");
        }
        this.methods.push(methodsArr[i]);
    }
};

/**
 * METHOD 获取随机的颜色数组
 * @param count 需要获取的颜色数目
 * @returns {Array}
 */
MHQ.getColor = function (count) {
    var colorSingle;
    var colorArr = [];
    var color = "#";
    for (var i = 0; i < count; i++) {
        for (var j = 0; j < 6; j++) {
            var colorRandom = MHQ.getRandom(16);
            switch (colorRandom) {
                case 10:
                    colorSingle = "A";
                    break;
                case 11:
                    colorSingle = "B";
                    break;
                case 12:
                    colorSingle = "C";
                    break;
                case 13:
                    colorSingle = "D";
                    break;
                case 14:
                    colorSingle = "E";
                    break;
                case 15:
                    colorSingle = "F";
                    break;
                default:
                    colorSingle = colorRandom;
            }
            color += colorSingle;
        }
        colorArr.push(color);
        color = "#";
    }
    return colorArr;
};

/**
 * METHOD EXTEND 继承（原型继承，仅仅继承原型中的属性和方法） + call()/apply只继承 混合继承
 * @param {Object} sub 子类构造函数
 * @param {Object} sup 父类构造函数
 */
MHQ.extend = function (sub, sup) {
    //目的：需要实现只继承父类的原型对象
    //1 需要创建一个空函数  目的： 中转
    var F = new Function();
    //2 实现空函数的原型对象和超类的原型对象转换
    F.prototype = sup.prototype;
    //3 原型继承
    sub.prototype = new F();
    //4 还原子类的构造器
    sub.prototype.constructor = sub;
    // 保存父类的原型对象 目的：一方面方便解耦； 另一方面可以轻松的获得父类的原型对象
    //5 自定义一个子类的静态属性  接收父类的原型对象
    sub.superClass = sup.prototype;
    //6 为防止父类的constructor属性的设置落下 在extend()方法中加保险
    if (sup.prototype.constructor == Object.prototype.constructor) {
        //手动的还原原型对象的构造器
        sup.prototype.constructor = sup;
    }
};

/**
 * METHOD 接口校验
 * @param instanceSets  实例的集合，传入多个参数：第一个实现类的实例，第二个，第三个...接口实例
 */
MHQ.Interface.verifyInterface = function (instanceSets) {
    // 判断传入的参数个数是否正确
    if (arguments.length < 2) {
        throw new Error("接口校验方法的构造器实参个数必须大于等于2");
    }
    // 判断传进来的参数的个数是否大于等于2，如果小于2，则抛出异常
    for (var i = 1; i < arguments.length; i++) {
        // 将接口实例保存到一个变量中
        var interfaceInstance = arguments[i];
        // 判断传过来的对象的构造器是否是Interface，不是则抛出异常
        if (interfaceInstance.constructor !== MHQ.Interface) {
            throw new Error("参数的构造器不是Interface对象");
        }
        // 检测方法
        for (var j = 0; j < interfaceInstance.methods.length; j++) {
            // 用一个参数来接收方法名称
            var methodName = interfaceInstance.methods[j];
            if (!InstanceSets[methodName] || typeof InstanceSets[methodName] !== "function") {
                throw new Error("方法：‘" + methodName + "‘不存在");
            }
        }
    }
};

/**
 * METHOD 获取属性的兼容方法
 * @param element 要获取属性的兼容方法
 * @param attr 要获取的属性
 * @returns {*|number}
 */
MHQ.getAttrValue = function (element, attr) {
    return element.currentStyle ? element.currentStyle[attr] : window.getComputedStyle(element, null)[attr];
};

/**
 * METHOD 得到诸如[{attr1:2,attr2:3}, {attr1:1,attr2:2}]数组中各对象的attr1属性中最大的一个（仅适用于对象的attr1属性排序）
 * @param arr [{attr1:2,attr2:3}, {attr1:1,attr2:2}]
 */
MHQ.getObjArrMax = function (arr) {
    Math.max.apply(null, arr.map(function (v) {
        return v.attr1;
    }));
};

/**
 * METHOD 获取一个随机整数 Math.random(); 中的参数可以是一个，考虑了参数是一个的情况
 * @param min 随机数的范围的下限
 * @param max 随机数的范围的上限
 * @returns {Number}
 */
MHQ.getRandom = function (min, max) {
    if (max === undefined) {
        max = min;
        min = 0;
    }
    return parseInt(Math.random() * (max - min) + min);
};

/**
 * METHOD 数组冒泡排序
 * @param arr 需要排序的数组
 * @returns {*}
 */
MHQ.sortArr = function (arr) {
    for (var i = 0; i < arr.length - 1; i++) {
        var flag = true;
        for (var j = 0; j < arr.length - 1 - i; j++) {
            if (arr[j] > arr[j + 1]) {
                var tempValue = arr[j + 1];
                arr[j + 1] = arr[j];
                arr[j] = tempValue;
                flag = false;
            }
        }
        if (flag) {
            break;
        }
    }
    return arr;
};