WTool,一个工具箱,除了常见的class,style,event操作外,还有两个组件分别是轮播图和自动表单,具体请看文档
- 很多时候会出现重复的代码,比如在addClass,remvoeClass,toggleClass的时候,每次的判断都是一样的,只是执行的语句不同,想到了eval,写了一个evalStr,传入类似
{
hasClass: '执行的语句',
noClass: '执行的语句,
...
}
来去除重复语句的操作
- 在想addEvent时,想考虑直接在addEvent中传入参数,最后还用到了apply和call的区别,实现如下
addEvent: function(event, listener, config) {
if (!event || !listener) return;
var that = this;
var len = that.length;
that['listener' + listener.name] = function(e) {
var e = that.getEvent(e);
if (config) {
config.push(e);
listener.apply(this, config);
} else {
listener.call(this, e);
}
}
if (len) {
while (len--) {
if (that[len].addEventListener) {
that[len].eventListener = that.listener;
that[len].addEventListener(event, that['listener' + listener.name]);
} else if (true) {
// pass
}
}
} else {
if (that.addEventListener) {
that.eventListener = that.listener;
that.addEventListener(event, that['listener' + listener.name]);
} else if (true) {
// pass
}
}
return that;
}
- 在写removeEvent时,如何取消考虑了半天,最后将传入的函数名称绑定到添加事件的WTool对象的方法上,取消时函数名取消对应的方法
- 写事件委托时想写成委托为targetSelector的形式,比如网页中有两个ul,其中li的类名为.li,那么w('ul').delegateEvent('.li',event,listener,config),就可以为两个ul中的.li做委托,并且,listener中的this还要为被委托的元素,最后是这样做的
delegateEvent: function(targetSelector, event, listener, config) {
if (!targetSelector || !event || !listener) return;
var len = this.length;
this['deleListener' + listener.name] = function(e) {
var tool = new WTool();
var e = tool.getEvent(e);
if (w(this).w(targetSelector)) {
if (this['deleListener' + listener.name]) return;
w(this).w(targetSelector).addEvent(event, listener, config);
// bug,只能添加一次事件
var createEvent = new Event(event);
e.target.dispatchEvent(createEvent);
this['deleListener' + listener.name] = listener;
}
}
this.addEvent(event, this['deleListener' + listener.name]);
}
这样只能委托一次事件,第二次时dispatch的event会造成之前添加的listener再次被运行
