jQuery: è possibile associare campi/metodi a un oggetto wrapper jQuery?

Question

Sto provando a scrivere un plug-in che aggiungerà alcuni metodi a un oggetto wrapper jQuery. Fondamentalmente, io voglio inizializzare in questo modo:

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

plug Il 'SmartImage' sarebbe allegare 2 metodi per l'oggetto a cui fa riferimento 'intelligente', così sarò in grado di fare qualcosa di simile:

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

Sfortunatamente, non riesco a capire come collegare questi 2 metodi all'oggetto wrapper. Il codice che ho segue il tipico plugin jQuery modello:

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

Dopo che io chiamo SmartImage(), né 'saveState' né 'Loadstate' è definito. Che cosa sto facendo di sbagliato?

Answer 1

Non è possibile allegare metodi/proprietà nel modo in cui è stato dimostrato, perché come hai detto, l'oggetto jQuery è solo un wrapper attorno a qualsiasi elemento DOM che contiene. Si può certamente associare metodi/proprietà ad esso, ma non persistono quando vengono nuovamente selezionati da 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. 

Se si desidera un metodo di esistere sull'oggetto jQuery durante il ripristino una seconda volta, ha bisogno di essere assegnato a jQuery.fn. Così si potrebbe definire il metodo di secondario, assegnarlo al jQuery.fn, e utilizzare l'impostazione dei dati jQuery per mantenere lo stato per te ...

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

io suggerisco di guardare http://docs.jquery.com/Internals/jQuery.data e http://docs.jquery.com/Core/data#name

Answer 2

Si sta effettivamente restituendo un oggetto jQuery nella funzione smartImage(). Questo è il modo corretto di scrivere un plugin jQuery, in modo da poterlo concatenare con altre funzioni jQuery.

Non sono sicuro se c'è un modo per fare ciò che vuoi. Vorrei raccomandare quanto segue:

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

Questa è una tecnica che conosco e che ho usato con successo.

Answer 3

Non sono del tutto sicuro perché si sta progettando il plugin in questo modo - si potrebbe prendere in considerazione qualcosa lungo le linee di suggerimento di jonstjohn - ma il seguente dovrebbe essere simile a quello che stai chiedendo:

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