javaScript常用工具库

时间：2023-03-09 00:46:14
javaScript常用工具库

对应于百度前端技术学院2015年春季的课程2相关内容

https://github.com/baidu-ife/ife/tree/master/2015_spring/task/task0002

http://sso.portal.unicom.local/eip_sso/ssoLogin.html?appid=np000&success=http%3A%2F%2Fwww.portal.unicom.local%2Fuser%2Ftoken&error=http%3A%2F%2Fwww.portal.unicom.local%2Fuser%2Ferror&return=http%3A%2F%2Fwww.portal.unicom.local%2F

一、类型判断工具库

//判断arr是否是一个数组，返回bool值
function isArray(arr){
    return Object.prototype.toString.call(arr)==='[object Array]';
}

//判断fn是否是一个函数
function isFunction(fn){
    return Object.prototype.toString.call(fn)==='[object Function]';
}

//判断一个值是否为假值
//js中有大量的假值，包括
//1:0
//2:Nan
//3:''(空字符串)
//4:false
//5:null
//6:undefined
function isFalse(a){
    if(!a){
        return true;
    }
}

//判断是否是邮箱地址
function isEmail(a) {
    ,})+$/;
    return reg.test(a);
}

//判断是否是电话号码
function isPhoneNumber(a){
    \d{}$/;
    return reg.test(a);
}

类型判断工具库

二、dom相关工具库（轻量级jquery）  

1.类和事件的相关操作

//判断元素是否包含某个类
function hasClass(element, className) {
    var oldClass = element.className;
    if (!oldClass) {
        return false;
    }
    var oldClassArr = oldClass.split(/\s+/);
    , len = oldClass.length; i < len; i++) {
        if (oldClassArr[i] === className) {
            return true;
        }
    }
    return false;
}

//为元素增添一个新样式类
function addClass(element, newClassName) {
    if (hasClass(newClassName)) {
        return;
    }

    element.className = element.className ? [element.className, newClassName].join(' ') : newClassName;
}

//移除元素element中的样式oldClassName
function removeClass(element, oldClassName) {
    if (!hasClass(element, oldClassName)) {
        return;
    }
    var oldClassArr = element.className.split(/\s+/);
    ; i >= ; i--) {
        if (oldClassArr[i] === oldClassName) {
            oldClassArr.splice(i, );
            break;
        }
    };
    element.className = oldClassArr.join(' ');
}

//判断siblingNode和element是否为同一个父元素下的同一级的元素，返回bool值
function isSiblingNode(elem, siblingNode) {
    return elem.parentNode === siblingNode.parentNode;
}

