JavaScript front-end UI Framework kit using the Guide's Kitjs dialog box component _javascript tips

As a UI library, kit I do not intend to let everyone to learn my kit's core, memorize my API, this kind of follow the way of learning a little meaningless, today jquery hot, we are learning JQ, tomorrow Seajs fire, everyone to fry seajs, so I kitjs inside , specifically for JQ users prepared a grammar sugar (suger.js), completely simulate the JQ API, in addition to the implementation, interface is the same, but also convenient for everyone directly copycat transformation kit components. Of course, as a purely technical fan, it is far more interesting to understand how a technology is achieved, than copycat more ^_^. Of course, if you're looking for a KPI, or boss of the boss of the project bonus, direct copycat plagiarism kit component code, complete your KPI, I do not mind such behavior, as long as you drink water do not forget to dig well people, in and colleagues blowing water, also can promote a kitjs, I am very grateful to you. At the same time, Kit is also a very young library, out of constant development, there are some bugs and browser compatibility issues, unavoidable, I am a person also limited energy, in this war-torn era, welcome more like-minded base friends together to make him big, common progress.

At the same time, today released a Kitjs dialog box component, demo address for http://xueduany.github.com/KitJs/KitJs/demo/Dialog/demo.html

A Kit Directory format

In the Kitjs, Kit.js is a core file that contains some of the most commonly used DOM as well as object, inherited operations, under the same level of functionality to expand a number of string.js,math.js, and so on to achieve a specific direction of the function extension. Each individual JS file contains a constructor for a class and an instance of a global object,

Take Kit.js as an example, including the $kit class, and an instance of the $kit class $kit (starting with $ to avoid conflicts with commonly used variables),

All other types are linked in $kit, and $kit instance instances, such as Math.js, contain $kit.math classes, and $kit.math instances to ensure that only two of the $kit and $kit are contaminated in the global scope. At the same time, in Kit.js, we define a namespace called $kit.ui, in the physical directory, to kit.js the same level of the widget directory, a word lined up, a number of first-letter capital of the Directory

All directories under the widget directory are Kitjs component directories, each of which contains only one class constructor (not an instance) of a separate component, and can be compatible with the COMMONJS module pattern (which can conform to the COMMONJS modules/1.1 specification, As well as AMD transformation, specific ways to change the way later will be mentioned in detail)

(ii) Kit component Default Code template, comments conform to JSDOC specification

We use the dialog box component for example, each component is similar to the following

The first is JSDoc's annotation, @class what class it is, @require xxx.js, which components to declare

(iii) Constructors and initialization methods

Each class is defined as a constructor by the standard function (config) {}, and it should be noted that each KITJS component's constructor defaults to a config parameter, as input to the personalization configuration.

At the same time in the constructor of the class, there is a static member, a Defaultconfig object, that holds the default configuration for the Kitjs component

In the use of KITJS components, first is the need to pass the new instance way new $ Kit.ui.Dialog.YesOrNo, Initializes a new instance object, this is only initializes a JS Component object, also does not have the HTML, needs to execute the Init method, creates the HTML, joins the doc, is equal to the soul pouring flesh and blood ^_^.

Perhaps some alumni asked, why not put the Init method directly in the constructor, but to separate out separately?

1 is because the parent class needs to be instantiated at the time of inheritance. When a subclass inherits from the parent class, the prototype object of the subclass is set to the new instance object of the parent class, and if the initialization method of Init is placed inside the constructor, the HTML of the parent class is executed directly, and the instance Generate garbage Code,

2 because of the lazy loading, the HTML code needs to be executed at the right time, rather than immediately when the initialization is started.

So the default way to use the Kitjs component is

After instantiation, executes the Init method (The Init method returns the current Component object, with return code 7)

The above figure shows that all API methods in dialog are hung on the prototype, implemented through a prototype extension and passed to the instance object

Observe the constructor code for the $kit.ui.dialog.yesorno component,

Four The inheritance of Kitjs

He affirmed the inheritance relationship with the $kit.ui.dialog object through the $kit.inherit method, there will be students to ask, why to inherit in the constructor, rather than directly written in the outside?

The reason is:

1.kitjs is a prototype-based maintenance inheritance relationship

2. To use a KITJS component, you must instantiate the Component object, each of which is created through the constructor by means of the new instance

So I put the execution of the inheritance relationship in the constructor of the code, so that when instantiating a new component, it will go through the inheritance of the constructor of the current component to the members of his parent class and the method.

When a subclass needs to modify the method of a parent class, it is only necessary to override the parent class's inheritance method by defining an algorithm of the same name in the prototype of the subclass.

In naming, Kitjs followed, subclass continuation of the class name of the parent class namespace, has been linked, as the above figure $kit.ui.dialog, $kit. Ui.Dialog.YesOrNo

The implementation of Kitjs inheritance is also simple

Instantiate a parent class object, copy all members of the parent class to the subclass's prototype, and then reset the constructor of the subclass's prototype to a subclass constructor, and then hang a link to the subclass constructor, pointing to the parent class, by the $kit.inherit method, in the subclass $ In the Kit.ui.Dialog.YesOrNo instantiation process, you can inherit a member that does not exist for all subclasses of the parent class $kit.ui.dialog, and implements a static language-like inheritance

(v) config parameters , HTML and CSS coupling disassembly/skin change?

The kit's Component Builder is accustomed to passing in a map-type parameter, never personalizing the component, and starts initializing it automatically after overwriting the default defaultconfig with the user-submitted config parameter when the kit component is initialized.

For any one component, there is no way to get rid of the changes in the HTML structure and the changes in CSS styles

Kit decomposes This coupling into the config parameter configuration,

First, using HTML template Technology, Kit advocates using the $kit.newhtml method to eradicate HTML strings directly, generating HTML DOM inserts into the document stream,

So we extract the approximate HTML content of the component, encapsulate it into an HTML string template, and store it in the defaultconfig of the component, and if the user needs to modify the HTML template, use the custom config when initializing, Overwrite the template field in the default Defaultconfig,

On the coupling of HTML templates and CSS, Kit used a trick to break down the classname using the JS template

Replace the HTML in config with the xxx in config by $kit.tpl in the Init method (${xxx})

And all the styles are set inside the CSS,

If you have more than one set of skin needs to switch, you can choose to initialize, through the config specified ${cls} corresponding to the actual classname to modify the template to achieve the classname, to achieve the effect of skin change.

(vi) Summary

Basically, through the code analysis of the $kit.ui.dialog.yesorno component, we have a general understanding of the Kitjs component implementation structure. In fact, design a page component is not difficult, but the design of a can adapt to various requirements, in various occasions, can be very rapid deformation, and adapt to development, is a difficult requirement. Kit, by splitting the HTML template and CSS, customizing the config parameter with the Defaultconfig, the subclass inherits the attributes and methods of the parent class, and reconstructs the relevant code according to different business needs, and can basically flexibly meet various levels, Business UI component requirements in a variety of environments.

Kitjs includes the basic and UI libraries,
Basic Library: Selector function, Dom operation function, animation function, enhanced DOM event, increased hashtree data structure, IO function, local storage function, multithreading, range, etc.
There's also a suger.js that simulates the jquery operation format.
The UI Library includes: Enhanced form elements, pop-up layers, media players, validation frameworks, waterfall streams, linkage, slides, calendars, upload components, template engines, etc.