Como dividir plugin jQuery sobre vários arquivos

Question

Eu estou escrevendo um pequeno CMS como um jQuery AJAX plugin e embora seja de modo algum excessivamente longo (atualmente cerca de 500 linhas) Eu posso ver que seria bom para ser capaz de dividi-lo em arquivos separados, um para cada " subclasse ":

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

No exemplo acima, eu gostaria de colocar o código para ClassOne em um arquivo, classTwo em outro e os myCMS "baseclass" em um terço. É possível conseguir isso com com algo como isto (em cada um dos arquivos "subclasse")?

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

Muito obrigado,

JS

Answer 1

Você deseja adicionar ao "plug-in" com um escopo / separação privada de preocupação. Isso pode ser importante para a manutenção e longo prazo a extensibilidade da sua aplicação web baseada em plug-in, independentemente de tudo o que será construído em um arquivo ou vários arquivos.

Você pode criar um âmbito privado e estender um método jQuery.fn existente, anexando os métodos diretamente ou adicionando ao protótipo do método 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);

Você pode usar jQuery.extend (), que neste caso é realmente um "taquigrafia" para adicionar um método para a instância do construtor como o primeiro método acima. Você tem para encapsular o que você está adicionando em um objeto (normalmente isso seria um objeto anónimo):

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

A partir de uma perspectiva de design se você tem "aulas" que precisam chegar às mesmas variáveis ??Closured freqüentemente eles provavelmente devem fazer parte do mesmo escopo função / fechamento, ou você deve expor getters e setters para essas variáveis ??Closured (talvez com a convenção _foo que mostra que se destinam a ser usados ??apenas por seu código).

(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 você quer ser um hacker e você precisa obter pelo variáveis ??Closured de um escopo diferente, eu acredito que você pode fazê-lo através da execução destes novos métodos com seu próprio escopo usando .Call () ou .Aplique () do outro âmbito de aplicação. Posso tentar chicotear acima de algumas amostras de como isso funciona, mas vai ser uma boa idéia se você faz sua própria investigação sobre como resolução de escopo funciona nesses tipos de cenários.

Eu acredito que você pode "emprestar" o escopo do original "plugin" método usando um com ($ .fn.myCMS) {} construção, mas eu não sou 100% positivo sobre isso porque eu não fiz isso sozinho , ler sobre isso.

Answer 2

Ela vai ajudar a olhar também para código jQuery UI. Por exemplo, o plugin progressbar requer três arquivos ui.core, ui.widget e ui.progressbar. Faça o download do pacote fonte jQuery UI e olhar para o exemplo progressbar no diretório demos. (Eu não poderia encontrar a versão simplificada hospedado em qualquer lugar, mas o pacote fonte simplificou exemplos)