记录写WTool时遇到的问题

WTool,一个工具箱,除了常见的class,style,event操作外,还有两个组件分别是轮播图和自动表单,具体请看文档

1. 很多时候会出现重复的代码,比如在addClass,remvoeClass,toggleClass的时候,每次的判断都是一样的,只是执行的语句不同,想到了eval,写了一个evalStr,传入类似

 {
    hasClass: '执行的语句',
    noClass: '执行的语句,
    ...
}

来去除重复语句的操作

2. 在想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;
        }

3. 在写removeEvent时,如何取消考虑了半天,最后将传入的函数名称绑定到添加事件的WTool对象的方法上,取消时函数名取消对应的方法
4. 写事件委托时想写成委托为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再次被运行