Jak podzielić wtyczkę jQuery na wiele plików?

Question

Piszę mały CMS jako wtyczkę jQuery AJAX i chociaż nie jest ona zbyt długa (obecnie około 500 linii), widzę, że byłoby miło móc ją podzielić w oddzielnych plikach, po jednym dla każdego „podklasy”:

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

w przykładzie powyżej, chciałbym umieścić kod classOne w jednym pliku, classTwo w innym i myCMS „klasy bazowej” w jednej trzeciej. Czy można to osiągnąć za pomocą czegoś podobnego (w każdym z plików "podklasy")?

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

Dziękujemy,

JS

Answer 1

chcesz dodać do "wtyczki" z prywatnym zakres/separacji niepokoju. Może to być ważne w przypadku konserwacji i długoterminowej rozbudowy aplikacji internetowej opartej na wtyczce, niezależnie od tego, czy wszystko zostanie wbudowane w jeden plik czy wiele plików.

Można utworzyć prywatną zakres i rozszerzyć istniejącą metodę jQuery.fn przez bezpośrednie przymocowanie metod lub dodając do prototypu danej metody jQuery.fn.foo za

(function ($) { 

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

    }; 

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

    }; 

})(jQuery); 

Można użyć jQuery.extend(), w tym przypadku jest to naprawdę "skrót" do dodawania metody do instancji konstruktora jako pierwszej metody powyżej. Trzeba hermetyzacji co dodajesz do obiektu (zwykle będzie to anonimowy Object):

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

Z punktu widzenia projektowania, jeśli masz „klas”, które muszą dotrzeć do tych samych zmiennych closured często oni powinien prawdopodobnie być częścią tego samego zakresu funkcji/zamknięcia, lub powinieneś narazić gettery i ustawiające dla tych zamkniętych zmiennych (być może z konwencją _foo, która pokazuje, że są one przeznaczone tylko dla twojego kodu).

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

Jeśli chcesz być hakerem i trzeba dostać się na zmiennych closured z innego zakresu, uważam, że można to zrobić poprzez wykonanie tych nowych metod z własnym zakresie korzystania .Połączenia() lub .apply() z innego zakresu. Mogę próbować pobudzić kilka przykładów tego, jak to działa, ale dobrze będzie, jeśli przeprowadzisz własne badania nad tym, jak rozdzielczość zakresu działa w tego rodzaju scenariuszach.

Wierzę, że można "pożyczyć" zakres od pierwotnej metody "wtyczki" za pomocą konstrukcji z ($ .fn.myCMS) {}, ale nie jestem w 100% pozytywna, ponieważ tego nie zrobiłem siebie, czytaj tylko o tym.

Answer 2

Pomoże to również spojrzeć na kod jQuery ui. Na przykład plugin progressbar wymaga trzech plików ui.core, ui.widget i ui.progressbar. Pobierz pakiet źródłowy jQuery UI i spójrz na przykład z paska postępu w katalogu demonstracyjnym. (Nie mogłem znaleźć uproszczonej wersji hostowanej w dowolnym miejscu, ale pakiet źródłowy ma uproszczone przykłady)