Wie aufzuspalten jQuery-Plugin über mehrere Dateien

Question

Ich bin ein kleines CMS als jQuery AJAX-Plugin schreiben und obwohl es keineswegs übermäßig lange (derzeit etwa 500 Zeilen) ist kann ich sehen, wäre es schön, die Lage sein, sie in separate Dateien aufgeteilt, eine für jeden " Unterklasse ":

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

Im obigen Beispiel würde Ich mag den Code für ClassOne in einer Datei setzen, classTwo in einem anderen und die myCMS „Basisklasse“ in einem dritten. Ist es möglich, dies zu erreichen, mit etwas wie folgt aus (in jeder der „Unterklasse“ Dateien)?

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

Vielen Dank,

JS

Answer 1

Sie möchten die „Plug-in“ mit einem privaten Rahmen / Trennung von Sorge hinzuzufügen. Dies kann für die Wartung und langfristige Erweiterbarkeit Ihrer Plugins-basierte Web-Anwendung, unabhängig davon, ob alles in eine Datei oder mehr Dateien gebaut wird wichtig sein.

Sie können einen privaten Bereich erstellen und eine vorhandene jQuery.fn Methode erweitern, indem Methoden direkt oder indem zu der jQuery.fn.foo Methode Prototyp Anbringen

(function ($) {

     // instance method attached to the constructor function
     $.fn.myCMS.classOne = function () {

     };

     // or "shared" method attached to prototype
     $.fn.myCMS.prototype.classOne = function() {

     };

})(jQuery);

Sie können mit jQuery.extend (), die in diesem Fall ist wirklich ein „Kurzschrift“ für ein Verfahren an die Konstruktor Instanz als das erste Verfahren, das oben hinzufügen. Sie haben zu kapseln, was Sie in ein Objekt sind Zugabe (in der Regel wäre dies ein anonymes Objekt sein):

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

Was das Design angeht, wenn Sie „Klassen“, die an den gleichen closured Variablen erhalten müssen häufig wahrscheinlich Teil der gleichen Funktionsumfang / Schließung sein sie sollten, oder sollten Sie Getter und Setter für die closured Variablen aussetzen (vielleicht mit die _foo Konvention, dass sie dazu bestimmt sind zeigt nur von Ihrem Code verwendet werden).

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

Wenn Sie ein Hacker sein wollen, und Sie müssen bei closured Variablen aus einem anderen Bereich zu bekommen, ich glaube, Sie können durch die Ausführung dieser neuen Methoden mit ihren eigenen Rahmen mit .call so tun () oder .apply () aus dem andere Rahmen. Ich kann versuchen, einige Beispiele zu schüren, wie dies funktioniert, aber es wird eine gute Idee, wenn Sie Ihre eigene Forschung zu tun, wie ich Umfang Auflösung arbeitet in dieser Art von Szenarien.

Ich glaube, können Sie „ausleihen“, um den Umfang von der ursprünglichen „Plugin“ -Methode durch eine Verwendung mit ($ .fn.myCMS) {} Aufbau, aber ich bin nicht zu 100% positiv, weil ich habe es selbst nicht getan , nur über sie gelesen.

Answer 2

Es wird auch dazu beitragen, bei jQuery UI-Code aussehen. Zum Beispiel erfordert die progressbar Plugin drei Dateien ui.core, ui.widget und ui.progressbar. Laden Sie die jQuery UI Quelle Bündel und Blick auf das progressbar Beispiel unter Demos-Verzeichnis. (Ich konnte nicht die vereinfachte Version irgendwo gehostet finden, aber die Quelle Bundle Beispiele vereinfacht)