Come dividere il plug-in jQuery su più file

Question

Sto scrivendo un piccolo CMS come un plugin jQuery AJAX e sebbene non sia eccessivamente lungo (attualmente circa 500 righe), posso vedere che sarebbe bello poterlo dividere in file separati, uno per ogni "sottoclasse":

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

nell'esempio di cui sopra, vorrei mettere il codice per ClassOne in un unico file, classTwo in un altro e le "baseclass" MyCMS in un terzo. È possibile ottenere questo risultato con qualcosa di simile (in ognuno dei file "sottoclasse")?

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

Molte grazie,

JS

Answer 1

che si desidera aggiungere alla "plugin" con una portata/separazione privato di preoccupazione. Questo può essere importante per la manutenzione e l'estensibilità a lungo termine della tua applicazione web basata su plugin, indipendentemente dal fatto che tutto sarà incorporato in un unico file o più file.

È possibile creare un ambito privato ed estendere un metodo jQuery.fn esistente collegando direttamente i metodi o aggiungendo al prototipo del metodo di 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); 

È possibile utilizzare jQuery.extend(), che in questo caso è davvero una "scorciatoia" per aggiungere un metodo all'istanza del costruttore come primo metodo sopra. È necessario incapsulare tutto ciò si aggiunge in un oggetto (in genere questo sarebbe un oggetto anonimo):

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

Dal punto di vista di design, se si dispone di "classi" che hanno bisogno di ottenere le stesse variabili closured frequenza con cui dovrebbe probabilmente far parte della stessa funzione scope/closure, oppure dovresti esporre getter e setter per quelle variabili chiuse (magari con la convenzione _foo che mostra che sono destinate ad essere usate solo dal 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 ed è necessario per arrivare a variabili closured da un ambito diverso, io credo che si possa fare così mediante l'esecuzione di questi nuovi metodi con il proprio ambito utilizzando .Call() o .Applicare() dall'altra portata. Posso provare a captare alcuni esempi di come funziona, ma sarà una buona idea se fai le tue ricerche su come funziona la risoluzione della portata in questo tipo di scenari.

Credo che si possa "prendere in prestito" l'ambito dal metodo "plug-in" originale usando una costruzione con ($ .fn.myCMS) {} ma non sono al 100% positivo perché non l'ho fatto me stesso, solo letto su di esso.

Answer 2

Aiuterà anche a guardare il codice ui jQuery. Ad esempio, il plugin progressbar richiede tre file ui.core, ui.widget e ui.progressbar. Scarica il pacchetto sorgente di jQuery UI e guarda l'esempio della barra di avanzamento nella directory demo. (Non sono riuscito a trovare la versione semplificata ospitata ovunque, ma il pacchetto sorgente ha esempi semplificati)