Introduction to kissy
What is kISSY?
KISSY is an open source javascript project with its main body being a front-end UI development framework, namely KissyUI. The kissy described in this article only refers to the language and framework design ideas in kissy.js in its kernel part. The open source website of the KISSY project is: http://kissyteam.github.com/
How to use kissy?
Although we proposed some new concepts and framework models during the process of KissyUI kernelization, in fact, we have not changed any usage conventions of KissyUI. From the code point of view, there are no changes in other modules after kissy.js and lang.js. Therefore, if you only use kissy as a UI system, you can refer to the above open source website. The existing KissyUI documents are completely valid, and KissyUI itself is also an excellent and convenient Web UI framework. However, the kissy system's capabilities in mode-oriented mergers and organization have been greatly enhanced.
After downloading the source code, you can see that the kissy-min.js file size after the entire code is compressed is 42kb (jQuery-min is 71kb, dojo core is 88kb)
Check the official website documentation and found that the kissy project is divided into 9 parts
The core structure of kissy.js can be divided into
The base class is kissy, and the following methods are provided
(I would like to give the developer a little suggestion. When I first read this document, I always thought that to access the add method, I needed to declare such as kissy.kissy.add. Maybe I read too much of the ext/dojo documentation. Seeing the documentation of the organizational method of kissy makes me unable to see at a glance and know the specific method usage. I hope it can be improved...)
Understand the core API
Like all js frameworks, kissy provides the configuration information for the kissy.Config object to implement the initial load of the kissy framework.
and a DocumentReady event, kissy.ready(fn) method,
(The developer did not write this here. The execution order of multiple events registered by ready. By checking the source code, you can know that the events registered by ready are placed in a list. When executing, they are executed according to the first-in-first-out principle)
There is also a method to monitor elements to execute when they are available.
But I always feel that the immediate execution here is ambiguity. The principle is generally a timer, delay scanning, which cannot be considered immediate
Encapsulates a simple debug output, implements a log and error method, and uses the browser's console
In order to manage components, we implement the namespace, object inheritance, object member copy (mix/merge), prototype copy (argument), object declaration (app) and other methods.