Kit ist eine UI-Bibliothek. Ich beabsichtige nicht, dass jeder den Kern meines Kits lernt und sich meine API einprägt. Heute ist jQuery überhaupt angesagt und jeder lernt jQ ., SeaJs werden morgen beliebt sein und jeder wird über SeaJs spekulieren, daher habe ich in KitJs speziell für jQ-Benutzer einen Syntaxzucker (Suger.js) vorbereitet, der die API von jQ vollständig simuliert Das Gleiche ist für jeden praktisch. Verwenden Sie die Komponenten des Kits direkt, um es umzuwandeln. Als reiner Technikfan ist es natürlich viel interessanter, ein tiefes Verständnis dafür zu haben, wie eine Technologie umgesetzt wird, als sie als Doktrin zu nutzen ^_^. Wenn Sie den Projektbonus des Chefs Ihres Chefs verwenden, um Kit's Komponentencode zu plagiieren und Ihren KPI aus Rücksicht auf den KPI zu vervollständigen, macht mir ein solches Verhalten natürlich nichts aus, solange Sie Wasser trinken und den Brunnengräber nicht vergessen . Ich wäre Ihnen sehr dankbar, wenn Sie KitJs bewerben könnten, wenn Sie Spaß mit Ihren Kollegen haben. Gleichzeitig ist Kit auch eine sehr junge Bibliothek. Aufgrund der kontinuierlichen Entwicklung gibt es einige Fehler und Probleme mit der Browserkompatibilität. In dieser Zeit der Front-End-Kriege gibt es zwangsläufig mehr Gleichgesinnte sind willkommen. Gemeinsam mit seinen schwulen Freunden wird er erwachsen und gemeinsam Fortschritte machen.
Gleichzeitig wurde heute eine kitjs-Dialogkomponente veröffentlicht. Die Demoadresse lautet http://xueduany.github.com/KitJs/KitJs/demo/Dialog/demo.html
(1) Kit-Verzeichnisformat
Um auf das Thema zurückzukommen: In KitJs existiert kit.js als Kerndatei. Es enthält einige der am häufigsten verwendeten Dom- und Objekt-Vorgänge sowie eine Reihe von Zeichenfolgen, die entsprechend den funktionalen Unterteilungen in erweitert werden Das gleiche Verzeichnis wie js, math.js usw. ist darauf ausgelegt, die Erweiterung von Funktionen in bestimmte Richtungen zu realisieren. Jede unabhängige js-Datei enthält einen Klassenkonstruktor und eine Instanz des globalen Objekts
Am Beispiel von kit.js enthält es die Klasse $Kit und die Instanz $kit der Klasse $Kit (beginnend mit $, um Konflikte mit häufig verwendeten Variablen zu vermeiden),
Andere Typen hängen in Form von Links an $Kit und $kit-Instanzen, z. B. math.js, das die Klasse $Kit.Math und $kit.math-Instanzen enthält, wodurch sichergestellt wird, dass der globale Bereich nur vorhanden ist zwei Verschmutzungen, $Kit und $kit. Gleichzeitig haben wir in kit.js einen Namensraum namens $kit.ui definiert. Im physischen Verzeichnis gibt es Widget-Verzeichnisse auf derselben Ebene wie kit.js, in einer Reihe mit mehreren Verzeichnissen, deren Anfangsbuchstabe
(2) Standardcodevorlage für Kit-Komponenten, Kommentare entsprechen den jsdoc-Spezifikationen
Nehmen wir die Dialogkomponente als Beispiel. Jede Komponente ähnelt der folgenden
(3) Konstruktor und Initialisierungsmethode
Jede Klasse definiert einen Konstruktor in der Standardfunktion (config){}. Hierbei ist zu beachten, dass der Konstruktor jeder kitjs-Komponente standardmäßig einen Konfigurationsparameter als Eingabe für die personalisierte Konfiguration reserviertGleichzeitig gibt es im Konstruktor der Klasse ein statisches Mitglied, das defaultConfig-Objekt, das zum Speichern der Standardkonfiguration der kitjs-Komponente verwendet wird
Wenn Sie kitjs-Komponenten verwenden, müssen Sie zunächst ein neues Instanzobjekt über die neue Instanzmethode new $kit.ui.Dialog.YesOrNo initialisieren. Dies ist lediglich die Initialisierung eines js-Komponentenobjekts, das ist nicht erforderlich Führen Sie die Init-Methode aus, erstellen Sie HTML und fügen Sie es dem Dokument hinzu, was dem Ausgießen von Fleisch und Blut auf die Seele entspricht^_^.
Einige Schüler fragen sich vielleicht: Warum nicht die Init-Methode direkt in den Konstruktor einfügen, sondern separat?
1 liegt daran, dass die übergeordnete Klasse während der Vererbung instanziiert werden muss. Wenn eine Unterklasse von der übergeordneten Klasse erbt, wird das Prototypobjekt der Unterklasse auf die neue Instanz der übergeordneten Klasse gesetzt Die Initialisierungsmethode von init führt dazu, dass der HTML-Code der übergeordneten Klasse direkt ausgeführt wird und Müllcode generiert wird,
2 liegt daran, dass der HTML-Code angesichts des verzögerten Ladens zum richtigen Zeitpunkt ausgeführt werden muss und nicht 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 aus der obigen Abbildung ersichtlich ist, hängen alle API-Methoden im Dialog am Prototyp, und die Vererbung wird durch die Prototypenerweiterung implementiert und an das Instanzobjekt übergeben
Beobachten Sie den Konstruktorcode der Komponente $kit.ui.Dialog.YesOrNo,
(4) Vererbung von KitJs
Er deklariert die Vererbungsbeziehung mit dem $kit.ui.Dialog-Objekt über die Methode $kit.inherit. Einige Studenten hier werden fragen: Warum sollten wir im Konstruktor erben, anstatt es direkt außerhalb zu schreiben?
Der Grund ist:
1.kitjs ist ein Tool, das Vererbungsbeziehungen basierend auf Prototypen verwaltet
2. Um kitjs-Komponenten zu verwenden, müssen Sie das Komponentenobjekt instanziieren. Jede Komponente wird durch den Konstruktor durch eine neue Instanz erstellt
Deshalb habe ich die Ausführung der Vererbungsbeziehung in den Konstruktor des Codes eingefügt, sodass bei der Instanziierung einer neuen Komponente die Vererbungsmethode ihrer übergeordneten Klasse Schritt für Schritt entlang des Konstruktors der aktuellen Komponentenmitglieder erbt und Methoden.Wenn eine Unterklasse die Methode der übergeordneten Klasse ändern muss, muss sie lediglich eine Methode mit demselben Namen im Prototyp der Unterklasse definieren, um die geerbte Methode der übergeordneten Klasse zu überschreiben.
Die Vererbungsimplementierung von kitjs ist ebenfalls sehr einfach
(5) Konfigurationsparameter , Disassemblierung/Skinning von HTML und CSS koppeln?
Der Komponentenkonstruktor des Kits wird verwendet, um einen Parameter vom Typ „Map“ zu übergeben, um die Komponente zu personalisieren. Wenn die Kit-Komponente initialisiert wird, überschreibt sie automatisch die Standardkonfiguration „defaultConfig“ mit den vom Benutzer übermittelten Konfigurationsparametern und startet dann die Initialisierung.Für jede Komponente sind Änderungen in der HTML-Struktur und den CSS-Stilen unvermeidlich
kit zerlegt diese Kopplung in der Parameterkonfiguration von config,
Die erste besteht darin, die HTML-Template-Technologie zu verwenden, indem die Methode $kit.newHTML verwendet wird, um HTML-Strings direkt zu entfernen, HTML-DOM zu generieren und in den Dokumentstream einzufügen,
Also extrahieren wir den ungefähren HTML-Inhalt der Komponente, kapseln ihn in eine HTML-String-Vorlage und speichern ihn in der Standardkonfiguration der Komponente. Wenn der Benutzer die HTML-Vorlage ändern muss, kann er oder sie eine benutzerdefinierte Konfiguration verwenden während der Initialisierung, um die Vorlage im Standardfeld defaultConfig zu überschreiben,
Bei der gekoppelten Zerlegung von HTML-Vorlage und CSS verwendet Kit einen Trick, der darin besteht, den Klassennamen mithilfe der JS-Vorlage zu zerlegen
Wenn mehrere Sätze von Skins gewechselt werden müssen, können Sie den Klassennamen der Vorlage ändern, indem Sie während der Initialisierung den tatsächlichen Klassennamen angeben, der ${cls} entspricht, über config, um den Effekt der Skin-Änderung zu erzielen.
(6) Zusammenfassung
Grundsätzlich haben wir durch die Codeanalyse der Komponente $kit.ui.Dialog.YesOrNo ein allgemeines Verständnis der Komponentenimplementierungsstruktur von kitjs. Tatsächlich ist es nicht schwierig, eine Seitenkomponente zu entwerfen, aber es ist eine schwierige Anforderung, eine zu entwerfen, die sich an verschiedene Anforderungen anpassen lässt, sich in verschiedenen Situationen schnell verformen lässt und sich an die Entwicklung anpasst. Kit teilt HTML-Vorlagen und CSS auf und arbeitet mit benutzerdefinierten Konfigurationsparametern und defaultConfig zusammen. Unterklassen erhalten die Attribute und Methoden der übergeordneten Klasse und können gleichzeitig relevante Codes entsprechend unterschiedlicher Geschäftsanforderungen rekonstruieren die Anforderungen von Business-UI-Komponenten auf verschiedenen Ebenen und in verschiedenen Umgebungen.KitJs umfasst Basisbibliotheken und UI-Bibliotheken,
Grundbibliothek: Auswahlfunktion, Dom-Operationsfunktion, Animationsfunktion, erweitertes Dom-Ereignis, hinzugefügte Hashtree-Datenstruktur, IO-Funktion, lokale Speicherfunktion, Multithreading, Bereich usw.
Es gibt auch suger.js
, das das JQuery-Operationsformat simuliert
Die UI-Bibliothek umfasst: erweiterte Formularelemente, Popup-Ebenen, Mediaplayer, Validierungsframeworks, Wasserfallflüsse, Verknüpfungen, Diashows, Kalender, Upload-Komponenten, Vorlagen-Engines usw.
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
Einführung in Laravel-Komponenten
Eclipse-Tutorial
Drei Hauptmerkmale von Java
So erhalten Sie die Seriennummer einer physischen Festplatte unter Windows
Was ist es
Welche Software ist ae
So lösen Sie die Ausnahme „IllegalArgument'.
