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 of the block are private, and only some interfaces (methods) are exposed to the outside to communicate with other external modules

Second, the benefits of modularity

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

Three, modular scheme

1.commonJS

(1) overview

Node applications are composed of modules that follow the CommonJS module specification. Each file is a module with its own scope. Variables, functions, and classes defined in one file are private and invisible to other files. On the server side, modules are loaded synchronously at runtime. On the browser side, modules need to be compiled and packaged in advance.

(2)

  • All code runs in the module scope and does not pollute the global scope.
  • Modules can be loaded multiple times, but only run once on the first load, and then the results are cached and read directly from the cache when they are loaded later. For the module to run again, the cache must be cleared.
  • The order in which modules are loaded, in the order they appear in the code.

(3) Basic grammar

  • Exports = value or exports. XXX = value
  • Import module: require(XXX), if it is a third-party module, XXX is the module name; For a custom module, XXX is the module file path

2.AMD

The CommonJS specification loads modules synchronously, meaning that subsequent operations cannot be performed until the load is complete. The AMD specification loads modules asynchronously and allows you to specify callback functions. Node.js is mainly used for server programming, and module files usually already exist on the local hard disk, so it can be loaded quickly without considering the asynchronous loading mode, so the CommonJS specification is suitable. However, in the browser environment, to load modules from the server side, then must be in asynchronous mode, so the browser side generally uses the AMD specification. In addition, the AMD specification was implemented on the browser side much earlier than the CommonJS specification.

(1) Basic usage

  • Refer to the module
// Define dependent modules (['module1', 'module2'], function(m1, m2){return module})Copy the code
  • Refer to the module
Require (['module1', 'module2'], function(m1, m2){use m1/m2})Copy the code

3.es6

Import Import module, export export module.

4.Com monJS and ES6 differences

  • The CommonJS module prints a copy of the value, the ES6 module prints a reference to the value.
  • The CommonJS module is run time loaded, and the ES6 module is compile time output interface.
  • ES6 modules operate differently from CommonJS. ES6 modules are referenced dynamically and do not cache values. Variables in modules are bound to their modules.

5. To summarize

  • 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.