2009-06-17 2 views
7

Ich schreibe ein kleines CMS als jQuery AJAX-Plugin und obwohl es keineswegs übermäßig lang ist (derzeit etwa 500 Zeilen) kann ich sehen, es wäre schön, es teilen zu können in separate Dateien für jeden, ein „Unterklasse“:Wie jQuery-Plugin über mehrere Dateien aufgeteilt wird

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

im obigen Beispiel würde ich den Code für ClassOne in einer Datei, classTwo in einem anderen und die myCMS „Basisklasse“ in einem dritten setzen möge. Ist es möglich, dies mit so etwas zu erreichen (in jeder der "Unterklassen" -Dateien)?

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

Vielen Dank,

JS

Antwort

6

Sie wollen die "Plugin" mit einer privaten Rahmen/Trennung von Sorge hinzuzufügen. Dies kann für die Wartung und langfristige Erweiterbarkeit Ihrer pluginbasierten Webanwendung wichtig sein, unabhängig davon, ob alles in eine Datei oder mehrere Dateien integriert wird.

Sie können einen privaten Bereich erstellen und ein vorhandenes jQuery.fn Verfahren durch Verfahren direkt oder indem zu der jQuery.fn.foo Methode Prototyp

(function ($) { 

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

    }; 

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

    }; 

})(jQuery); 

Befestigung Sie können jQuery.extend() verwenden, verlängern, was in diesem Fall wirklich eine "Kurzform" für das Hinzufügen einer Methode zu der Konstruktorinstanz als die erste obige Methode ist. 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() { } }); 

Aus gestalterischen Sicht, wenn Sie „Klassen“, die häufig in den gleichen closured Variablen erhalten müssen sie sollte wahrscheinlich Teil des gleichen Funktionsumfangs/Abschlusses sein, oder Sie sollten Getter und Setter für diese geschlossenen Variablen verfügbar machen (vielleicht mit der _foo-Konvention, die zeigt, dass sie nur von Ihrem Code verwendet werden sollen).

(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 Umfang so tun mit .call() oder .apply() aus dem anderen Bereich. Ich kann versuchen, einige Beispiele dafür zu finden, wie das funktioniert, aber es ist eine gute Idee, wenn Sie selbst erforschen, wie die Entfernungsauflösung in solchen Szenarien funktioniert.

Ich glaube, Sie können den Anwendungsbereich von der ursprünglichen "plugin" -Methode "ausleihen", indem Sie eine mit ($ .fn.myCMS) {} Konstruktion verwenden, aber ich bin nicht 100% positiv, weil ich es nicht getan habe ich selbst, lies nur darüber.

1

Es wird helfen, auch jQuery UI-Code zu betrachten. Zum Beispiel erfordert das progressbar-Plugin drei Dateien ui.core, ui.widget und ui.progressbar. Laden Sie das jQuery UI-Quellpaket herunter und schauen Sie sich das Beispiel für die Fortschrittsanzeige unter demos-Verzeichnis an. (Ich konnte die vereinfachte Version nirgendwo finden, aber das Quellbündel hat vereinfachte Beispiele)

Verwandte Themen