JavaScript front-end UI Framework Kit guide to KITJS introduction _javascript tips

Kitjs, (Http://xueduany.github.com/KitJs), is my end of 2011, after leaving Taobao ued, my own set of HTML5 front-end widget library, the original use of Spiker machine-side HTML page interaction components used, As the literal meaning of kit, the vision is to do a petite, practical, can be used directly, can also be very convenient to do 2 development of a set of components. Later, as the project more and more, the expansion of the number of components, but also to join the PC browser (ie6+,ff,chrome core series, etc.) support, no longer limited to the original mobile phone development field, began to formally move towards the full platform. So recently also to the original all modules in accordance with the JSDoc specification updated API documentation, and gradually open source for everyone to use.

Let's have a kitjs family tree so that we have a basic understanding of kit.

How, is not dense look a little dizzy, in fact I saw also Halo ^_^, simply speaking, Kitjs and dojo similar, divided into

1. Kit.js as the core, around the kit expansion of the JS tool module, similar to Dojo

2. and Kit.ui namespaces under component modules, similar to Dijit

3. There is also a laboratory project like Dojox, which is not indicated here.

In the Kitjs component, there are some excellent components that I have posted in my blog before, such as

Audio player

The iphone Effects tab

ComboBox

3D Album

Calendar

LightBox

Wait a minute

There are still some better components to use in-house, or in the development, will gradually put out for everyone to use. All KITJS components meet the following vision

1. More close to the use of Chinese users feel

2. Comments and documentation closer to Chinese developers

3. Be sure to provide existing market components are not available, while everyone needs the functionality

4. Sufficiently fine-grained modules to facilitate assembly and merging into a larger widget

In the Kitjs tool module, all the code is based on class prototype expansion, while providing an instantiated global object for developers to use, all class names are capitalized, all instance objects are initials lowercase, kit begins with a $ character, is to facilitate separation from other class libraries. At the same time, in the tool module, all methods are written in functional programming style, which is the same as Kissy, and kit is provided to students who are accustomed to using jquery to develop Loading suger.js, like using jquery, uses Kitjs writing code, and the method name and usage are exactly the same as jquery, with a DOM ready event as an example

Copy Code code as follows:

$kit. $ (function ($) {
$ ('. Item ', $ (' #gallery ')). each (function () {
$ (this). CSS ({
Top: $kit. Math.rand ($ (' #gallery '). Innerheight ()) + ' px ',
Left: $kit. Math.rand ($ (' #gallery '). Innerwidth ()) + ' px ',
'-webkit-transform ': ' Rotate (' + $kit. Math.rand ( -40) + ' deg ') '
});
}). Pushstack (' A.kitlightbox '). each (function () {
New $kit. Ui.lightbox ({
El:this
). Init ();
});
});

$kit. $ is the DOM ready event of the Kitjs, parameter of the parameter anonymous method $, is passed the $kit.$ method to his internal closure, so that within the inner closure can be directly used to replace the $kit.$ (equivalent to jquery $ selector), So all the code in the closure is the same as jquery. It also facilitates the porting of jquery code to Kitjs code.

This article is the first in the Kitjs Framework Use Guide series, just a brief introduction to the next Kitjs, followed by a detailed understanding of this excellent front-end UI framework.