Util工具类

通常我们将常用的、多次调用的方法写入一个工具类中调用,以便我们开发。一般的有对于事件的各种方法、增删类名、一些正则判断、常用的ajax操作、序列化参数、写入以及获取cookie等等。

这里参考了 underscore 工具类的方式,创建一个全局变量 ‘_’,方法如图所示:

image.png

方法:

sleep

_.sleep = function(wait) {
    var now = new Date
    while (new Date - now <= ms)
}

通过 while 循环判断当前时间是否小于间隔时间实现时间延迟,但是这种方式会中断 CPU 执行

addEvent

// 事件绑定兼容性写法
_.addEvent = function(element, eventName, fn) {
    document.addEventListener ? element.addEventListener(eventName, fn) : 
    element.attachEvent('on' + eventName, fn);
};

这里兼容了IE的attachEvent方法

delegateEvent

// 事件代理
_.delegateEvent = function(element, tag, eventName, fn) {
    _.addEvent(element, eventName,  function() {
        var event = arguments[0] || window.event,
        target = event.target || event.srcElement;
        if (target && target.tagName === tag.toUpperCase()) {
            fn.call(target, event);    // 将fn内部的event指向target
        }
    });
};

这里兼容了IE的获取事件对象和获取事件的目标元素,更多关于事件的处理可以参考另一个事件的工具类。

addClassName

// 添加类名
_.addClassName = function(node, className) {
    var current = node.className || "";
    if ((" " + current + " ").indexOf(" " + className + " ") === -1) {
        node.className = current ? (current + " " + className) : className;
    }
};

增删类名以及判断是否有相同有相同的类名比较简单,不在累赘

html2node

// html转node节点
_.html2node = function(str) {
    var container = document.createElement('div');
    container.innerHTML = str;
    return container.children[0];
};

为了方便操作,这里我们将需要渲染的html结果转成node节点操作

extend

// 属性赋值
_.extend = function(o1, o2) {
    for (var i in o2) if (typeof o1[i] === 'undefined') {
        o1[i] = o2[i];
    }
    return o1;
};

属性赋值是将o2对象的属性赋值到o1,然后返回两个对象汇总的属性

ajax

_.ajax = function(obj) {
    var xhr = (function() {
        if (window.XMLHttpRequest) {
            return new XMLHttpRequest();
        } else {
            return new ActiveXobject('Microft.XMLHttp');
        }
    })(), data;

    if (obj.method.toUpperCase() === 'GET') {
        obj.url += obj.data ? ('?' + _.serialize(obj.data)) : '';
    }

    if (obj.method.toUpperCase() === 'POST' || obj.method.toUpperCase() === 'PATCH') {
        data = obj.data ? JSON.stringify(obj.data) : null;
        console.log(obj.data, obj.url, obj.method)
    }

    xhr.open(obj.method, obj.url, true);

    // 请求头 设置需要放在open方法后面执行,否则会报错
    xhr.setRequestHeader('Content-Type', 'application/json');

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
                obj.success(xhr.responseText);
            } else {
                obj.fail(xhr);
                console.log('The error is:' + xhr.status + ' and msg is :' + xhr.statusText);
            }
        }
    };
    xhr.send(data);
};

调用的时候

_.ajax({
    url: '/api/xxx',
    method: 'POST',
    data: data,
    success: function(data) {
        data = JSON.parse(data);
        if (data.code === 200) {
           xxx
        } else {
           xxx
        }
    }.bind(this),
    fail: function() {}
});

这里是模仿jQuery的ajax操作,传入一个对象,字段可以自己加,但是上面那些字段不能少;首先常用的get方法和post方法,默认是异步,这里为了方便请求头类型直接设置为’application/json’,而且请求头需要放在open方法后面执行。

setCookie

// 写入cookie
_.setCookie = function(name, value, expires, path, domain, secure) {
    var cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);
    if (expires instanceof Date) cookie += '; expires=' + expires.toGMTString();
    if (path) cookie += '; path=' + path;
    if (domain) cookie += '; domain=' + domain;
    if (secure) cookie += '; secure=' + secure;
    document.cookie = cookie;
};

写入cookie的时候需要encode数据

getCookie

// 获取cookie
_.getCookie = function(name) {
    var cookieName = encodeURIComponent(name) + "=",
    start = document.cookie.indexOf(cookieName),
    cookieValue = null;
    if (start > -1) {
        var end = document.cookie.indexOf(";", start);
        if (end === -1) end = document.cookie.length;
        cookieValue = decodeURIComponent(document.cookie.substring(start + 
                      cookieName.length, end));
    }
    return cookieValue;
};

这里只通过cookie名获取cookie的值,如果值存在则可以判断用户是否登录(这里只是用户登录用到了cookie,其他操作自行添加)

结束

util工具类大概就这么多比较通用的内容,后续有其他的内容可以再添加进来即可,也可以很方便的移植到别的项目中,事件发射器 单独写了一个issue,所以这里不再重复。