自定义js常用基础库

2019-07-172215次阅读javascript

自定义的js常用基础库:包括添加事件、删除事件、event事件对象兼容、Target兼容、阻止默认事件、阻止冒泡、添加类名、移除类名、是否包含类名、获取类名元素集、获取下一个元素节点、类似数组转数组、forEach方法。

const query = {

    //  添加事件
    add: function () {

        var isEvent = 'addEventListener' in document;

        return isEvent ? function (ele:any, type:string, handler:(event:any) => void) {

            ele.addEventListener(type, handler, false);

        } : function (ele:any, type:string, handler:(event:any) => void) {

            ele.attachEvent('on' + type, handler);

        };

    }(),

    // 移除事件
    remove: function (ele, type, handler) {

        var isEvent = 'addEventListener' in document;

        return isEvent ? function (ele, type, handler) {

            ele.removeEventListener(type, handler, false);

        } : function (ele, type, handler) {

            ele.detachEvent('on' + type, handler);

        };
    }(),

    getEvent: function (event) {

        return event || window.event;

    },

    getTarget: function (event) {

        var e = query.getEvent(event);

        return e.target || e.srcElement;

    },

    preventDefault: function (event) {

        var e = query.getEvent(event);

        if (e.preventDefault) {

            e.preventDefault();

        } else {

            e.returnValue = false;

        }
    },

    stopPropagation: function (event) {

        var e = query.getEvent(event);

        if (e.stopPropagation) {

            e.stopPropagation();

        } else {

            e.cancelBubble = true;

        }

    },

    addClass: function (node, classname) {

        if (node.classList) {

            node.classList.add(classname);

        } else {

            if (node.className.indexOf(classname) == -1) node.className += ' ' + classname;

        }
    },

    removeClass: function (node, classname) {

        if (node.classList) {

            node.classList.remove(classname);

        } else {

            var reg = eval("/\\s*" + classname + "/ig");

            node.className = node.className.replace(reg, '');

        }
    },
    hasClass : function(ele,className){
        if(ele.classList){
            return ele.classList.contains(className);
        }
        return new RegExp('\\b'+className+'\\b','i').test( ele.className );
    },
    getByClass: function (Classname, ele?) {

        var ele = ele || document;

        return ele.querySelectorAll ? ele.querySelectorAll('.' + Classname) : (function (ele) {

            var ele = ele.getElementsByTagName('*'),

                Result = [],

                re = new RegExp('\\b' + Classname + '\\b', 'i'),

                i = 0;

            for (; i < ele.length; i++) {

                if (re.test(ele[i].className)) {

                    Result.push(ele[i]);

                }
            }

            return Result;

        }(ele));

    },
    getNextNode(ele){

        if(ele.nextElementSibling) return ele.nextElementSibling;

        var e = ele.nextSibling;
        while(e && 1 !== e.nodeType)
            e = e.nextSibling;
        return e;
    },
    toArray: function (arr) {


        var reduced = [];

        try {

            reduced = Array.prototype.slice.call(arr, 0);

        } catch (ex) {

            for (var i = 0, len = arr.length; i < len; i++) {

                reduced[i] = arr[i];

            }
        }

        return reduced;
    },
    forEach: function (ary, callback) {
       
        if (typeof ary.forEach == "function") {

            ary.forEach(function (value, index, a) {

                callback.call(ary, value, index, a);

            });

        } else {// 对于古董浏览器,如IE6-IE8
            for (var k = 0, length = ary.length; k < length; k++) {

                callback.call(ary, ary[k], k, ary);

            }
        }

    }
};


export default query;

还有优化的地方,代码仅供参考。

上一篇: js正则表达式验证是否是中文字  下一篇: CSS技巧实现多行文本显示省略号  

自定义js常用基础库相关文章