//实现一个简单的jquery,可以实现$('#adom'),$(a),$('.aclass'),$('[data-log]'),$('[data-time=2015]'),$('#adom .classA')
function $(selector) {
    var regExps = {
        id: /^#([\w_\-]+)/,
        className: /^\.([\w_\-]+)/,
        tag: /^\w+$/,
        attribute: /(\w+)?\[([^=\]]+)(?:=(["'])?([^\]"']+)\3?)?\]/
    };
    var queryActions = {
        id: function(id) {
            return document.getElementById(id);
        },
        tag: function(tag) {
            return document.getElementsByTagName(tag);
        },
        className: function(className) {
            var elems = document.getElementsByTagName('*');
            var result = [];
            , len = elems.length; i < len; i++) {
                if (hasClass(elems[i], className)) {
                    result.push(elems[i]);
                }
            }
            return result;
        },
        attribute: function(tag, key, value) {
            var elems = document.getElementsByTagName(tag || '*');
            var result = [];
            , len = elems.length; i < len; i++) {
                if (elems[i].getAttribute(key)) {
                    if (!value) {
                        result.push(elems[i]);
                    } else if (elems[i].getAttribute(key).toLowerCase() === value.toLowerCase()) {
                        result.push(elems[i]);
                    }
                }
            }
            return result;
        }

    };
    //准备函数以及对应的参数
    function direct(part, actions) {
        var fn, result;
        var params = [];
        if (result = part.match(regExps['id'])) {
            fn = 'id';
            ]);
        }
        if (result = part.match(regExps['tag'])) {
            fn = 'tag',
                ]);
        }
        if (result = part.match(regExps['className'])) {
            fn = 'className',
                ]);
        }
        if (result = part.match(regExps['attribute'])) {
            fn = 'attribute',
                ], result[], result[]);
        }
        ]) {
            ]);
        }
        var elemResult = actions[fn].apply(null, params);
        return elemResult;
    }

    var parentActions = {
        id: function(idText, parentNode) {
            if (parentNode.getAttribute('id') === idText) {
                return true;
            } else {
                return false;
            }
        },
        className: function(classText, parentNode) {
            if (hasClass(parentNode, classText)) {
                return true;
            } else {
                return false;
            }
        },
        tag: function(tagText, parentNode) {
            if (parentNode.nodeName.toLowerCase() === tagText.toLowerCase()) {
                return true;
            } else {
                return false;
            }
        },
        attribute: function(tag, key, value, parentNode) {
            if (tag) {
                if (parentNode.nodeName.toLowerCase() !== tag.toLowerCase()) {
                    return false;
                }
            }
            if (parent.getAttribute(key)) {
                if (!value) {
                    return true;
                }
                if (parent.getAttribute(key) === value) {
                    return true;
                }
            }
            return false;
        }

    };

    function filterParents(parts, queryArr) {
        var result = [];
        var pText = parts.pop();
        //首先检验当前第一个父元素文本
        ; i >= ; i--) {
            var curPNode = queryArr[i].parentNode;
            while (curPNode) {
                if (direct(pText, parentActions, curPNode) === true) {
                    //说明该层匹配成功
                    result.push(queryArr[i]);
                    break;
                }
                curPNode = curPNode.parentNode;
            }

        };
        ] && parts[] ? filterParents(parts, result) : result;
    }

    //console.log(selector);
    var parts = selector.split(/\s+/);
    //对于非组合的情况应该可以找到
    var selectorLast = parts.pop();
    //根据最后一个元素查找,如果是id查找，那么得到一个元素，其他得到类数组对象
    var queryResult = direct(selectorLast, queryActions);
    //console.log(queryResult);
    //下面这句话，如果是类数组对象，那么转换为一个数组，否则得到的是空数组
    //根据id查询的结果,[].slice.call返回的结果是[];为了统一，令其返回长度为1的数组
    var queryArr = [];
    if (queryResult.length) {
        queryArr = [].slice.call(queryResult);
    } else {
        queryArr.push(queryResult);
    }
    //如果根据id查找的，或者查找结果为空，那么直接返回；否则递归过滤父节点（这里默认了不会出现a #test类似的组合）

    ] && parts[] ? filterParents(parts, queryArr) : queryArr;
}

$.event = {
    //定义这个数组的作用在于，除了删除指定type上绑定的特定listener事件之外，还可以删除指定type上绑定的所有事件
    listeners: []
};

//为元素element绑定event事件的处理函数listener
//1.DOM0级（IE8之前)，采用onClick=listener的方式,这种方法的缺点是不能为一个事件绑定多个处理函数
//2.DOM2级别：addEventListener,其作用域是所属元素的作用域
//3.IE:attachEvent，其作用域是全局作用域
$.event.addEvent = function(element, type, listener) {
    type = type.replace(/^on/i, '').toLowerCase();
    //将作用域this都限制到元素的作用域
    var lis = $.event.listeners;
    var realListener = function(e) {
        listener.call(element, e);
    }
    if (element.addEventListener) {
        element.addEventListener(type, realListener, false);
    } else if (element.attachEvent) {
        element.attachEvent('on' + type, realListener);
    } else {
        element['on' + type] = realListener;
    }
    $.event.listeners.push([element, type, listener, realListener]);
    //返回元素，便于链式操作
    return element;
};

$.event.removeEvent = function(element, type, listener) {
    type = type.replace(/^on/i, '').toLowerCase();
    //var isRemoveAll=listener?false:true;
    var isRemoveAll = !listener;
    var lis = $.event.listeners;
    , len = $.event.listeners.length; i < len; i++) {
        var curLis = lis[i];
        ] === element && curLis[] === type && (isRemoveAll || curLis[] === listener)) {
            if (element.removeEventListener) {
                element.removeEventListener(type, curLis[], false);
            } else if (element.detachEvent) {
                element.detachEvent(]);
            } else {
                element['on' + type] = null;
            }
            lis.splice(i, );
        }
    }
    return element;
};

//完成click事件的绑定
$.event.addClickEvent = function(element, listener) {
    $.event.addEvent(element, 'click', listener);
};

//实现当用户按下enter按键时候的绑定
$.event.addEnterEvent = function(element, listener) {
    $.event.addEvent(element, 'keypress', function(e) {
        //IE中event位于全局对象中
        var event = e || window.event;
        var keyCode = event.charCode || event.keyCode;
        ) {
            listener.call(element, event);
        }

    });
};

