Kitjs, (http://xuduany.github.com/kitjs), est un ensemble de bibliothèques de widgets frontaux HTML5 que j'ai créées à la fin de 2011 après avoir quitté Taobao UED. L'objectif d'origine était de se concentrer sur l'utilisation des composants interactifs de la page HTML sur les téléphones mobiles. Tout comme le kit littéralement, la vision est d'être un petit et pratique, qui peut être utilisé directement, et il peut également être très pratique de faire deux composants développés. Plus tard, au fur et à mesure que le projet devenait de plus en plus grand et que le nombre de composants s'est développé, le support des navigateurs PC (IE6 +, FF, Chrome Core Series, etc.) a également été ajouté, et il ne se limitait plus au champ de développement de téléphone mobile d'origine, et il a commencé à se déplacer officiellement vers la plate-forme complète. Donc, récemment, tous les modules d'origine ont été mis à jour selon les spécifications JSDOC et progressivement open source pour que tout le monde puisse utiliser.
Mettons d'abord une généalogie KitJS afin que tout le monde puisse avoir une compréhension de base du kit
Et ça? Vous sentez-vous un peu étourdi quand vous le regardez? En fait, je me sens étourdi quand je le vois ^ _ ^. En termes simples, les kitjs et les dojo sont similaires les uns aux autres et sont divisés en
1. Le module d'outil JS avec kit.js comme noyau, qui est étendu autour de Kit, similaire à Dojo
2. Modules de composants sous l'espace de noms Kit.UI, similaire à Dijit
3. Il existe également un projet de laboratoire comme Dojox, qui n'est pas spécifié ici.
Dans les composants KitJS, il y a d'excellents composants que j'ai publiés dans mon blog auparavant, comme
Joueur audio
Onglets pour les effets de l'iPhone
peigne
Album photo 3D
calendrier
Boîte de lumière
etc.
Il existe également de meilleurs composants qui sont encore utilisés ou qui sont progressivement libérés pour que tout le monde puisse utiliser. Tous les composants KitJS répondent à la vision suivante
1. Soyez plus proche de l'expérience utilisateur des utilisateurs chinois
2. Soyez plus proche des commentaires et documents des développeurs chinois
3. Assurez-vous de fournir les composants existants sur le marché qui ne sont pas fournis, mais tout le monde a besoin.
4. Un module à grain suffisamment fin pour faciliter l'assemblage et fusionner dans un widget plus grand
Dans le module d'outil KitJS, tout le code est basé sur l'extension du prototype de classe et les objets globaux instanciés sont fournis aux développeurs à utiliser. Tous les noms de classe sont capitalisés dans la première lettre, et tous les objets d'instance sont minuscules dans la première lettre. Le kit commence par le personnage $ pour faciliter la distinction des autres bibliothèques de classe. Dans le même temps, dans le module d'outils, toutes les méthodes sont écrites dans un style de programmation de fonction, qui est le même que Kissy. Dans le même temps, Kit est fourni aux étudiants habitués à se développer avec jQuery. Le chargement de suger.js peut utiliser des kitjs pour écrire du code comme l'utilisation de jQuery. Le nom de la méthode et la méthode d'utilisation sont exactement les mêmes que jQuery. Voici un exemple d'un événement Dom Ready
La copie de code est la suivante:
$ kit. $ (fonction ($) {
$ ('. item', $ ('# galerie')). Chaque (fonction () {
$ (this) .css ({
TOP: $ kit.math.rand ($ ('# galerie'). innerheight ()) + 'px',
gauche: $ kit.math.rand ($ ('# galerie'). innerwidth ()) + 'px',
'-webkit-transform': 'rotation (' + $ kit.math.rand (-40, 40) + 'deg)'
});
}). pushstack ('a.kitlightbox'). chaque (fonction () {
nouveau $ kit.ui.lightbox ({
El: Ceci
}). init ();
});
});
$ kit. $ est l'événement Dom Ready de KitJS. Le paramètre $ de la méthode anonyme est transmis à la fermeture interne. De cette façon, $ peut être utilisé directement dans la fermeture interne au lieu de $ kit. $ (Équivalent au sélecteur $ de jQuery). De cette façon, tout le code de la fermeture n'est pas différent de jQuery. Il facilite également le portage du code jQuery et du code KITJS.
Cet article est le premier article de la série de guides d'utilisation du framework KITJS. Il ne présente que brièvement KitJS. Nous en apprendrons plus sur cet excellent cadre d'interface utilisateur frontal à l'avenir.