The JavaScript modularity of spa design and architecture

Original

The original Book of Jane: HTTPS://WWW.JIANSHU.COM/P/D5FC38506BC4

Outline

1. What is a module?
2, the Basic module mode
3. Module Mode concept
4. Module structure
5. Revelation Mode
6, the significance of module programming
7. The importance of modular programming

1. What is a module?

A module is usually a part or component of a larger structure. However, modular terminology can be used in different contexts, even within the context of software development. Sometimes we hear people talking about modules on a general level of meaning. For example, they may say "payment module" or "Travel planning module". This time the module means that the overall feature is completely free of problems. And when we specifically refer to JavaScript blocks of code, the module represents a function--a specific function created through the module schema.

2, the Basic module mode

3. Module Mode concept 3.1, namespace

A namespace is a way to provide a specific scope for a group of related members. Although the namespace is not currently part of the JavaScript language, you can still achieve the same effect by assigning a module function to any variable of a larger scope, such as a global variable.

3.2. anonymous function expressions

function expressions are part of an expression and do not start with the function keyword. If the function expression is not named, it is called an anonymous function expression. The module body is contained in an anonymous function expression.

3.3. Object literal

JavaScript provides a shortcut to creating objects, called literal notation, which declares an object through curly braces whose property is represented by a key-value pair.

3.4. Closed Package

Typically, when a function is executed, the life cycle of any local variable that is created in it is declared to be complete. Closures are an exception, and exceptions occur when a function contains a variable reference to an outer scope. In JavaScript, each function also has an outer scope, even if the outer scope is exactly the global scope (so technically, all functions are closures). Closures are very important to our discussion because even if the outer function of the module mode is executed immediately, any object or value above the scope chain referenced by the outer function return statement cannot be garbage collected as long as the module is still in use.

4. Module structure

The module structure cleverly uses a function as a container to encapsulate its logic. This is possible because local declarations of variables and functions in the module can avoid directly accessing them outside the module. Access to the internal functionality of the module can be controlled by accessing the content exposed by the statement.

5. Revelation Mode

One of the attractions of module mode is the clear demarcation between the internal function of the module and the public function. There is an improved module pattern-revealing mode (revealing module pattern) that is frequently used and can make the division clearer.
The idea is to move any API-required code inside, to use the public function as a pointer purely to internal code, and expose only that public function.

6, the meaning of module programming 6.1, avoid naming conflicts

It is easy to create a naming conflict by putting the function into the global scope without limiting the function scope of the module.
Module mode allows you to name variables or functions as you wish, without worrying about naming conflicts between different module codes.

6.2. Protect Code Integrity

In some languages, access to a portion of the application code can be controlled by injecting access modifiers such as public or private. In JavaScript, private is the reserved keyword. We can still restrict access to variables and functions through the module mode. This is possible because variables and functions declared in a function imply that their scopes are limited to container functions. This ability to restrict access to part of a module's code changes the internal state of the other code directly, sustains the internal workings of the module, and avoids the arbitrary modification of the module data, which violates its intended purpose.
It is difficult to write secure code correctly. If you can't prevent the incorrect use of logic in your code, the hope of writing secure code is fading. Module mode provides a way to manage internal code accessibility.

6.3. Hide Complexity

When we talk about hidden programming complexity, it's not that we want to talk about how to keep secrets or how to increase security. What we're going to talk about is the difference between the two ways: complex logic that implements specific functions through a large number of global functions, and the ability to put complex logic inside and expose developers only through public interfaces. The latter reduces clutter and makes function calls clearer to use application functionality correctly.

7. The importance of modular programming

The most important idea of modular programming is that the logic complexity is built into the module mode and the functionality is provided for the public API, which is the way JavaScript is packaged.
Modular code can organize application logic into smaller units of a single target, which is easier to manage and modify. There is no doubt that this leads to better reusability. Modules also help maintain data integrity, code organization, and avoid naming conflicts. After all, we write code for a single page that is not refreshed, and if you don't write code this way and rely purely on global variables and functions, the code will quickly become unmanageable.

The JavaScript modularity of spa design and architecture