Как разделить плагин jQuery на несколько файлов

Question

Я пишу небольшую CMS в виде плагина jQuery AJAX, и хотя она ни в коем случае не является чрезмерно длинной (в настоящее время около 500 строк) Я вижу, что было бы неплохо иметь возможность разделить его на отдельные файлы, по одному для каждого "подкласса".:

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

В приведенном выше примере я хотел бы поместить код для ClassOne в один файл, CLASSSTWO в другой и myCMS "baseclass" в третий.Возможно ли достичь этого с помощью чего-то подобного этому (в каждом из файлов "подкласса")?

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

Большое спасибо,

JS

Answer 1

Вы хотите добавить в "плагин" с частной областью действия / разделением проблем.Это может быть важно для обслуживания и долгосрочной расширяемости вашего веб-приложения на основе плагинов, независимо от того, будет ли все встроено в один файл или в несколько файлов.

Вы можете создать закрытую область видимости и расширить существующий метод jQuery.fn, подключив методы напрямую или добавив к прототипу метода 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);

Вы можете использовать jQuery.extend(), который в данном случае действительно является "сокращением" для добавления метода в экземпляр конструктора в качестве первого метода, описанного выше.Вы должны инкапсулировать все, что вы добавляете, в объект (обычно это анонимный объект).:

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

С точки зрения дизайна, если у вас есть "классы", которым необходимо часто обращаться к одним и тем же закрытым переменным, они, вероятно, должны быть частью одной и той же области видимости / закрытия функции, или вам следует предоставить геттеры и установщики для этих закрытых переменных (возможно, с соглашением _foo, которое показывает, что они предназначены для использования только вашим кодом).

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

Если вы хотите быть хакером и вам нужно получить доступ к закрытым переменным из другой области, я полагаю, вы можете сделать это, выполнив эти новые методы с их собственной областью, используя .call() или .apply() из другой области.Я могу попытаться привести несколько примеров того, как это работает, но будет хорошей идеей, если вы проведете собственное исследование того, как работает разрешение области видимости в подобных сценариях.

Я полагаю, что вы можете "позаимствовать" область видимости из оригинального метода "plugin", используя конструкцию with ($.fn.myCMS) { }, но я не уверен в этом на 100%, потому что я не делал этого сам, только читал об этом.

Answer 2

Это поможет также взглянуть на код пользовательского интерфейса jQuery.Например, плагину progressbar требуются три файла ui.core, ui.widget и ui.progressbar.Загрузите исходный пакет пользовательского интерфейса jQuery и посмотрите на пример progressbar в каталоге demos.(Я нигде не смог найти размещенную упрощенную версию, но в исходном пакете есть упрощенные примеры)