JavaScript modular Development

How did we develop JavaScript code before?
In the past, due to the low complexity of applications, JavaScript has always been a Helper Program for web pages, not even an application development language. In addition, most websites use one-time applications with a small scale. Compared with maintainability, the development speed is more important. Most of the time, there are no professional front-end developers. They all start to work after checking the manuals.

Most of the time, all JavaScript code is stored in the same file. All code is coupled and cannot be reused. All variables are global variables and may overwrite each other. Some functions will be created to organize some common code for reuse, but these functions are basically global. After JQuery is introduced, it is more obvious that many people are used to writing all the event binding, event processing, and other code together into a document ready function.

I have personally experienced the above situations. In summary, the Code cannot be reused, the maintainability is poor, and the Code cannot be tested. In addition, it is difficult for collaborative development by multiple people.

What is a module?
Wikipedia definition:
A software Module is a set of consistent and closely related software organizations. It contains two parts: program and data structure. Modern software development often uses modules for synthesis. Modern software development often uses modules for synthesis. Modules are units that may be written separately. This allows them to reuse and allow a wide range of people to collaborate, write, and study different modules at the same time.

Advantages of modular Development
Load on demand
Collaborative Development
Easy to reuse
High scalability
Convenient Test
Modular development in JavaScript
In fact, JavaScript modularization is a hot topic nowadays. Its main feature is "modular development, loading on demand". Here, the CommonJS organization defines AMD specifications used to standardize the module definitions on the browser side. RequireJS and SeaJS are two excellent AMD frameworks.

For medium and large projects, it is necessary to use modular development and On-Demand Loading. You can use one of these frameworks. For small and medium projects, I personally think it is unnecessary to use this module development framework. However, we can still use the advantages of modular development, but do not use the On-Demand Loading Function. Here, we mainly discuss how small and medium-sized projects use modular development methods to avoid various problems in traditional development methods.

How modules are defined in JavaScript
The modules in JavaScript are implemented mainly through closures, which can solve the problem of global variables well and put all relevant variables as private variables in the module, the following is a simple example of a module:

Var book = function (){
Var name = 'master JavaScript ';
Var price = 100;

Return {
GetName: function (){
Return name;
},
GetPrice: function (){
Return price;
}
};
}();

The following are some basic requirements for JavaScript modular development.

Each module only provides one independent function.
This is the basic requirement of modular development. modular development is actually to divide the entire function into several small functions. Of course, you can continue to divide the entire module until only one thing is done. Of course, it should not be too detailed. Too large granularity is not conducive to reuse, and too detailed granularity will make the integration between modules very complicated.

Each module has clear API Interfaces
In fact, this API can be defined before the specific functional code of the module, which requires you to clearly know what the module is to do before writing the code, this is the same as writing unit test code before writing implementation code. At the same time, only the required interfaces must be exposed. Other variables and functions are hidden and cannot be accessed from outside.

Unit Test
Few people write unit tests during JavaScript development. On the one hand, JavaScript often deals with the UI and is difficult to test. On the other hand, it is because of code coupling and no fixed interface. There is no way to test it. With the module, you can easily perform the test. See introduction to the JavaScript unit test framework

Summary
This article discusses the modular Development Method in Small and Medium-sized JavaScript projects. Therefore, the AMD specification is not used, but the standard module mode in JavaScript is used to organize code. Similarly, the On-Demand Loading function is not used, because for small and medium-sized projects, the amount of code is not too large, and the performance is not a big problem. It is necessary for large projects to adopt AMD specifications and load on demand, so that necessary code can be loaded.