Kitjs (http://xueduany.github.com/kitjs) ist ein Satz HTML5-Front-End-Widget-Bibliotheken, die ich Ende 2011 erstellt habe, nachdem ich Taobao UED verlassen habe. Der ursprüngliche Zweck bestand darin, sich auf die Verwendung von interaktiven Komponenten der HTML -Seite auf Mobiltelefonen zu konzentrieren. Genau wie Kit buchstäblich soll die Vision ein zierlicher und praktischer Fall sein, der direkt verwendet werden kann, und es kann auch sehr bequem sein, zwei entwickelte Komponenten durchzuführen. Später, als das Projekt immer größer wurde und die Anzahl der Komponenten erweiterte, wurde auch die Unterstützung von PC -Browsern (IE6+, FF, Chrome Core -Serien usw.) hinzugefügt, und es war nicht mehr auf das ursprüngliche Bereich der Mobiltelefonentwicklung beschränkt und begann, sich offiziell in Richtung der vollen Plattform zu bewegen. In jüngster Zeit wurden alle Originalmodule gemäß den JSDOC -Spezifikationen und allmählich Open Source für alle aktualisiert.
Lassen Sie uns zuerst eine Kitjs -Genealogie setzen, damit jeder ein grundlegendes Verständnis für Kit haben kann
Wie wäre es damit? Fühlst du dich ein bisschen schwindelig, wenn du es dir ansiehst? Eigentlich bin ich schwindelig, wenn ich es sehe^_^. Einfach ausgedrückt, Kitjs und Dojo sind einander ähnlich und sind in unterteilt in
1. Das JS -Werkzeugmodul mit Kit.js als Kern, das um Kit erweitert wird, ähnlich wie bei DOJO
2. Komponentenmodule im Kit.UI -Namespace, ähnlich wie Dijit
3.. Es gibt auch ein Laborprojekt wie Dojox, das hier nicht angegeben ist.
In den Kitjs -Komponenten gibt es einige hervorragende Komponenten, die ich zuvor in meinem Blog gepostet habe, wie z.
Audiospieler
Registerkarten für iPhone -Effekte
Combobox
3D -Fotoalbum
Kalender
Lightbox
usw.
Es gibt auch einige bessere Komponenten, die noch verwendet werden oder nach und nach für alle freigegeben werden. Alle Kitjs -Komponenten erfüllen die folgende Vision
1. Sei näher an der Benutzererfahrung chinesischer Benutzer
2. Sei näher an die Kommentare und Dokumente chinesischer Entwickler
3. Stellen Sie unbedingt die vorhandenen Komponenten auf dem Markt bereit, die nicht bereitgestellt werden, aber jeder braucht.
4. Ein ausreichend feinkörniges Modul, um die Baugruppe zu erleichtern und sich zu einem größeren Widget zu verschmelzen
Im Kitjs -Toolmodul basiert der gesamte Code auf der Erweiterung der Klasse Prototype, und die sofortigen globalen Objekte werden für Entwickler zur Verfügung gestellt. Alle Klassennamen werden im ersten Buchstaben aktiviert, und alle Instanzobjekte sind im ersten Buchstaben Kleinbuchstaben. Kit beginnt mit dem $ Charakter, um die Unterscheidung von anderen Klassenbibliotheken zu erleichtern. Gleichzeitig werden im Werkzeugmodul alle Methoden in einem Funktionsprogrammierstil geschrieben, der mit Kissy identisch ist. Gleichzeitig wird Kit an Schüler zur Verfügung gestellt, die es gewohnt sind, sich mit JQuery zu entwickeln. Das Laden von suger.js kann mit KitJs Code wie JQuery schreiben. Die Methodenname und die Nutzungsmethode sind genau gleich wie JQuery. Hier ist ein Beispiel für ein DOM -Ready -Ereignis
Die Codekopie lautet wie folgt:
$ kit. $ (Funktion ($) {
$ ('. item', $ ('#Galerie')). Jede (function () {
$ (this) .css ({{
Oben: $ kit.math.rand ($ ('#Galerie'). InnerHeight ()) + 'PX',,
Links: $ kit.math.rand ($ ('#Galerie'). Innerwidth ()) + 'PX',,
'-webkit-transform': 'rotate (' + $ kit.math.rand (-40, 40) + 'Deg)' '
});
}). pushstack ('a.kitlightbox'). Jede (function () {
New $ kit.ui.Lightbox ({{
EL: Das
}). init ();
});
});
$ kit. $ ist das DOM -Ready -Ereignis von Kitjs. Der Parameter $ der anonymen Methode wird an den internen Verschluss übergeben. Auf diese Weise kann $ direkt im internen Verschluss anstelle von $ kit. $ Verwendet werden (entspricht dem $ Selector von JQuery). Auf diese Weise unterscheidet sich der gesamte Code in der Schließung nicht von JQuery. Es erleichtert auch die Portierung von JQuery Code und KitJS -Code.
Dieser Artikel ist der erste Artikel in der Kitjs Framework Usage Guide -Serie. Es führt nur kurz Kitjs ein. Wir werden in Zukunft mehr über diesen hervorragenden Front-End-UI-Framework erfahren.