Don't let people on earth know what technology they don't understand. Let's take a look! -Chinese front-end UI framework kit (2) code parsing of kitjs Components

The previous blog has received a lot of attention from everyone. Thank you for your support. The so-called dry goods is also my vision, that is, to let everyone see the principle of implementation, use it in their own projects, and cheat the boss's bonus, _ ^. As a UI library, Kit has no intention of letting everyone learn about its core and familiarized themselves with my API. This follow-up learning method has no meaning at all. jquery is hot today, everyone will learn JQ, and seajs will be on fire tomorrow, and everyone will stir up seajs. So in kitjs, I specially prepared a syntax sugar (suger) for JQ users. JS). It completely simulates JQ APIs. In addition to implementation and interfaces, it is also convenient for you to directly pick up the kit components. Of course, as a pure technology fan, an in-depth understanding of how a technology is implemented is far more interesting than what comes with it. Of course, if you think about KPIs, or the boss's project bonus, you can just copy the kit components.CodeTo complete your KPI, I do not mind this kind of behavior. As long as you do not forget to dig a well person when drinking water, you can also promote a kitjs when blowing water with your colleagues, I am very grateful to you. At the same time, Kit is also a very young library. Due to the constant development, there are some bugs and browser compatibility problems, which are inevitable. I am limited by myself. In this age of front-end battles, more like-minded friends are welcome to make progress together.

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

 

(1) Kit directory format

Back to the truth, in kitjs, Kit. JS is the core file. It contains some of the most commonly used DOM and object, inherited operations, and a batch of strings are extended according to the functional division under the same level directory. JS, math. JS and so on are designed to achieve function expansion in specific directions. Each Independent JS file contains a class constructor and an instance of a global object,

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

Other types are linked to $ kit and $ kit instance, such as math. JS, including $ kit. math class and $ kit. math instance to ensure that only $ kit and $ kit are contaminated globally. At the same time. JS, we define a namespace called $ kit. UI, in the physical directory, use kit. the widget directory at the same level of JS. It is a one-character, multiple directories with uppercase letters

All the directories in the widget directory are kitjs component directories. Each Independent JS file only contains the class Constructor (not an instance) of an independent component ), at the same time, it can be compatible with the module mode of commonjs (it can comply with the commles/1.1 specification of commonjs and the amd mode transformation. The specific transformation method will be mentioned in detail later)

(2) Default Code Template for kit components. The comments comply with the jsdoc specifications.

Let's take the dialog box component as an example. Each component is similar to the following

The first is the comments of jsdoc. @ Class declares what class it is, @ require XXX. js declares which components it depends on

(3) constructor and Initialization Method

Each class is defined as a constructor in the standard function (config) {} mode. Note that the constructor of each kitjs component reserves a Config parameter by default, as the input of personalized configuration,

At the same time, there is a static member in the class constructor, The defaultconfig object, which is used to store the default configuration of the kitjs component.

When using the kitjs component, you must first use the new instance method new $ kit. UI. dialog. yesorno: initialize a new instance object. This is only a JS Component Object initialized, and there is no html. You need to execute the init method, Create HTML, and add it to the doc, add flesh and blood to the soul.

 

Some people may ask why not put the init method directly in the constructor, but separately?

1. It is because the parent class needs to be instantiated during inheritance. When the Child class inherits from the parent class, the prototype object of the Child class is set as the new instance object of the new instance of the parent class, if the init initialization method is put in the constructor, the HTML of the parent class will be executed directly and spam code will be generated,

2. In the case of lazy loading, HTML code must be executed at the appropriate time, rather than immediately executed at the first initialization.

So the default method for using the kitjs component is

After instantiation, run the init method (the init method returns the current component object, with return code 7)

It can be found that all the API methods in dialog are mounted on prototype, inherited by prototype extension and passed to the instance object.

Observe the constructor code of the $ kit. UI. Dialog. yesorno component,

(4) Inheritance of kitjs

He used the $ kit. inherit method to declare the inheritance relationship with the $ kit. UI. Dialog object. Here some people will ask, why should we inherit from the constructor instead of writing it out directly?

The reason is:

1. kitjs is based on prototype to maintain the inheritance relationship.

2. To use a kitjs component, you must instantiate the component object. Each component is created through the new instance method through the constructor.

So I put the execution of the inheritance relationship in the constructor of the Code, so that when a new component is instantiated, it will follow the Inheritance Method of the constructor of the current component, it inherits the members and methods of its parent class step by step.

When the subclass needs to modify the method of the parent class, it only needs to define a method with the same name in the prototype of the subclass to overwrite the Inheritance Method of the parent class.

In terms of naming, kitjs follows the principle that the class name of the parent class is used as the namespace of the subclass and is continuously linked, for example, $ kit. UI. Dialog, $ kit. UI. Dialog. yesorno.

The inheritance Implementation of kitjs is also very simple.

Instantiate a parent class object, copy all the members of the parent class instance to the prototype of the subclass, and reset the prototype constructor of the subclass as the subclass constructor, then, the subclass constructor hangs a link pointing to the parent class through $ kit. inherit method, in the subclass $ kit. UI. dialog. during yesorno instantiation, You can inherit the parent class $ kit. UI. all the sub-classes of dialog do not exist, so it can inherit from static languages.

(5) config parameters, coupling and disassembly of HTML and CSS?

Kit component constructor is used to pass in a map-type parameter, which is always a personalized component. When the kit component is initialized, it will automatically overwrite the default defaultconfig with the config parameter submitted by the user and start initialization.

For any component, the changes in the HTML structure and CSS style cannot be avoided.

Kit splits this coupling into the config parameter configuration,

The first is to use the HTML template technology. Kit advocates the use of the $ kit. newhtml method to directly root the HTML string and generate the HTML Dom to insert the Document Stream,

Therefore, we extract the approximate HTML content of the component and encapsulate it into an HTML string template, which is stored in defaultconfig of the component. If you need to modify the HTML template, you can use the custom config during initialization, override the template field in the default defaconfig config,

In the coupling decomposition of HTML templates and CSS, Kit uses the classname method in JS templates to separate them.

Use $ kit. TPL in the init method to replace the HTML in config with the XXX in config in the way of $ {XXX }.

At the same time, all styles are set in CSS,

If you need to switch between multiple skins, you can use config to specify the actual classname corresponding to $ {CLS} during initialization to modify the template's classname to achieve skin replacement.

(6) Summary

Basically, through code analysis on the $ kit. UI. Dialog. yesorno component, we have a rough understanding of the component implementation structure of kitjs. In fact, it is not difficult to design a page component, but it is difficult to design a page component that can adapt to various requirements. In various situations, it can be quickly deformed and adapt to development. Kit splits HTML templates and CSS, customizes config parameters and ultconfig, and subclass obtains attributes and methods of the parent class through inheritance, at the same time, relevant code is reconstructed according to different business needs, which can basically meet the needs of business UI components at various levels and in various environments flexibly.

In the next article, I will take you through a detailed understanding of the core event processing mechanism of KIT and how Kit, as a javascript library, implements an advanced event control interface such as mouse gestures, coming soon!