3

最近、JavaScript コードでメモリ リークを探していました。いくつかの重大なリークを見つけた後、マイナーなものを探し始め、潜在的なリークの可能性があるものを見つけました - 「hoverIntent.js」プラグイン。これは本当にリークなのか、それとも私が少し熱心すぎるのでしょうか?

コードの一般的なスキーマ (完全なコードはこちらhttp://cherne.net/brian/resources/jquery.hoverIntent.js ):

(function($) {
    $.fn.hoverIntent = function(f,g) {

    //...


    var track = function(ev) {
        cX = ev.pageX;
        cY = ev.pageY;
    };

    var compare = function(ev,ob) {
        //... function body
    };


    var delay = function(ev,ob) {
       //... function body
    };


    var handleHover = function(e) {
      //... function body
    };


    return this.bind('mouseenter',handleHover).bind('mouseleave',handleHover);
    };
})(jQuery);

多くの js プラグインがそのように記述されていることは知っていますが、オブジェクトを呼び出すたびにそれを正しく取得するとhoverIntent、3 つの新しい関数 (クロージャー) が作成されますか? メモリ リーク (または少なくともパフォーマンスの問題) の可能性はありませんか?

次のように書いたほうがよいのではないでしょうか。

(function($) {

  //create the methods only once on module init?

    var track = function(ev) {
        cX = ev.pageX;
        cY = ev.pageY;
    };

    var compare = function(ev,ob) {
        //... function body
    };


    var delay = function(ev,ob) {
       //... function body
    };


    var handleHover = function(e) {
      //... function body
    };


    $.fn.hoverIntent = function(f,g) {
            //no closures here
    return this.bind('mouseenter',handleHover).bind('mouseleave',handleHover);

    };
})(jQuery);
4

1 に答える 1

2

正解です。2番目の例では、クロージャ関数が少ないため、使用するメモリが少なくなります。ただし、イベントを呼び出すことができなくなると（要素が削除されるなど）、イベントは再び消えるので、メモリが永久に失われることはないため、「リーク」にはなりません。

また、多くのプラグインは、要素自体ではなく、変数内の要素の現在の状態を設定することによってクロージャーを使用します。

于 2013-01-28T09:06:05.150 に答える