2012-09-14 6 views
6

Ho letto il jquery documentation of plugin authoring e ho familiarità con quello. Tuttavia, gli esempi forniti operano sempre su un set di elementi precedentemente abbinati. Voglio creare una funzione che può fare entrambe le cose:Come rendere una funzione plug-in jQuery chiamabile per uso stand-alone, che non funziona su una collezione

// example usage of my to-be-created plugin function 

// this is the way described in the docs, and I know how to do that 
$("a").myFunction() 

// but I also want to be able to call the function without a collection: 
$.myFunction(); 

Se $.myFunction() è chiamato senza una raccolta di operare su, si creerebbe un proprio insieme di quali elementi per abbinare - genere di un processo di inizializzazione (ma non necessariamente eseguire solo una volta). Inoltre, $.myFunction() dovrebbe mantenere la concatenabilità.

Il pseudocodice di ciò che voglio ottenere:

// [...] 
function myFunction(): { 
    if (notCalledOnACollection) { 
     // this should run when called via $.myFunction() 
     $elements = $("a.myClass"); 
    } 
    else { 
     $elements = $(this); 
    } 
    return $elements.each (function() { 
     // do sth. here 
    }); 
} 

Mi piacerebbe davvero mantenere tutte le funzioni di implementazione/funzionalità all'interno di una singola definizione di funzione, e non hanno due funzioni denominate separatamente o due altrettanto nome funziona in due posti separati all'interno dell'oggetto jQuery.

E, naturalmente, potrei aggiungere un parametro myFunction (do_init) che indica il ramo della dichiarazione if da eseguire, ma che sarebbe ingombrare la mia lista di argomenti (voglio usare questo approccio per più plug-in, e ci sarà argumentes a myFunction() che Ho appena lasciato qui per semplicità).

Qualche suggerimento?

risposta

8

Con la semplice aggiunta di un altro riferimento nel definiton plug-in, si può facilmente utilizzare il codice del plugin di serie:

(function($) { 
    $.myPlugin = $.fn.myPlugin = function(myPluginArguments) { 
     if(this.jquery) 
      //"this" is a jquery collection, do jquery stuff with it 
     } else { 
      //"this" is not a jquery collection 
     } 
    }; 

    $.fn.myPlugin.otherFunc = function() { 
    }; 
})(jQuery); 

L'unica differenza qui è la parte $.myPlugin =, che permette di chiamare direttamente il plugin senza correre il selettore di jQuery funzione. Se decidi di aver bisogno di altre funzioni o proprietà, puoi crearle come proprietà del tuo plugin.

Usage:

//using a selector (arguments optional) 
$(".someClass").myPlugin(); 

//using the options variable - or whatever your arguments are 
$.myPlugin({id: "someId"}); 

//accessing your other functions/properties 
$.myPlugin.otherFunc(); 
+0

ho problemi seri con la vostra soluzione. Ho replicato il tuo approccio su jsfiddle: http://jsfiddle.net/pnpbU/ Ma una volta eseguito '$ .myPlugin()', tutti i browser testati consumano il 100% della CPU e rimangono bloccati (testati con FF su Linux e Windows , Safari su Mac). – Dyna

+0

Non vedo il problema sul mio computer. E io sono su un dinosauro al momento. E inoltre, jsfiddle non dovrebbe essere usato per il test delle prestazioni, hanno un sacco di extra caricati. Ho anche provato localmente e non ho visto il problema neanche lì. Dubito davvero che cosa vedete abbia qualcosa a che fare con questo codice. – Donamite

+0

Hai decommentato la riga nella parte js di jsfiddle? Altrimenti non funzionerebbe! Sono all'università in questo momento e ho accesso a un mucchio di computer e posso riprodurre il consumo di CPU al 100% su 3 macchine fisicamente diverse. Usando http://jsfiddle.net/pnpbU (con decommentando l'ultima riga) e premendo run si bloccherà/terminerà lo script su Fedora 17: Firefox 14.0.1, Chrome 22; Windows 7: Firefox 14, IE9; OS X Lion: Safari 5, Firefox 14. Quindi è * definitivamente * riproducibile. Questo non ha nulla a che fare con jsfiddle, copiare lo script insieme a jQuery 1.8.0 ed eseguire mostra lo stesso effetto. – Dyna

Problemi correlati