跨平台兼容问题

首先举例常见的事件 注册 函数的跨浏览器解决方案：

 

function addEvt(el,eventName,fn){
    if (window.addEventListener) {
           el.addEventListener(eventName, fn, false);
    } else if(window.attachEvent) {
           el.attachEvent("on" + eventName, fn);
    } else {
            el["on"+eventName]=fn;
    }
}

 

这显然不是最优，若遇到 功能复杂的 类似情况 ，则函数内到处都散落着平台判断，十分影响主线思路，且程序 很多 执行时间都花费在了判断上面，不值得。

假设这个环境是java运行环境，可对应代码：

 

public static void addEvent(Node el, String eventName, Callback func) {
        if (addEventListener) {
            el.addEventListener(eventName, func, false);
        } else if (attachEvent) {
            el.attachEvent(eventName, func);
        } else {
            //el["on"+eventName]=func
        }
    }

 

那么按照面向对象的设计模式，分离变与不变的部分以及提取基类，可以重构为：

 

interface EventUtil {
    void addEvent(Node el, String eventName, Callback func);
}

class StandardEventUtil implements EventUtil {

    public void addEvent(Node el, String eventName, Callback func) {
        el.addEventListener(eventName, func, false);

    }
}

class IEEventUtil implements EventUtil {

    public void addEvent(Node el, String eventName, Callback func) {
        el.attachEvent(eventName, func);
    }
}

class FallBackEventUtil implements EventUtil {
    public void addEvent(Node el, String eventName, Callback func) {
        //el["on"+eventName]=func
    }
}

public static EventUtil getEventUtil() {
        if (eventUtil != null) return eventUtil;
        if (addEventListener) {
            return eventUtil = new StandardEventUtil();
        } else if (attachEvent) {
            return eventUtil = new IEEventUtil();
        } else {
            return eventUtil = new FallBackEventUtil();
        }

    }

 

将事件添加做为抽像的接口，各个平台实现对应的功能类，生成单例对象即可。

而以这个为思路，根据上述的单例场景，利用javascript内置的对象构造函数，以及函数随时可以重写的特性，可以优化为下面的代码：

 

var eventUtil = {
    addEvent: function(el, eventName, fn) {
        el.addEventListener(eventName, fn, false);
    }
};
if (window.addEventListener) {} else if (window.attachEvent) {
    eventUtil.addEvent = function(el, eventName, fn) {
        el.attachEvent("on" + eventName, fn);
    }
} else {
    eventUtil.addEvent = function(el, eventName, fn) {
        el["on" + eventName] = fn;
    }
}

 

进一步采用javascript的函数特性可修改为目前来说比较理想的代码：

 

var eventUtil = {
    addEvent: function() {
        if (window.addEventListener) {
            return function(el, eventName, fn) {
                el.addEventListener(eventName, fn, false);
            };
        } else if (window.attachEvent) {
            return function(el, eventName, fn) {
                el.attachEvent("on" + eventName, fn);
            };
        } else {
            return function(el, eventName, fn) {
                el["on" + eventName] = fn;
            };
        }
    }()
};

 

总结：

javascript可以说是 一门 同时具有面向对象以及函数特征的混合语言，所以如果合理利用目前成熟的面向对象设计，对于构造复杂的应用必能起到很大的帮助。