Kitjs, (http://xueduany.github.com/KitJs), is a set of HTML5 front-end widget libraries I created at the end of 2011 after leaving Taobao UED. The original purpose was to focus on the use of HTML page interactive components on mobile phones. Just like Kit literally, the vision is to be a petite and practical, which can be used directly, and it can also be very convenient to do two-developed components. Later, as the project grew larger and larger and the number of components expanded, the support of PC browsers (IE6+, FF, Chrome core series, etc.) was also added, and it was no longer limited to the original mobile phone development field, and it began to officially move towards the full platform. So recently, all the original modules have been updated according to the jsdoc specifications and gradually open source for everyone to use.
Let's put a Kitjs genealogy first so that everyone can have a basic understanding of kit
How about it? Are you feeling a little dizzy when you look at it? Actually, I feel dizzy when I see it^_^. Simply put, kitjs and dojo are similar to each other, and are divided into
1. The js tool module with kit.js as the core, which is expanded around kit, similar to dojo
2. Component modules under the kit.ui namespace, similar to dijit
3. There is also a laboratory project like dojoX, which is not specified here.
In the KitJs components, there are some excellent components that I have posted in my blog before, such as
Audio player
Tabs for iphone effects
comboBox
3D photo album
calendar
LightBox
etc.
There are also some better components that are still in use or are gradually released for everyone to use. All KitJs components meet the following vision
1. Be closer to the usage experience of Chinese users
2. Be closer to the comments and documents of Chinese developers
3. Be sure to provide the existing components on the market that are not provided, but everyone needs.
4. A sufficiently fine-grained module to facilitate assembly and merge into a larger widget
In the KitJs tool module, all code is based on Class Prototype extension, and the instantiated global objects are provided for developers to use. All class names are capitalized in the first letter, and all instance objects are lowercase in the first letter. Kit starts with the $ character to facilitate distinction from other class libraries. At the same time, in the tool module, all methods are written in a function programming style, which is the same as Kissy. At the same time, Kit is provided to students who are used to developing with jQuery. Loading suger.js can use kitjs to write code like using jQuery. The method name and usage method are exactly the same as jQuery. Here is an example of a dom ready event
The code copy is 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, 40) + 'deg)'
});
}).pushStack('a.kitLightBox').each(function() {
new $kit.ui.LightBox({
el : this
}).init();
});
});
$kit.$ is the dom ready event of kitjs. The parameter $ of the anonymous method is passed to the internal closure. In this way, $ can be used directly in the internal closure instead of $kit.$ (equivalent to the $ selector of jQuery). In this way, all the code in the closure is no different from jQuery. It also facilitates the porting of JQuery code and KitJs code.
This article is the first article in the KITJS framework usage guide series. It only briefly introduces kitjs. We will learn more about this excellent front-end UI framework in the future.