//实现事件代理功能
//根据冒泡原理，为父元素绑定监听事件
$.event.delegateEvent = function(element, tag, type, listener) {
    $.event.addEvent(element, type, function(e) {
        var event = e || window.event;
        var target = event.target || event.srcElement;
        if (target && target.tagName.toLowerCase() === tag.toLowerCase()) {
            listener.call(target, event);
        }
    });
};

//进行进一步的封装
$.on = function(selectorText, type, listener) {
    $.], type, listener);
};

$.un = function(selectorText, type, listener) {
    $.], type, listener);
};
$.click = function(selectorText, listener) {
    $.], listener);
};
$.delegate = function(selectorText, tag, type, listener) {
    $.], tag, type, listener);
};

//如果需要更改dom结构
//javascript原生的方法有appendChild(),insertBefore(),replaceChild()

domUtil.js

2.dom节点操作类库

//原生js的DOM操作功能有限,主要包括以下
//1.每个节点都有parentNode属性，childNodes属性(包含各种类型的节点，不仅限于element类型)
//2.通过每个节点的previousSibling和nextSibling属性，访问相邻节点(不限于element)
//3.firstChild和lastChild属性分别指向其childNodes列表中的第一个和最后一个节点
//4.还有一个children属性，只包含element子节点
//5.操作节点的方法包括appendChild(),removeChild(),cloneNode()(复制节点并不能复制节点上的时间)，replaceChild(),insertBefore()
//以下方法是对原生js中节点操作方法的扩展

/**
* 删除elem这个节点本身
*/
function remove(elem){
    if(elem.parentNode){
        elem.parentNode.removeChild(elem);
    }
}

/**
* 在targetElement元素之后添加元素newElement
*/
function insertAfter(newElem,targetElem){
    var parent=targetElem.parentNode;
    if(parent.targetElem===targetElem){
        parent.appendChild(newElem);
    }else{
        parent.insertBefore(newElem,targetElem.nextSibling)
    }

}

js中DOM操作相关方法

四、ajax工具库

五、相关格式化工具

5.1字符串自定义格式化工具，使用方法可以参照test函数

/**
 * 对字符串进行格式化
 *
 * @param {String} source 待替换的目标字符串
 * @param {Object|String ...} opts提供替换数据的对象或者多个字符串
 * @remark opts参数为"object"时，替换目标字符串中的#{property name}部分
 * opts为'String ...'时，替换目标字符串中的#{0},#{1}...部分
 *
 */
function stringFormat(source, opts) {
    );
    if (data.length) {
        //opts对象，字符串数组，一个字符串或者多个字符串
        data = (data.length !==  ? data : (opts !== null && (/\[object Array\]|\[object Object\]/.test(Object.prototype.toString.call(opts))) ? opts : data));
        return source.replace(/#\{(.+?)\}/g, function(match, key) {
            var replacer = data[key];
            if ('[object Function]' === Object.prototype.toString.call(replacer)) {
                replacer = replacer(key);
            }
            return 'undefined' === typeof replacer ? '' : replacer;
        });
    }
    return source;
}

(function test() {
    console.log(stringFormat('我的名字是#{name},年龄是#{age}', {
        'name': 'bobo',
        '
    }));
    console.log(stringFormat('));
     console.log(stringFormat('我的名字是#{0}', 'bobo'));
    console.log(stringFormat(']));
})();

字符串格式化工具

5.2日期格式化工具，类似于java中的日期格式化工具

六、和类相关的工具类

//判断元素是否包含某个类
function hasClass(element, className,tagName) {
    var oldClass = element.className;
    if (!oldClass) {
        return false;
    }
    var oldClassArr = oldClass.split(/\s+/);
    , len = oldClass.length; i < len; i++) {
        if (oldClassArr[i] === className) {
            return true;
        }
    }
    return false;
}

//为元素增添一个新样式类
function addClass(element, newClassName) {
    if (hasClass(newClassName)) {
        return;
    }

    element.className = element.className ? [element.className, newClassName].join(' ') : newClassName;
}

//根据类名进行查找
function getElementByClassName(oElem, className) {
    var result = [];
    var condiArr = oElem.getElementsByTagName('*');
    var reg = new RegExp('\\s+' + className + '\\s+');
    ; i < condiArr.length; i++) {
        if (reg.test(' ' + condiArr[i].className + ' ')) {
            result.push(condiArr[i]);
        }
    }
    return result;
}

类操作工具类

相关文章