A preliminary study on JS application development (mootools)_javascript skills

I made three small demos. I originally wanted to make an interface similar to Gmail, but then I suddenly discovered that there was no Office on the machine, so I simply made a gadget similar to a PPT presentation.

The main points of JS-based application development are summarized as follows:

Encapsulation granularity
Common functions are encapsulated into reusable components. It is necessary to choose the component encapsulation granularity reasonably. If the granularity is too large, It is not easy to reuse, and if the granularity is too small, the gain outweighs the loss.

Code structure planning
Absorb the idea of ​​traditional software development and divide the code into different blocks according to functions: initialization, event binding, event logic processing, external callback calling

Js Object-oriented
For the sake of simplicity, you can use the constructor (actually an ordinary Function) prototype definition. Although it does not look very elegant, it is a more direct solution. The Mootools class library is used in the demo code. Compared with jQuery, the object-oriented features of this class library are personally better to use. Of course, you can also use its own Class declaration method to write your own Class:

Copy code The code is as follows:

Meta.Controls.Pager = new Class({
Implements : [Events, Options],
options: {
pageIndex :1, // Current page number, starting from 1
size : 10, //Number of records displayed on each page
maxButtons : 5,/ / Number of paging buttons displayed
showPageSize:true, // Show paging size options.
sizeArray:[10, 25]
},
initialize: function (A) {
this. setOptions(A);
this.pageIndex = this.options.pageIndex;
this.size = this.options.size;
this.maxButtons = this.options.maxButtons;
this.itemCount = 0;
this.pageCount =0;
},
...
}

This method is also a good choice, the code logical structure Clear at a glance


Unit testing
It is generally believed that unit testing of js applications on browsers is difficult, mainly because it is too closely related to the DOM, but it is not completely impossible, such as Google's Closure does a good job, using Mock objects to simulate Dom elements and decouple code logic and Dom object operations.
The following is the code for this example. If you are interested, you can download it.