[EGO]Utils工具类方法集合
本文最后更新于
2018-02-25, 文中内容可能已过时,请注意甄别~
Util工具类⌗
通常我们将常用的、多次调用的方法写入一个工具类中调用,以便我们开发。一般的有对于事件的各种方法、增删类名、一些正则判断、常用的ajax操作、序列化参数、写入以及获取cookie等等。
这里参考了 underscore 工具类的方式,创建一个全局变量 ‘_’,方法如图所示:
方法:⌗
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,所以这里不再重复。
Read other posts