As a UI library, I don’t plan to let everyone learn my Kit Core and memorize my API. This kind of follow-up learning method has no meaning at all. Today, jQuery is popular, everyone learns jQ, and tomorrow SeaJs will become popular, and everyone will sing SeaJs. So in KitJs, I specially prepared a syntax sugar (Suger.js) for jQ users, which completely simulates jQ API. In addition to implementation, the interface is the same, which is also convenient for everyone to directly transform Kit components. Of course, as a purely technical fan, it is much more interesting to understand in-depth how a technology is implemented than to use it for ideology. Of course, if you directly plagiarize Kit component code for KPI considerations or the boss’s project bonus to complete your KPI, I don’t mind such behavior. As long as you drink water and don’t forget to dig the well, and can promote KitJs when blowing water with colleagues, I’m very grateful to you. At the same time, Kit is also a very young library. Due to the continuous development, there are some bugs and browser compatibility issues, which is inevitable. I am alone and have limited energy. In this era of war in the front end, more like-minded friends are welcome to make him bigger and make progress together.
At the same time, a kitjs dialog component was released today, with the demo address being http://xueduany.github.com/KitJs/KitJs/demo/Dialog/demo.html
(I) Kit directory format
Back to the topic, in KitJs, kit.js is the existence of the core Core file. It contains some of the most commonly used Dom and Objects, inherited operations, and a batch of string.js, math.js, etc. are expanded according to the division of functions in the same level directory. Each independent js file contains a Class constructor and an instance of a global object.
Taking kit.js as an example, it includes the $Kit class and the $Kit instance $kit (starting with $ is to avoid conflicts with commonly used variables).
All other types are hung on $Kit and $kit instance instances in the Link way, such as math.js, which includes $Kit.Math class and $kit.math instances, so that there are only two pollutants in the global scope. At the same time, in kit.js, we define a namespace called $kit.ui. In the physical directory, we use the Widget directory of the same level as kit.js, and the directory with multiple initial letters is arranged in a row.
All directories under the widget directory are kitjs component directories. Each independent js file only contains a class constructor for independent components (non-instance). It can also be compatible with the module mode of commonJs (can comply with the Modules/1.1 specification of CommonJs and AMD transformation. The specific transformation method will be mentioned in detail later)
(II) The default code template of Kit component, the annotation complies with the jsdoc specification
Let's take the dialog components as an example, each component is similar to the following
First of all, the comment of jsdoc, what class is @class declaration, @require xxx.js, what components are declared dependent on
(III) Constructor and initialization method
Each class defines a constructor in a standard function(config){} way. It should be noted here that the constructor of each kitjs component reserves a config parameter by default as input for personalized configuration.
At the same time, in the class constructor, there is a static member, defaultConfig object, used to store the default configuration of the kitjs component
When using kitjs components, the first thing you need to do is to initialize a new instance object through new Instance. This is just to initialize a js component object. There is no HTML yet. You need to execute the init method, create HTML, and add it to doc, which is equivalent to pouring flesh and blood on the soul ^_^.
Some students may ask, why not place the init method directly in the constructor and release it separately?
1. 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 will be set to the new Instance of the parent class. If the initialization method of init is placed in the constructor, the HTML of the parent class will be directly executed and garbage code will be generated.
2 Because of lazy loading, HTML code needs to be executed at the right time, rather than immediately when initialization is initialized
So the default way to use kitjs components is
After instantiation, execute the init method (the init method will return the current component object, with return code 7)
As shown in the above figure, all API methods in the dialog are hung on the prototype, and inheritance and passing to the instance object through prototype extension.
Observe the constructor code of the $kit.ui.Dialog.YesOrNo component,
(IV) Inheritance of KitJs
He declared the inheritance relationship with the $kit.ui.Dialog object through the $kit.inherit method. Here, there will be a classmate who wants to ask, why should he inherit it in the constructor instead of writing it directly outside?
The reason is:
1.kitjs is a prototype-based inheritance relationship
2. To use kitjs components, you must instantiate the component object. Each component is created through the constructor through new Instance.
So I put the execution of the inheritance relationship in the code constructor, so that when instantiating a new component, I will inherit the members and methods of its parent class step by step according to the inheritance method of the constructor of the current component.
When a child class needs to modify the parent class's method, you only need to define a method of the same name in the child class's prototype to override the inheritance method of the parent class.
In terms of naming, kitjs follows, and the subclass continues the parent class name as Namespace and keeps the chain, as shown in the above figure $kit.ui.Dialog, $kit.ui.Dialog.YesOrNo
Kitjs inheritance implementation is also very simple
Instantiate a parent class object, copy all members of the parent class instance onto the subclass prototype, then reset the subclass prototype constructor as the subclass constructor, and then hang a link to the subclass constructor and point to the parent class. Through the $kit.inherit method, in the instantiation process of subclass $kit.ui.Dialog.YesOrNo, you can inherit all members of the parent class $kit.ui.Dialog that do not exist, and realize inheritance similar to static languages.
(V) config parameters , coupling disassembly/skin removal of HTML and Css?
The kit component constructor is accustomed to passing in a Map-type parameter, and always personalizes the component. When the kit component is initialized, it will automatically overwrite the default defaultConfig with the user submitted config parameter and start initialization.
For any component, it is impossible to get rid of changes in HTML structure and changes in Css style
Kit decomposes this coupling into the config parameter configuration.
First of all, use HTML template technology. Kit advocates using the $kit.newHTML method to directly root HTML String, generate HTML DOM and insert document streams,
So we extract the approximate HTML content of the component, encapsulate it into an HTML String template, and store it in the component's defaultConfig. If the user needs to modify the HTML template, use a custom config when initializing it, and override the template field in the default defaultConfig.
In the coupling and decomposition of HTML templates and Css, kit uses a trick to decompose className using js templates.
Replace the html in config in the form of ${xxx} by $kit.tpl in the init method
At the same time, all styles are set in css.
If there are multiple sets of skins that need to be switched, you can choose to modify the className of the template by specifying the actual className corresponding to ${cls} during initialization to achieve the effect of skin replacing.
(VI) Summary
Basically, through the code analysis of 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 designing a page component that can adapt to various requirements and can quickly deform and adapt to development in various occasions. Kit splits HTML templates and Css, customizes config parameters and defaultConfig, and subclasses obtain the properties and methods of the parent class through inheritance, and at the same time refactor the relevant code according to different business needs, which can basically flexibly meet the business UI component needs of various levels and environments.
KitJs includes basic library and UI library.
Basic library: selector function, dom operation function, animation function, enhance dom events, increase hashtree data structure, io function, local storage function, multithreading, range, etc.
There is also a suger.js that simulates jquery operation format
The UI library includes: enhanced form elements, pop-up layers, media players, verification frameworks, waterfall flow, linkage, slideshows, calendars, upload components, template engines, etc.