javascriptオブジェクトを 'data-'を介して要素に貼り付けるか、要素に直接貼り付けますか？

Question

私はJavaScriptの中でOOPをかなり深く掘り下げてきました。そして、ああ、混乱するところです。しかし、私はトンネルの終わりに光を見ることができるようになったので、自分のコードでより簡潔になることを学んだことに疑問を持ち始めています。私はこのプラグインは、私の「実験場」だから、

;(function($, window, document, undefined) { 
    "use strict"; 

    $.fn.myPlugin = function(opts) { 

     var options = $.extend({}, { color : 'blue', normal : 'black' }, opts); 

     return this.each(function(id, elem) { 

      if (!elem.parent) // Base parent object 
       elem.parent = Object.create({ 
        settings : options, 
        show  : function (that) { $(that).css("color", this.settings.color); }, 
        noShow : function (that) { $(that).css("color", this.settings.normal); }, 
        log  : function (that) { console.log(that ? that : this); } 
       }); 

      $(elem).children('span').each(function(idx, elmx) { 

       if (!elmx.child) // Child obj w/ delegation from parent 
        elmx.child = Object.create(elem.parent); 

       $(elmx).hover(
        function() { 
         elmx.child.log(); 
         elmx.child.show(elmx); 
        }, function() { 
         elmx.child.noShow(elmx); 
        }); 
      }); 
     }); 
    }; 
}(jQuery, window, document)); 

私が見てきたものすべての作品、linkが、私は反するような方法ですべての私のオブジェクトを添付していますほとんどの人が仕事で両方を行うこのとして動作していますオンライン。私がオブジェクトをelem.parent.OBJECTとelmx.child.OBJECTに添付しているところでは、ほとんどの人は$.data(elem, 'parent', OBJECT)と$.data(elmx, 'child', OBJECT)です。私のアプローチがより簡潔で、ネームスペースを乱雑にしていないと感じています。私がそれを持っているやり方でやってはいけない理由はありますか？

この2つのオブジェクトアプローチに疑問を持っている人にとって、このプラグインは、私にとってはプロトタイプの継承がどのように機能するかを見るためだけに存在することに注意したいと思います。

Answer 1

代わりに$.dataを使用する理由は、メモリリークを回避し、要素を混乱させないためです。

jQueryの$.dataは、そのデータを格納するために内部マップを使用し、それにアクセスするすべての要素に与えられた番号だけなので、要素には直接関係しません。要素が削除されたときなどはガベージコレクションを妨げません。あなたが$.data(elmx, 'child', OBJECT)を使用する場合、それは1を持っていない場合。

は以下の通り

• 要素が一意の番号を取得起こる、jQueryがありません。
  elmx[ jQuery.expando ] = id = ++jQuery.uuid
jQuery.expandoは、地図全体の競合を避けるために、組み込みのランダムキーです。

• データは
  id = elem[ jQuery.expando ]

• データとデータ要素からリードバックさ
  jQuery.cache[id]['child'] = OBJECT

• jQuery.cacheは、要素固有番号が検索されるという名前の特別なオブジェクトに格納され要素からではなくjQuery.cache[id]から読み取られます。

これは、DOM要素がJavaScriptオブジェクトを直接参照しないことを目的としています。
Instadのすべてのデータは、数値をキーとしてオブジェクトに格納されるため、メモリリークや意図しない要素プロパティの設定に対して安全ではありません。