Kitjs, (http://xueduany.github.com/kitjs), es un conjunto de bibliotecas de widgets front-end HTML5 que creé a fines de 2011 después de dejar Taobao UED. El propósito original era centrarse en el uso de componentes interactivos de la página HTML en teléfonos móviles. Al igual que el kit literalmente, la visión es ser un pequeño y práctico, que se puede usar directamente, y también puede ser muy conveniente hacer componentes de dos desarrollados. Más tarde, a medida que el proyecto se hizo cada vez más y se expandió el número de componentes, también se agregó el soporte de los navegadores de PC (IE6+, FF, Chrome Core Series, etc.), y ya no se limitaba al campo original de desarrollo de teléfonos móviles, y comenzó a avanzar oficialmente hacia la plataforma completa. Así que recientemente, todos los módulos originales se han actualizado de acuerdo con las especificaciones JSDOC y el código abierto gradualmente para que todos los usen.
Ponamos primero una genealogía de kitjs para que todos puedan tener una comprensión básica del kit
¿Qué tal? ¿Te sientes un poco mareado cuando lo miras? En realidad, me siento mareado cuando lo veo^_^. En pocas palabras, los kitjs y el dojo son similares entre sí y se dividen en
1. El módulo de herramienta JS con kit.js como el núcleo, que se expande alrededor del kit, similar al dojo
2. Módulos de componentes bajo el kit.UI Namespace, similar a Dijit
3. También hay un proyecto de laboratorio como Dojox, que no se especifica aquí.
En los componentes KITJS, hay algunos componentes excelentes que he publicado en mi blog antes, como
Reproductor de audio
Pestañas para efectos de iPhone
Combobox
Álbum de fotos 3d
calendario
Caja de luz
etc.
También hay algunos componentes mejores que todavía están en uso o se lanzan gradualmente para que todos los usen. Todos los componentes KITJS cumplen con la siguiente visión
1. Esté más cerca de la experiencia de usuario de los usuarios chinos
2. Esté más cerca de los comentarios y documentos de los desarrolladores chinos
3. Asegúrese de proporcionar los componentes existentes en el mercado que no se proporcionan, pero todos necesitan.
4. Un módulo suficientemente fino para facilitar el ensamblaje y fusionarse en un widget más grande
En el módulo de herramienta KITJS, todo el código se basa en la extensión del prototipo de clase, y los objetos globales instanciados se proporcionan para que los desarrolladores los usen. Todos los nombres de clase están capitalizados en la primera letra, y todos los objetos de instancia son minúsculas en la primera letra. El kit comienza con el personaje $ para facilitar la distinción de otras bibliotecas de clase. Al mismo tiempo, en el módulo de herramienta, todos los métodos se escriben en un estilo de programación de funciones, que es lo mismo que Kissy. Al mismo tiempo, se proporciona Kit a los estudiantes que están acostumbrados a desarrollar con jQuery. Cargando suger.js puede usar kitjs para escribir código como usar jQuery. El nombre del método y el método de uso son exactamente los mismos que jQuery. Aquí hay un ejemplo de un evento de Dom Ready
La copia del código es la siguiente:
$ kit. $ (function ($) {
$ ('. Artem', $ ('#Gallery')). Cada (function () {
$ (esto) .css ({
Top: $ kit.math.rand ($ ('#galería'). innerheight ()) + 'px',
Izquierda: $ kit.math.rand ($ ('#galería'). InnerWidth ()) + 'Px',
'-webkit-transform': 'Rotate (' + $ kit.math.rand (-40, 40) + 'deg)'
});
}). PushStack ('a.kitlightbox'). Cada (function () {
nuevo $ kit.ui.lightbox ({
El: esto
}). init ();
});
});
$ kit. $ es el evento DOM Ready de Kitjs. El parámetro $ del método anónimo se pasa al cierre interno. De esta manera, $ se puede usar directamente en el cierre interno en lugar de $ kit. $ (Equivalente al $ selector de jQuery). De esta manera, todo el código en el cierre no es diferente de jQuery. También facilita la portada del código jQuery y el código KITJS.
Este artículo es el primer artículo de la serie KITJS Framework Usage Guide. Solo presenta brevemente kitjs. Aprenderemos más sobre este excelente marco de UI front-end en el futuro.