jQuery: Czy można dołączyć pola/metody do obiektu opakowania jQuery?

Question

Próbuję napisać wtyczkę, która doda kilka metod do obiektu opakowania jQuery. Zasadniczo, chcę go zainicjować tak:

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

wtyczki „” SmartImage byłoby dołączyć 2 metody do obiektu wskazywanego przez „inteligentnych”, więc będę w stanie zrobić coś takiego:

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

Niestety, nie mogę wymyślić, jak dołączyć te 2 metody do obiektu opakowania. Kod mam następujący typowy wzór jQuery plugin:

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

Po Wzywam SmartImage(), ani 'SaveState' ani 'LoadState' jest zdefiniowane. Co ja robię źle?

Answer 1

Nie można dołączać metod/właściwości w sposób, jaki zademonstrowałeś, ponieważ, jak powiedziałeś, obiekt jQuery jest tylko opakowaniem wokół elementów DOM, które zawiera. Możesz na pewno dołączyć do niego metody/właściwości, ale nie będą one trwałe, gdy zostaną wybrane ponownie przez 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. 

Jeśli chcesz metoda istnieć na obiekt jQuery po odzyskaniu go po raz drugi, to musi być przypisany do jQuery.fn. Więc można określić metodę wtórnej, przypisać go do jQuery.fn i użyć konfiguracji danych jQuery, aby utrzymać stan dla Ciebie ...

$.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. 

Proponuję spojrzeć na http://docs.jquery.com/Internals/jQuery.data i http://docs.jquery.com/Core/data#name

Answer 2

Rzeczywiście zwracasz obiekt jQuery w funkcji smartImage(). Jest to poprawny sposób na napisanie wtyczki jQuery, aby można było połączyć ją z innymi funkcjami jQuery.

Nie jestem pewien, czy istnieje sposób, aby zrobić to, co chcesz. Polecam:

(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(); 

To jedna z technik, które znam i które z powodzeniem stosowałem.

Answer 3

Nie jestem do końca pewien, dlaczego projektowania plugin ten sposób - może warto rozważyć coś w rodzaju sugestii jonstjohn - ale następujących powinien być podobny do tego, co prosisz:

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