Come dividere il plugin jQuery su più file

Question

Sto scrivendo un piccolo CMS come plug-in AJAX di jQuery e sebbene non sia affatto eccessivamente lungo (attualmente circa 500 righe) posso vedere che sarebbe bello poterlo dividere in file separati, uno per ciascuno " ; sottoclasse "

(function($) {
    $.fn.myCMS = function() {
        this.classOne = function() {
        ...
        }
        this.classTwo = function() {
        ...
        }
    }
})(jQuery);

Nell'esempio sopra, vorrei inserire il codice per classOne in un file, classTwo in un altro e myCMS "baseclass". in un terzo. È possibile farlo con qualcosa del genere (in ciascuno dei file "sottoclasse")?

$.extend(myCMS,classOne = function() {
...
})

Mille grazie,

JS

Answer 1

Vuoi aggiungere al " plugin " con un ambito privato / separazione delle preoccupazioni. Questo può essere importante per la manutenzione e l'estensibilità a lungo termine dell'applicazione Web basata su plug-in, indipendentemente dal fatto che tutto sia incorporato in un file o in più file.

È possibile creare un ambito privato ed estendere un metodo jQuery.fn esistente collegando i metodi direttamente o aggiungendo al prototipo del metodo jQuery.fn.foo

(function ($) {

     // instance method attached to the constructor function
     $.fn.myCMS.classOne = function () {

     };

     // or "shared" method attached to prototype
     $.fn.myCMS.prototype.classOne = function() {

     };

})(jQuery);

Puoi usare jQuery.extend (), che in questo caso è davvero una "scorciatoia" per l'aggiunta di un metodo all'istanza del costruttore come primo metodo sopra. Devi incapsulare tutto ciò che aggiungi in un oggetto (in genere si tratta di un oggetto anonimo):

$.extend($.fn.myCMS,{ classOne: function () { } });

Dal punto di vista del design se hai " classi " che hanno bisogno di arrivare spesso alle stesse variabili chiuse, probabilmente dovrebbero far parte dello stesso ambito / chiusura della funzione, oppure dovresti esporre getter e setter per quelle variabili chiuse (forse con la convenzione _foo che mostra che sono destinati ad essere utilizzati solo da il tuo codice).

(function ($) {

    var foo = "foo!";

    // combined getter/setter
    // could also check arguments.length
    $.fn.myCMS._foo = function (value) {
          if (typeof(value) != "undefined") {
               foo = value;
          } else {
               return foo;
          }
    };

)(jQuery);

Se vuoi essere un hacker e devi arrivare a variabili chiuse da un ambito diverso, credo che puoi farlo eseguendo questi nuovi metodi con il loro ambito usando .call () o .apply () dal altro ambito. Posso provare a estrarre alcuni esempi di come funziona, ma sarà una buona idea se fai le tue ricerche su come funziona la risoluzione dell'ambito in questo tipo di scenari.

Credo che tu possa " prendere in prestito " l'ambito dall'originale " plugin " usando una costruzione with ($ .fn.myCMS) {} ma non sono sicuro al 100% a riguardo perché non l'ho fatto da solo, ho letto solo su di esso.

Answer 2

Aiuterà anche a guardare il codice dell'interfaccia utente jQuery. Ad esempio, il plug-in progressbar richiede tre file ui.core, ui.widget e ui.progressbar. Scarica il pacchetto sorgente dell'interfaccia utente jQuery e guarda l'esempio della barra di avanzamento nella directory demo. (Non sono riuscito a trovare la versione semplificata ospitata da nessuna parte, ma il pacchetto sorgente ha esempi semplificati)