Javascript-Front-End-UI-Framework Kit-Nutzungshandbuch – Einführung in die Fähigkeiten von Kitjs_javascript

Kitjs (http://xueduany.github.com/KitJs) ist eine Reihe von HTML5-Front-End-Widget-Bibliotheken, die ich Ende 2011 selbst erstellt habe, nachdem ich Taobao UED verlassen hatte. Der ursprüngliche Zweck bestand darin, mich zu konzentrieren Die Verwendung von Komponenten entspricht der wörtlichen Bedeutung von Kit. Die Vision besteht darin, eine Reihe von Komponenten zu erstellen, die klein und praktisch sind, direkt verwendet werden können und auch problemlos für die Sekundärentwicklung verwendet werden können. Später, als das Projekt immer größer wurde, wurde die Anzahl der Komponenten erweitert und auch die Unterstützung für PC-Browser (IE6, FF, Chrome Core-Serie usw.) wurde nicht mehr auf den ursprünglichen Bereich der Mobiltelefonentwicklung beschränkt. und begann offiziell mit der Umstellung auf die vollständige Plattform. Daher wurden kürzlich alle Originalmodule mit API-Dokumenten gemäß den jsdoc-Spezifikationen aktualisiert und werden nach und nach als Open Source für jedermann zugänglich gemacht.

Lassen Sie uns zunächst einen Kitjs-Stammbaum erstellen, um jedem ein grundlegendes Verständnis von Kit zu vermitteln

Wie wäre es? Ist dir ein bisschen schwindelig, nachdem du so viele Dinge gesehen hast? >

1. Kit.js ist der Kern und ein um Kit erweitertes JS-Toolmodul, ähnlich wie Dojo

2. Komponentenmodule unter dem Namensraum kit.ui, ähnlich wie dijit

3. Es gibt auch ein Laborprojekt ähnlich wie dojoX, das hier nicht gekennzeichnet ist.

Unter den Komponenten von KitJs gibt es einige hervorragende Komponenten, die ich bereits in meinem Blog veröffentlicht habe, wie zum Beispiel

Audio-Player

Registerkarte für iPhone-Effekte

ComboBox

3D-Fotoalbum

Kalender

LightBox

Warten

Es gibt auch einige weitere hervorragende Komponenten, die noch intern verwendet werden oder sich in der Entwicklung befinden und nach und nach für alle freigegeben werden. Alle KitJs-Komponenten erfüllen die folgende Vision

1. Näher an der Erfahrung chinesischer Benutzer

2. Kommentare und Dokumentation, die für chinesische Entwickler relevanter sind

3. Stellen Sie sicher, dass Sie Funktionen bereitstellen, die jeder benötigt und die nicht von vorhandenen Komponenten auf dem Markt bereitgestellt werden

4. Module, die feinkörnig genug sind, um den Zusammenbau und die Zusammenführung zu einem größeren Widget zu erleichtern

Im KitJs-Toolmodul werden alle Codes basierend auf dem Klassenprototyp erweitert und den Entwicklern werden instanziierte globale Objekte zur Verfügung gestellt. Alle Klassennamen werden großgeschrieben und alle Instanzobjekte werden in Kleinbuchstaben geschrieben, und Kit beginnt mit das $-Zeichen, um es leicht von anderen Klassenbibliotheken zu unterscheiden. Gleichzeitig sind im Tool-Modul alle Methoden im funktionalen Programmierstil geschrieben, der dem von Kissy entspricht. Gleichzeitig wird Kit für Studenten bereitgestellt, die an die Entwicklung mit jQuery gewöhnt sind. und Sie können es genauso verwenden wie jQuery. Die Methodennamen und Verwendungsmethoden sind genau die gleichen wie bei jQuery. Hier ist ein dom-ready-Ereignis als Beispiel

Code kopieren Der Code lautet wie folgt:

$kit.$(function($) {

$('.item', $('#gallery')).each(function() {
$(this).css({
oben: $kit.math.rand($('#gallery').innerHeight()) 'px',
links: $kit.math.rand($('#gallery').innerWidth()) 'px',
'-webkit-transform': 'rotate(' $kit.math.rand(-40, 40) 'deg)'
});
}).pushStack('a.kitLightBox').each(function() {
neues $kit.ui.LightBox({
el: das
}).init();
});
});

$kit.$ ist das dom-ready-Ereignis von kitjs. Der Parameter $ der Parameter-anonymen Methode übergibt die Methode $kit.$ an ihren internen Abschluss, sodass Sie im internen Abschluss direkt $ anstelle von $kit verwenden können .$ (entspricht dem $-Selektor von jQuery), sodass der gesamte Code innerhalb des Abschlusses mit jQuery identisch ist. Es erleichtert auch die gegenseitige Transplantation von JQuery-Code und KitJs-Code.

Dieser Artikel ist der erste in der Reihe der KITJS-Framework-Nutzungsanleitungen. Er stellt kitjs nur kurz vor. Später werden wir mehr über dieses hervorragende Front-End-UI-Framework erfahren.