Als UI -Bibliothek habe ich nicht vor, dass jeder meinen Kit -Kern lernen und meine API auswendig lernte. Diese Art von Follow-up-Lernmethode hat überhaupt keine Bedeutung. Heute ist JQuery beliebt, jeder lernt JQ und morgen wird SeaJs populär und jeder wird SeaJs singen. In Kitjs habe ich also einen Syntaxzucker (SUGER.JS) für JQ -Benutzer speziell vorbereitet, das die JQ -API vollständig simuliert. Zusätzlich zur Implementierung ist die Schnittstelle gleich, was auch für alle bequem ist, Kit -Komponenten direkt zu transformieren. Als rein technischer Fan ist es natürlich viel interessanter, eingehend zu verstehen, wie eine Technologie implementiert wird, als sie für die Ideologie zu verwenden. Wenn Sie den Kit -Komponentencode für KPI -Überlegungen oder den Projektbonus des Chefs, um Ihren KPI zu vervollständigen, direkt plagiarisieren, hat ich natürlich nichts dagegen, ein solches Verhalten. Solange Sie Wasser trinken und nicht vergessen, den Brunnen zu graben und Kitjs zu fördern, wenn Sie mit Kollegen Wasser blasen, bin ich Ihnen sehr dankbar. Gleichzeitig ist Kit auch eine sehr junge Bibliothek. Aufgrund der kontinuierlichen Entwicklung gibt es einige Probleme mit Fehler und Browser -Kompatibilität, was unvermeidlich ist. Ich bin allein und habe nur begrenzte Energie. In dieser Ära des Krieges im vorderen Ende können er eher gleichgesinnte Freunde ihn größer machen und gemeinsam Fortschritte machen.
Gleichzeitig wurde heute eine Kitjs -Dialogkomponente veröffentlicht. Die Demo -Adresse lautet http://xueduany.github.com/kitjs/kitjs/demo/dialog/demo.html
(I) Kit -Verzeichnisformat
Zurück zum Thema ist Kit.js in Kitjs die Existenz der Kerndatei. Es enthält einige der am häufigsten verwendeten DOM und Objekte, ererbte Operationen, und eine Stapel von String.js, Math.js usw. werden gemäß der Aufteilung der Funktionen in demselben Niveau -Verzeichnis erweitert. Jede unabhängige JS -Datei enthält einen Klassenkonstruktor und eine Instanz eines globalen Objekts.
Wenn Sie beispielsweise Kit.js nehmen, enthält es die $ kit -Klasse und die $ kit Instance $ kit (beginnend mit $, Konflikte mit häufig verwendeten Variablen zu vermeiden).
Alle anderen Typen werden an Instanzen von $ kit und $ kit in der Link -Art aufgehängt, wie z. B. Math.js, einschließlich $ kit.math -Klasse und $ kit.math -Instanzen, so dass es nur zwei Schadstoffe im globalen Bereich gibt. Gleichzeitig definieren wir in Kit.js einen Namespace namens $ kit.ui. Im physischen Verzeichnis verwenden wir das Widget -Verzeichnis der gleichen Ebene wie Kit.js, und das Verzeichnis mit mehreren Anfangsbuchstaben ist in einer Zeile angeordnet.
Alle Verzeichnisse unter dem Widget -Verzeichnis sind Kitjs -Komponentenverzeichnisse. Jede unabhängige JS-Datei enthält nur einen Klassenkonstruktor für unabhängige Komponenten (Nicht-Instanz). Es kann auch mit dem Modulmodus von CommonJs kompatibel sein (kann den Modulen/1.1 -Spezifikation von CommonJs und AMD -Transformation entsprechen. Die spezifische Transformationsmethode wird später ausführlich erwähnt)
(Ii) Die Standardcode -Vorlage der Kit -Komponente, die Annotation entspricht der JSDOC -Spezifikation
Nehmen wir die Dialogkomponenten als Beispiel, jede Komponente ähnelt der folgenden
Zunächst der Kommentar von JSDOC, welche Klasse ist @Class Deklaration, @Require xxx.js, von welchen Komponenten deklariert werden
(Iii) Konstruktor- und Initialisierungsmethode
Jede Klasse definiert einen Konstruktor in einer Standardfunktion (Konfiguration) {}. Es ist hier zu beachten, dass der Konstruktor der einzelnen Kitjs -Komponenten standardmäßig einen Konfigurationsparameter als Eingabe für die personalisierte Konfiguration reserviert.
Gleichzeitig gibt es im Klassenkonstruktor ein statisches Element und ein Standardconfig -Objekt, das zur Speicherung der Standardkonfiguration der KitJS -Komponente verwendet wird
Bei der Verwendung von KitJS -Komponenten müssen Sie als erstes ein neues Instanzobjekt über eine neue Instanz initialisieren. Dies soll nur ein JS -Komponentenobjekt initialisieren. Es gibt noch keine HTML. Sie müssen die Init -Methode ausführen, HTML erstellen und zu DOC hinzufügen, was dem Gießen von Fleisch und Blut auf die Seele entspricht.
Einige Schüler fragen sich vielleicht, warum nicht die Init -Methode direkt in den Konstruktor platzieren und separat freigeben?
1. Da die übergeordnete Klasse während der Erbschaft instanziiert werden muss. Wenn die untergeordnete Klasse der übergeordneten Klasse erbt, wird das Prototypobjekt der untergeordneten Klasse auf die neue Instanz der übergeordneten Klasse eingestellt. Wenn die Initialisierungsmethode von Init im Konstruktor platziert ist, wird die HTML der übergeordneten Klasse direkt ausgeführt und der Müllcode wird generiert.
2 Aufgrund des faulen Ladens muss der HTML -Code zum richtigen Zeitpunkt ausgeführt werden, anstatt sofort bei der Initialisierung
Die Standardmethode zur Verwendung von Kitjs -Komponenten ist also
Führen Sie nach der Instanziierung die Init -Methode aus (die Init -Methode gibt das aktuelle Komponentenobjekt mit dem Rückgabecode 7 zurück).
Wie in der obigen Abbildung gezeigt, werden alle API -Methoden im Dialog an dem Prototyp aufgehängt und die Vererbung und Übergabe an das Instanzobjekt über Prototyperweiterung.
Beachten Sie den Konstruktorcode der $ kit.ui.dialog.yesorno -Komponente,
(Iv) Vererbung von Kitjs
Er erklärte die Erbschaftsbeziehung mit dem $ kit.ui.dialog -Objekt über die $ kit.inherit -Methode. Hier wird es einen Klassenkamerad geben, der fragen möchte, warum er ihn im Konstruktor erben sollte, anstatt ihn direkt draußen zu schreiben?
Der Grund ist:
1.KitJS ist eine prototypbasierte Erbschaftsbeziehung
2. Um KitJS -Komponenten zu verwenden, müssen Sie das Komponentenobjekt instanziieren. Jede Komponente wird durch den Konstruktor über eine neue Instanz erstellt.
Daher habe ich die Ausführung der Erbschaftsbeziehung in den Codekonstruktor eingesetzt, damit ich beim Instanziieren einer neuen Komponente die Mitglieder und Methoden seiner übergeordneten Klasse Schritt für Schritt gemäß der Erbschaftsmethode des Konstruktors der aktuellen Komponente erben werde.
Wenn eine untergeordnete Klasse die Methode der Elternklasse ändern muss, müssen Sie nur eine gleichnamige Methode im Prototyp der untergeordneten Klasse definieren, um die Vererbungsmethode der übergeordneten Klasse zu überschreiben.
In Bezug auf die Benennung folgt Kitjs und die Unterklasse setzt den Namen der Elternklassen als Namespace fort und behält die Kette, wie in der obigen Abbildung $ kit.ui.dialog, $ kit.ui.dialog.yesorno gezeigt
Die Implementierung von Kitjs Erbe ist ebenfalls sehr einfach
Instantieren Sie ein übergeordnetes Klassenobjekt, kopieren Sie alle Mitglieder der übergeordneten Klasseninstanz in den Unterklassenprototyp und setzen Sie den Subklass -Prototyp -Konstruktor als Subklass -Konstruktor zurück und hängen Sie dann eine Verbindung zum Subklassenkonstruktor und verweisen Sie auf die übergeordnete Klasse. Durch die $ kit.inherit -Methode können Sie im Instanziierungsprozess von Unterklasse $ kit.ui.dialog.yesorno alle Mitglieder der Elternklasse $ kit.ui.dialog erben, die nicht existieren, und die Vererbung ähnlich wie statische Sprachen erkennen.
(V) Konfigurationsparameter , Kopplungs -Demontage/Hautentfernung von HTML und CSS?
Der Kit-Komponentenkonstruktor ist daran gewöhnt, einen MAP-Typ-Parameter zu übergeben und personalisiert immer die Komponente. Wenn die Kit -Komponente initialisiert wird, überschreibt sie automatisch den Standard -Standardconfig mit dem vom Benutzer eingereichten Konfigurationsparameter und Startinitialisierung.
Für jede Komponente ist es unmöglich, Änderungen der HTML -Struktur und Änderungen im CSS -Stil zu entfernen
Kit zersetzt diese Kopplung in die Konfigurationsparameterkonfiguration.
Verwenden Sie zunächst die HTML -Template -Technologie. Kit -Befürworter der Methode $ kit.newhtml zur direkten Root -HTML -Zeichenfolge, generieren HTML -DOM- und Einfügen von Dokumentströmen.
Deshalb extrahieren wir den ungefähren HTML -Inhalt der Komponente, umfassen ihn in eine HTML -String -Vorlage und speichern sie in der Standardconfig der Komponente. Wenn der Benutzer die HTML -Vorlage ändern muss, verwenden Sie eine benutzerdefinierte Konfiguration beim Initialisieren und überschreiben Sie das Feld Vorlage im Standard -Standardconfig.
In der Kopplung und Zersetzung von HTML -Vorlagen und CSS verwendet Kit einen Trick, um den Klassennamen mit JS -Vorlagen zu zersetzen.
Ersetzen Sie die HTML in der Konfiguration in Form von $ {xxx} durch $ kit.tpl in der Init -Methode
Gleichzeitig werden alle Stile in CSS festgelegt.
Wenn es mehrere Sätze von Skins gibt, die umgeschaltet werden müssen, können Sie den Klassennamen der Vorlage ändern, indem Sie den tatsächlichen Klassennamen angeben, der $ {cls} während der Initialisierung entspricht, um den Effekt des Hautersatzes zu erzielen.
(Vi) Zusammenfassung
Grundsätzlich haben wir durch die Codeanalyse der Komponenten von $ kit.ui.dialog.yesorno ein grobes Verständnis der Komponentenimplementierungsstruktur von KitJs. Tatsächlich ist es nicht schwierig, eine Seitenkomponente zu entwerfen, sondern eine Seitenkomponente zu entwerfen, die sich an verschiedene Anforderungen anpassen und sich in verschiedenen Gelegenheiten schnell verformen und an die Entwicklung anpassen kann. Kit spaltet HTML -Vorlagen und CSS auf, passt Konfigurationsparameter und Standardconfig an, und Unterklassen erhalten die Eigenschaften und Methoden der übergeordneten Klasse durch Erbschaft und können gleichzeitig den relevanten Code entsprechend den unterschiedlichen Geschäftsanforderungen umrüsten, die im Grunde die Bedürfnisse der UI -Komponente verschiedener Ebenen und Umgebungen flexibel entsprechen können.
Kitjs umfasst grundlegende Bibliothek und UI -Bibliothek.
Grundlegende Bibliothek: Selektorfunktion, DOM -Betriebsfunktion, Animationsfunktion, Verbesserung von DOM -Ereignissen, Erhöhen Sie die Hashtree -Datenstruktur, IO -Funktion, lokale Speicherfunktion, Multithreading, Bereich usw.
Es gibt auch einen Suger.js, der das JQuery -Betriebsformat simuliert
Die UI-Bibliothek umfasst: Verbesserte Formularelemente, Pop-up-Werte, Mediplayer, Überprüfungsrahmen, Wasserfallfluss, Verknüpfung, Diashows, Kalender, hochladen Komponenten, Vorlagenmotoren usw.