Cómo dividir el complemento jQuery en varios archivos

Question

Estoy escribiendo un pequeño CMS como un complemento jQuery AJAX y, aunque de ninguna manera es excesivamente largo (actualmente unas 500 líneas), puedo ver que sería bueno poder dividirlo en archivos separados, uno para cada uno. ; subclase " ;:

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

En el ejemplo anterior, me gustaría poner el código para classOne en un archivo, classTwo en otro y myCMS " baseclass " en un tercero ¿Es posible lograr esto con algo como esto (en cada uno de los archivos de "subclase")?

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

Muchas gracias

JS

Answer 1

Desea agregar al " plugin " con un ámbito privado / separación de preocupación. Esto puede ser importante para el mantenimiento y la extensibilidad a largo plazo de su aplicación web basada en complementos, independientemente de si todo se integrará en un archivo o en varios archivos.

Puede crear un ámbito privado y ampliar un método jQuery.fn existente adjuntando métodos directamente o agregando al prototipo del 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);

Puede usar jQuery.extend (), que en este caso es realmente una "taquigrafía" para agregar un método a la instancia del constructor como el primer método anterior. Debe encapsular todo lo que esté agregando a un objeto (generalmente, este sería un objeto anónimo):

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

Desde una perspectiva de diseño si tiene '' clases '' que necesitan llegar a las mismas variables cerradas con frecuencia, probablemente deberían ser parte del mismo alcance / cierre de la función, o debería exponer getters y setters para esas variables cerradas (tal vez con la convención _foo que muestra que están destinadas a ser utilizadas solo por su 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);

Si quiere ser un hacker y necesita obtener variables cerradas desde un ámbito diferente, creo que puede hacerlo ejecutando estos nuevos métodos con su propio ámbito utilizando .call () o .apply () desde otro alcance Puedo tratar de preparar algunas muestras de cómo funciona esto, pero sería una buena idea si haces tu propia investigación sobre cómo funciona la resolución de alcance en este tipo de escenarios.

Creo que puedes '' pedir prestado '' el alcance del plugin original "" método mediante el uso de una construcción con ($ .fn.myCMS) {} pero no soy 100% positivo al respecto porque no lo he hecho yo mismo, solo leí sobre eso.

Answer 2

Ayudará también a mirar el código de jQuery ui. Por ejemplo, el complemento de barra de progreso requiere tres archivos ui.core, ui.widget y ui.progressbar. Descargue el paquete fuente de jQuery UI y mire el ejemplo de la barra de progreso en el directorio de demos. (No pude encontrar la versión simplificada alojada en ningún lado, pero el paquete fuente tiene ejemplos simplificados)