あどけない話

インターネットに関する技術的な話など

あなたはどれが好き?

イベントリスナーの実装の違いを吸収するために、よく以下のようなコードを書きます。

var setHandler = (function() {
    if (addEventListener) {
        return function(el, type, func) {
            el.addEventListener(type, func, false);
        };
    }
    if (attachEvent) {
        return function(el, type, func) {
            el.attachEvent('on' + type, function() {
                func.call(el, window.event);
            });
        };
    }
    return function(el, type, func) {
        el['on' + type] = func;
    };
})();

関数型言語に慣れていないと、こういう定義の仕方が気持ち悪いのだそうです。

もちろん、手続き型言語のように、以下のようにも書きます。

var setHandler = addEventListener ?
    function(el, type, func) {
       el.addEventListener(type, func, false);
    } :
    attachEvent ?
    function(el, type, func) {
      el.attachEvent('on' + type, function() {
          func.call(el, window.event);
      });
    } :
    function(el, type, func) {
        el['on' + type] = func;
    };

また、以下のようにも書けます。

var setHandler;
if (addEventListener) {
    setHandler = function(el, type, func) {
        el.addEventListener(type, func, false);
    };
} else if (attachEvent) {
    setHandler = function(el, type, func) {
        el.attachEvent('on' + type, function() {
            func.call(el, window.event);
        });
    };
} else {
    setHandler = function(el, type, func) {
        el['on' + type] = func;
    };
}

1番目よりも、2番目3番目の方が分りやすいとは決して言えないような気がします。という訳で、1番目が気持ち悪いと思う人は、早く慣れましょうというお話でした。

ところで、こういうコードは何と呼ぶのでしょう? Adaptor パターン? そんなに高尚なものではない?