クロスプラットフォーム互換問題

まず、一般的なイベント登録関数のブラウザ別ソリューションを例に挙げます.
 

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はオブジェクトと関数に向かっての特徴を同時に持つ混合言語と言えるので、現在の成熟したオブジェクト指向の設計を合理的に利用すれば、複雑な構造の応用に大きな助けが必要です.