3

最近、クロスブラウザー イベント処理に関するチュートリアルを読みました...クロスブラウザー イベント処理...

チュートリアルのいくつかのプラクティスを、そのように浮かんでいる一般化された関数に適応させました...

function isHostMethod(object, property) {
    var type = typeof object[property];
    return type === "function" || (type === "object" && !! object[property]) || type === "unknown";
}

var events = {
    add: (function() {
        if (isHostMethod(this, 'addEventListener')) {
            return function(element, type, handler) {
                element.addEventListener(type, handler, false);
            };
        } else if (isHostMethod(this, 'attachEvent')) {
            return function(element, type, handler) {
                element.attachEvent('on' + type, function() {
                    handler.call(element, window.event);
                });
            };
        } else {
            return function(element, type, handler) {
                element['on' + type] = handler;
            };
        }
    }()),
    remove: (function() {
        if (isHostMethod(this, 'removeEventListener')) {
            return function(element, type, handler) {
                element.removeEventListener(type, handler, false);
            };
        } else if (isHostMethod(this, 'detachEvent')) {
            return function(element, type, handler) {
                element.detachEvent('on' + type, function() {
                    handler.call(element, window.event);
                });
            };
        } else {
            return function(element, type, handler) {
                element['on' + type] = null;
           };
       }
    }())
};

利用方法：

var img_wrap = document.getElementById('img_wrap'),
    img = img_wrap.getElementsByTagName('img'),
    img_amount = img.length;

function do_stuff() {
    //
    //do stuff - update preloaded percentage, etc. 
    //
    events.remove(this, 'load', do_stuff);
}

for (var i = 0; i < img_amount; i += 1) {
    events.add(img[i], 'load', do_stuff);
}

これが気になる…
1.「isHostMethod」機能は必要か？
2.チュートリアルでは、メモリリークについて警告し、「一意のID」を各要素への参照として使用してそれらを回避するための追加機能の概要を説明しています...これは含まれていません...多分私は何かを監督していますが、私はしません私の場合は必要だと思います...または心配する必要がありますか?

jsfiddle here の警告: 画像が大きい、ダウンロードに時間がかかる、帯域幅が大きいなど。

4

1 に答える 1

3

1.「isHostMethod」関数は必要ですか?

いいえ、 IE6、7、および 8 のサポートに固執しない限り、最新のブラウザーはすべて and を使用addEventListener()してremoveEventListener()います。

ですから、これは受け入れられないと思います。それが、人々が mootools や jQuery などのライブラリを使用する理由です。そして、彼らはあなたのためにそれを世話します。

2.チュートリアルでは、メモリリークについて警告し、各要素への参照として「一意のID」を使用してそれらを回避するための追加機能の概要を説明しています...これは含まれていません...多分私は何かを監督していますが、私はしません私の場合は必要だと思いますか、それともメモリリークを心配する必要がありますか?

依存です。Gmail、Stackoverflow、FB、G+、または Twitter を作成する場合、これらのサイトのページはほとんど更新されず、長期間存続するため、メモリ リークは非常に重要です。

しかし、単に Web ページを作成したい場合は、いくつかのイベントを添付すると、人々はリンクをクリックして次のページに移動します。先に進むとコンテキストが解放されるので、メモリリークが発生しても問題ありません（回避するように努めるべきだと思いますが、必須ではありません）。

また、メモリ リークを回避する方法に関する IBM のチュートリアルがあります (これは少し古くなっていますが、一部のパターンではメモリ リークが発生しなくなりました)。

実際には、非常に強力なツールである Chrome のインスペクターを使用して、いつでもメモリ使用量をプロファイリングできます。

于 2012-12-01T07:39:55.107 に答える