2009-06-17 6 views
7

J'écris un petit CMS comme un plugin jQuery AJAX et bien qu'il ne soit pas excessivement long (actuellement environ 500 lignes), je peux voir qu'il serait bien de le partager dans des fichiers séparés, un pour chaque « sous-classe »:Comment scinder le plugin jQuery sur plusieurs fichiers

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

dans l'exemple ci-dessus, je voudrais mettre le code pour classOne dans un fichier, classTwo dans un autre et les MyCMS « baseclass » dans un troisième. Est-il possible de réaliser cela avec quelque chose comme ça (dans chacun des fichiers de la "sous-classe")?

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

Un grand merci,

JS

Répondre

6

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

Vous pouvez créer un champ privé et étendre une méthode jQuery.fn existante en fixant 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 comme la première méthode ci-dessus. Vous devez résumer tout ce que vous ajoutez dans un objet (généralement ce serait un objet anonyme):

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

Du point de vue de la conception si vous avez des « classes » qui ont besoin pour obtenir les mêmes variables Closured souvent ils devrait probablement faire partie de la même portée/fermeture de fonction, ou vous devriez exposer des getters et setters pour ces variables fermées (peut-être avec la convention _foo qui montre 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 vous devez obtenir à des variables Closured d'une portée différente, je crois que vous pouvez le faire en exécutant ces nouvelles méthodes, avec leur propre portée à l'aide .call() ou .Appliquer() de l'autre portée. Je peux essayer de trouver quelques exemples de la façon dont cela fonctionne, mais ce sera une bonne idée si vous faites vos propres recherches sur la façon dont la résolution de la portée fonctionne dans ce genre de scénarios. Je crois que vous pouvez "emprunter" la portée de la méthode originale "plugin" en utilisant une construction avec ($ .fn.myCMS) {} mais je ne suis pas 100% positif à ce sujet parce que je ne l'ai pas fait moi-même, seulement lire à ce sujet.

1

Il sera également utile d'examiner le code de l'interface utilisateur jQuery. Par exemple, le plugin progressbar nécessite trois fichiers ui.core, ui.widget et ui.progressbar. Téléchargez le kit source de l'interface utilisateur jQuery et consultez l'exemple de la barre de progression sous le répertoire des démos. (Je n'ai pas trouvé la version simplifiée hébergée n'importe où, mais le paquet source a des exemples simplifiés)

Questions connexes