The benefits of modularity: avoid naming conflicts (reduce namespace pollution), better separation, on-demand loading, higher reusability, high maintainability
The most popular ones in development are: CommonJS, AMD, ES6, CMD
The CommonJS specification is mainly used for server-side programming, and the loading module is synchronous, which is not suitable for the browser environment, because synchronization means blocking loading, and browser resources are loaded asynchronously, so there is an AMD CMD solution.
The AMD specification loads modules asynchronously in the browser environment, and multiple modules can be loaded in parallel. However, AMD specification development costs are high, code reading and writing are difficult, and the semantics of module definition methods are not smooth.
The CMD specification is very similar to the AMD specification, both are used for browser programming, rely on proximity, delay execution, and can be easily run in Node.js. However, relying on SPM packaging, the loading logic of the module is biased
ES6 implements module functions at the level of language standards, and the implementation is quite simple. It can completely replace CommonJS and AMD specifications and become a common module solution for browsers and servers.
CommonJS：
CommonJS module specification: each file is a module with its own scope. Variables, functions, and classes defined in a file are all 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. (comonjs loads modules synchronously)
Features:
· All codes run in the module scope and will not pollute the global scope.
· The module can be loaded multiple times, but it will only be run once when it is loaded for the first time, and then the running result will be cached, and when it is loaded later, the cached result will be read directly. For the module to work again, the cache must be cleared.
· The order in which modules are loaded, in the order in which they appear in the code.
暴露模块：module.exports = value或exports.xxx = value引入模块：require(xxx),如果是第三方模块，xxx为模块名；如果是自定义模块，xxx为模块文件路径AMD
The CommonJS specification loading module is synchronous, that is to say, only after the loading is complete can the following operations be performed. The AMD specification is an asynchronously loaded module that allows specifying a callback function. Since Node.js is mainly used for server programming, module files generally already exist on the local hard disk, so loading is faster, and there is no need to consider the way of asynchronous loading, so the CommonJS specification is more applicable. However, if it is a browser environment, the module must be loaded from the server side, and the asynchronous mode must be adopted at this time, so the browser side generally adopts the AMD specification.
Basic syntax:
暴露模块
define(['module1', 'module2'], function(m1, m2){
return 模块
})引用模块
require(['module1', 'module2'], function(m1, m2){
使用m1/m2
})CMD
The CMD specification is specially used on the browser side, and the loading of the module is asynchronous, and the module will be loaded and executed when it is used. The CMD specification integrates the features of the CommonJS and AMD specifications. In Sea.js, all JavaScript modules follow the CMD module definition specification.
ES6
The design idea of ES6 modules is to be as static as possible, so that the dependencies of the modules, 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. For example, CommonJS modules are objects, and object properties must be looked up on input.
定义模块
var basicNum = 0;var add = function (a, b) {
return a + b;
};
export { basicNum, add };引用模块
import { basicNum, add } from './math';
function test(ele) {
ele.textContent = add(99 + basicNum);
}
There are two big differences between ES6 and commonjs:
1. CommonJS modules output a copy of a value, while ES6 modules output a reference to a value.
2. CommonJS modules are loaded at runtime, and ES6 modules are output interfaces at compile time.