Front-end modularization

Modularized development can improve code reuse rate and facilitate code management. Usually a file is a module with its own scope, exposing only specific variables and functions. Currently popular JS modular specifications include CommonJS,AMD,CMD,ES6 module systems

CommonJS

NodeJS is the main practitioners of commonJS standard, he has four important environment variable to support the realization of the modular: module, exports, the require, global

1. An overview of the

Node applications are made up of modules that follow the CommonJS 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 packed and compiled in advance.

Characteristics of 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
  • Exposure module:module.exports = valueorexports.xxx = value
  • Introduction module:require(xxx)If the module is a third-party module, XXX is the module name. For a custom module, XXX is the module file path
4. Module loading mechanism

The loading mechanism for CommonJS modules is that the input is a copy of the output value. That is, once a value is printed, changes within the module do not affect that value. This is a major difference from ES6 modularity.

ES6 modularization mechanism

The ES6 module is designed to be as static as possible, so that the module dependencies, as well as the input and output variables, can be determined at compile time. Both CommonJS and AMD modules can only determine these things at runtime.

1. Basic grammar

The module consists of two commands: export and import. The export command is used to specify the external interface of a module, and the import command is used to input functions provided by other modules. The export default command specifies the default output for the module.

A module is an independent file. All variables inside the file are not available externally. If you want outsiders to be able to read a variable inside a module, you must use the export keyword to output that variable. Here is a JS file that uses the export command to output variables.

Characteristics of 2.
  • ES6 modules are loaded at compile time, making static analysis possible
  • No longer needUMDES6 module format will be supported by both servers and browsers in the future. This is already being done through various tool libraries.
  • In the future, the browser’s new apis will be available in module format and will no longer have to be global variables ornavigatorObject properties.
  • Objects are no longer required as namespaces (e.gMathObject), and in the future these functions could be provided through modules.
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.

CMD

The CMD specification is designed specifically for the browser side. Modules are loaded asynchronously and executed only when they are in use. The CMD specification incorporates the features of the CommonJS and AMD specifications. In Sea-.js, all JavaScript modules follow the CMD module definition specification.