Introduction to JS modules and namespaces_javascript skills

Cause
An important reason for organizing code into classes is to make the code more "modular" and enable code reuse in many different scenarios. But classes are not the only way to modularize code.

Generally speaking, a module is an independent JS file. A module file can contain a class definition, a set of related classes, a library of utility functions, or some code to be executed.

The goal of modularization is to support large-scale program development, handle the assembly of code from dispersed sources, and enable the code to run correctly, even if it contains unnecessary module code.

Ideally, no module should define more than one global flag.

Module function
is implemented by defining the module inside a function. The defined variables and functions are local variables of the function and are not visible outside the function. In fact, you can use this function scope as the module’s namespace (module function)

Once the module code is encapsulated into a function, you need some way to export the public API so that they can be called outside the module function. There are several ways to export public APIs:

First create a namespace

Copy code The code is as follows:

// Create a global variable to store school-related information Module
var school; // Create school namespace
if(!school) school = {};

1. Use constructor

Copy code The code is as follows:

// Return the Student constructor to export the public API
school.Student = (function() {
function Student() {

}
//... Define the prototype object and private properties and methods of Student.... ....
return Student; // Return Student constructor to export public API
})();

2. Return the namespace object

If the module API includes multiple units, it can return a namespace object

Copy code The code is as follows:

// Add students module to school
school. students = (function() {
// Many classes are defined here such as course class/grade class, using local variables and functions
function Subject() { /* ... */ }
function Grade () { /* ... */ }

// Export the API by returning the namespace object
return {
Subject: Subject,
Grade: Grade
};
})();

3. Call

through the keyword new

Another similar technique: treat module functions as constructors and call them through new. Assign them (public API) to this attribute to export them

Copy code The code is as follows:

school.students = (new function() {
// ..... The code is omitted here...

// Direct the API to this object
this.Subject = Subject;
this.Grade = Grade ;

// Note that there is no return value here
}()); // The brackets are written inside. Here is the creation of a new instance. New should be followed by a call to the constructor instead of an expression

4. Defined namespace object

As an alternative, if a global namespace object has been defined, module functions can directly set the properties of that object.

Copy code The code is as follows:

// If the namespace object has been defined
var school;                                 // Create school namespace
if(!school) school = {};
school.students = {}; // The student namespace has been defined
(function(students) {
// ..... The code is omitted here...

// Direct the public API to it In the defined namespace
students.Subject = Subject;
students.Grade = Grade;
// There is no need to return a value here
})(school.students);

For this reason, the method of exporting public API has been explained.