Discussion on JavaScript modular development

How we developed JavaScript code in the past
In the past, due to the low complexity of applications, JavaScript has always been in the position of an auxiliary program for web pages, not even an application development language. Moreover, most websites are one-time applications and are small in scale. Development speed is more important than maintainability. Most of the time, there are no professional front-end developers. It is the back-end people who look up the manual and start working.

Many times all JavaScript code is placed in the same file, and all codes are coupled together and cannot be reused. All variables are global variables and may overwrite each other. If you do it well, you will create some functions and organize some common code to facilitate reuse, but these functions are basically global. It became more obvious after the introduction of JQuery. Many people are accustomed to writing all event binding, event processing and other codes together and put them into a document ready function.

I have personally experienced the above situations. To sum up, the code cannot be reused, the maintainability is poor, the code cannot be tested, and it is difficult for multiple people to collaborate on development.

What is a module?
Definition from Wikipedia:
Software module (Module) is a set of consistent and closely related software organizations. It contains two parts: program and data structure respectively. Modern software development often uses modules as units of synthesis. Modern software development often uses modules as units of synthesis. Modules are units that can be written separately. This makes them reusable and allows a wide range of people to collaborate, write and work on different modules simultaneously.

Advantages of modular development
Can realize on-demand loading
Multi-person collaborative development
Easy to reuse
Strong scalability
Easy to test
Modular development in JavaScript
In fact, JavaScript modularization is a very hot thing now. The main feature is "modular development, loading on demand". Among them, the CommonJS organization defines the AMD specification to standardize module definitions on the browser side. RequireJS and SeaJS are two excellent frameworks that implement AMD.

For medium and large projects, it is very necessary to use modular development and on-demand loading. You can choose one of the frameworks to use. For small and medium-sized projects, I personally feel that using this module development framework is a bit It's not necessary, but we can still take advantage of modular development without using the on-demand loading feature. Here we focus on how small and medium-sized projects use modular development methods to avoid various problems in traditional development methods.

How to define modules in JavaScript
Modules in JavaScript are mainly implemented through closures. It can solve the problem of global variables very well and put all related variables as private variables in the module. Here is a module Simple example:

var book = function() {
var name = 'Master JavaScript'; var price = 100;

getName: function () {
  function() {
   

Each module only completes an independent function
This is the basic requirement of modular development. Modular development is actually the divide and conquer method, that is, dividing the entire function into several small functions. Of course, you can also continue to divide until each module only has Until you do one thing. Of course, don't divide it too finely. Too much granularity is not conducive to reuse, and too fine a granularity will make the integration between modules very complicated.

Each module has a clear API interface
In fact, this API interface can be defined before the specific function code of the module. This requires you to clearly know what this module does before writing the code. This is the same as writing unit tests first. It is a principle to write implementation code after code. At the same time, this also requires that only the required interfaces are exposed, and other variables and functions are hidden and cannot be accessed by the outside world.

Unit testing
Few people write unit tests during JavaScript development. On the one hand, it is because JavaScript often interacts with the UI, making testing difficult. On the other hand, it is because the code is coupled and there is no fixed interface, so there is no way to test. Once you have the module, you can easily test it. Please refer to the introduction to JavaScript unit testing framework

Summary
This article discusses the modular development method in small and medium-sized JavaScript projects. Therefore, it does not adopt AMD's set of specifications, but uses the standard module pattern in JavaScript to organize the code. The on-demand loading function is also not used, because for small and medium-sized projects, the amount of code is not too large and performance is not a big issue. If it is a large project, it is still necessary to adopt AMD specifications and on-demand loading, so that the necessary code can be loaded.