Comment diviser le plugin jQuery sur plusieurs fichiers

Question

J'écris un petit CMS sous la forme d'un plugin jQuery AJAX et même s'il n'est en aucun cas excessivement long (environ 500 lignes), je pense qu'il serait bien de pouvoir le scinder en fichiers séparés, un pour chaque " ; sous-classe ":

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

Dans l'exemple ci-dessus, j'aimerais placer le code de classOne dans un fichier, classTwo dans un autre et myCMS "baseclass". dans un tiers. Est-il possible d'y parvenir avec quelque chose comme ceci (dans chacun des fichiers "sous-classes")?

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

Merci beaucoup,

JS

Answer 1

Vous souhaitez ajouter au & plug; plugin " avec une portée privée / séparation des préoccupations. Cela peut être important pour la maintenance et l'extensibilité à long terme de votre application Web basée sur un plugin, que tout soit intégré dans un ou plusieurs fichiers.

Vous pouvez créer une étendue privée et étendre une méthode jQuery.fn existante en attachant des méthodes directement ou en ajoutant au prototype de la méthode 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);

Vous pouvez utiliser jQuery.extend (), qui dans ce cas est vraiment un "raccourci". pour ajouter une méthode à l'instance du constructeur en tant que première méthode ci-dessus. Vous devez encapsuler tout ce que vous ajoutez à un objet (il s’agit généralement d’un objet anonyme):

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

Du point de vue de la conception, si vous avez des "classes". Si vous devez fréquemment utiliser les mêmes variables fermées, elles doivent probablement faire partie de la même fonction scope / fermeture, ou vous devez exposer les getters et les setters de ces variables fermées (peut-être avec la convention _foo qui indique qu'elles sont destinées à être utilisées uniquement par votre code).

(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 vous voulez être un hacker et que vous avez besoin d’obtenir des variables fermées d’une autre portée, je pense que vous pouvez le faire en exécutant ces nouvelles méthodes avec leur propre portée en utilisant .call () ou .apply () autre portée. Je peux essayer de vous donner quelques exemples de la façon dont cela fonctionne, mais ce serait une bonne idée de faire votre propre recherche sur le fonctionnement de la résolution de la portée dans ce type de scénario.

Je pense que vous pouvez "emprunter". la portée de l'original "plugin" méthode en utilisant une construction avec ($ .fn.myCMS) {} mais je ne suis pas 100% positif à ce sujet car je ne l’ai pas fait moi-même, je n’ai lu que ce sujet.

Answer 2

Cela vous aidera également à regarder le code jQuery ui. Par exemple, le plugin progressbar nécessite trois fichiers: ui.core, ui.widget et ui.progressbar. Téléchargez l'ensemble de sources de l'interface utilisateur jQuery et consultez l'exemple de la barre de progression sous le répertoire demos. (La version simplifiée n'a pu être hébergée nulle part, mais l'ensemble source contient des exemples simplifiés.