What is a module

Encapsulate a complex program into several blocks (files) according to certain rules (specifications) and combine them together

The internal data and implementation are private, exposing only interfaces (methods) to communicate with other external modules

Modular process process

Global function pattern: Encapsulates different functions into different global functions

  • Encoding: Encapsulating different functions into different global functions
  • Problem: Contaminate the global namespace, causing naming conflicts or data insecurity, and no direct relationship between module members
function m1(){
  //...
}
function m2(){
  //...
}
Copy the code

Namespace mode: Simple object encapsulation

  • Purpose: Reduces global variables and resolves naming conflicts
  • Problem: Data is not secure (external data can be directly modified inside the module)
let myModule = { data: 'www.baidu.com', foo() { console.log(`foo() ${this.data}`) }, Bar () {console.log(' bar() ${this.data} ')}} mymodule.data = 'other data' mymodule.foo () // foo() other dataCopy the code

Writing this way exposes all module members, and the internal state can be overwritten externally

IIFE mode: Anonymous function self-invocation (closure)

  • What it does: Data is private and can only be manipulated externally by exposed methods
  • Encoding: Encapsulates data and behavior inside a function, exposing the interface by adding properties to the window
  • Question: What if the current module depends on another module?
// index.html file <script type="text/javascript" SRC ="module.js"></script> <script type="text/javascript"> mymodule.foo () Mymodule.bar () console.log(mymodule.data) //undefined access to internal data mymodule. data = 'XXXX' // Not modified internal data mymodule.foo () // No changes to </script>Copy the code
// module.js file (function(window) {let data = 'www.baidu.com' // function foo() {console.log(' foo()) ${data} ')} function bar() {console.log(' bar() ${data} ') otherFun() {// Internal call} function otherFun() {// internal private function Console. log('otherFun()')} // Expose behavior window.myModule = {foo, bar} //ES6})(window)Copy the code

Benefits of modularity

  • Avoiding naming conflicts (reducing namespace pollution)
  • Better separation, load on demand
  • Higher reusability
  • High maintainability

The introduction of multiple<script>There is a problem after the label

  • Request too much

First we rely on multiple modules, which will send multiple requests, resulting in too many requests

  • Relying on the fuzzy

We don’t know what their dependencies are, which means it’s easy to get the load sequencing wrong because you don’t know what their dependencies are.

  • Difficult to maintain

The above two reasons lead to difficult maintenance, and it is likely to affect the whole situation, leading to serious problems in the project.

Modularity certainly has several benefits, however, a page needs to introduce multiple JS files, will occur these problems. These issues can be addressed through modular specifications. The commonJS, AMD, ES6, CMD specifications that are most popular in development are described below

Modular specification

CommonJS

AMD

CMD

conclusion

  • The CommonJS specification is mainly used for server-side programming, loading modules are synchronous, which is not suitable in a browser environment because synchronization means blocking loading and browser resources are loaded asynchronously, hence the AMD CMD solution.
  • The AMD specification loads modules asynchronously in the browser environment, and multiple modules can be loaded in parallel. However, AMD specifications are expensive to develop, code is difficult to read and write, and semantics are not smooth in the way modules are defined.
  • The CMD specification is similar to the AMD specification in that it is used for browser programming, relies on proximity, executes lazily, and can be easily run in Node.js. However, depending on SPM packaging, the loading logic of modules is biased
  • ES6 in the language standard level, the realization of module function, and the implementation is quite simple, can completely replace CommonJS and AMD specifications, become a common browser and server module solution