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

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

8 голосов
/ 18 июня 2009

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

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

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

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

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

JS

Ответы [ 2 ]

6 голосов
/ 12 декабря 2009

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

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

1 голос
/ 09 октября 2010

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

...