jQuery：フィールド/メソッドをjQueryラッパーオブジェクトに添付することは可能ですか？

Question

jQueryラッパーオブジェクトにいくつかのメソッドを追加するプラグインを作成しようとしています。

var smart = $('img:first').smartImage(); 

「smartImage」プラグイン「スマート」が参照するオブジェクトに2つの方法を添付しますので、私のような何かを行うことができます：：

smart.saveState(); 
// do work 
smart.loadState(); 

基本的に、私はこのようにそれを初期化したいです

残念ながら、これらの2つのメソッドをラッパーオブジェクトにアタッチする方法を理解できません。私が持っているコードは、典型的なjQueryプラグインのパターンに従います。

(function($) 
{ 
    $.fn.smartImage = function() 
    { 
     return this.each(function() 
     { 
      $(this).saveState = function() { /* save */ } 
      $(this).loadState = function() { /* load */ } 
     } 
    } 
} 

私は、どちらも「ステートセーブ」や「にloadStateが」が定義されてsmartImage（）を呼び出した後。私は間違って何をしていますか？

Answer 1

あなたが言ったように、jQueryオブジェクトはそれに含まれるDOM要素の周りのラッパーに過ぎないので、メソッド/プロパティーをデモすることはできません。確かにそれにメソッドやプロパティをアタッチすることはできますが、jQueryによって再び選択されたときは永続化されません。

var a = $('.my-object'); 
a.do_something = function(){ alert('hiya'); } 
a.do_something(); // This alerts. 

var b = $('.my-object'); 
b.do_something(); // Freak-out. 

あなたはそれをもう一度回復するときの方法は、jQueryオブジェクトに存在する場合、それはjQuery.fnに割り当てる必要があります。だから、は、あなたの第二の方法を定義jQuery.fnに割り当て、そしてあなたのための状態を維持するためにjQueryのデータ・セットアップを使用することができます...

$.fn.setup_something = function() 
{ 
    this.data('my-plugin-setup-check', true); 
    return this; 
} 

$.fn.do_something = function() 
{ 
    if (this.data('my-plugin-setup-check')) 
    { 
     alert('Tada!'); 
    } 
    return this; 
} 

var a = $('.my-object').setup_something(); 
a.do_something(); // Alerts. 
$('.my-object').do_something(); // Also alerts. 

私はあなたがhttp://docs.jquery.com/Internals/jQuery.dataを見て、http://docs.jquery.com/Core/data#name

Answer 2

実際には、smartImage（）関数でjQueryオブジェクトを返しています。これは、jQueryプラグインを記述する正しい方法です。そのため、他のjQuery関数と連鎖させることができます。

あなたがしたいことをする方法があるかどうかわかりません。次のことをお勧めします。

(function($) { 
    var smartImageSave = function() { return this.each(function() { }); }; 
    var smartImageLoad = function() { return this.each(function() { }); }; 

    $.fn.extend({ "smartImageSave":smartImageSave, 
        "smartImageLoad":smartImageLoad }); 
}); 

var $smart = $("img:first"); 
$smart.smartImageSave(); 
$smart.smartImageLoad(); 

これは私がよく知っていて、うまく使用した1つのテクニックです。

Answer 3

あなたはこのようにプラグインを設計している理由は、私は全くわからない - あなたはjonstjohnの提案の線に沿って何かを検討する必要があります - しかし、次はあなたが求めているもののようになります。

jQuery.fn.extend({ 
    smartImage: function() { 
     return { 
      saveState: function() { /* save */ }, 
      loadState: function() { /* load */ } 
     }; 
    } 
});