Application Development in JS (mootools)

I made three demos. I wanted to create a Gmail-like interface. Then I suddenly found that there was no Office on the machine, so I simply made a demo like a PPT.

Js-based application development is summarized as follows:

Encapsulation Granularity
Common functions can be encapsulated as reusable components. You need to reasonably choose the package granularity. If the granularity is too large, it is not easy to reuse. If the granularity is too small, it is not worth the cost.

Code structure Planning
Using traditional software development ideas, code is divided into different blocks by function: initialization, event binding, event logic processing, and external Callback calls.

Js object-oriented
For simplicity, you can use Constructor (actually a common Function) + prototype definition. Although it does not seem very elegant, it is a direct solution. The Mootools class library is used in the Demo code. Compared with jQuery, the object-oriented feature of this class library is better, of course, you can also use its own Class declarative method to write your own Class:
Copy codeThe 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 per page
MaxButtons: 5, // Number of paginated buttons displayed
ShowPageSize: true, // display the page size option.
SizeArray: [10, 25]
},
Initialize: function (){
This. setOptions ();
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, and the logic structure of the Code is clear and clear.


Unit Test
We usually think that js applications on browsers cannot perform unit tests, because they are too closely related to DOM, but it is not completely impossible. For example, Google's Closure is doing well, use Mock objects to simulate Dom elements and decouple code logic from Dom object operations.
The following is the sample code for this instance.