What is the difference between commonjs and es6 modularity

Difference: 1. The CommonJS module is loaded at runtime, while the ES6 module is a compile-time output interface; 2. The require() of the CommonJS module loads the module synchronously, while the import command of the ES6 module loads asynchronously; 3. , CommonJS is a shallow copy of the module, and ES6 is the introduction of the module.

The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.

CommonJS

• For basic data types, it is a copy. That is, it will be cached by the module. At the same time, the variables output by this module can be reassigned in another module.

• For complex data types, it is a shallow copy. Since the objects referenced by the two modules point to the same memory space, modifications to the value of the module will affect the other module.

• When a module is loaded using the require command, the code of the entire module will be run.

• When the require command is used to load the same module, the module will not be executed again, but the value in the cache will be obtained. In other words, no matter how many times the CommonJS module is loaded, it will only be run once when it is loaded for the first time. If it is loaded later, the result of the first run will be returned, unless the system cache is manually cleared.

• When loading in a loop, it is executed during loading. That is, when the script code is require, it will all be executed. Once a module is "loop loaded", only the executed part will be output, and the unexecuted part will not be output.

ES6 module

• The values ​​in the ES6 module belong to [dynamic read-only reference].

• For read-only, that is, the value of the imported variable is not allowed to be modified. The imported variable is read-only, whether it is a basic data type or a complex data type. When a module encounters an import command, a read-only reference is generated. When the script is actually executed, the value will be retrieved from the loaded module based on this read-only reference.

• For dynamics, when the original value changes, the value loaded by import will also change. Whether it is a basic data type or a complex data type.

• When loading in a loop, ES6 modules are dynamically referenced. As long as some reference exists between the two modules, the code will be able to execute.

The difference between ES6 modules and CommonJS modules

1. CommonJS modules are loaded at runtime, while ES6 modules are output interfaces at compile time.

2. The require() of the CommonJS module loads the module synchronously, while the import command of the ES6 module loads asynchronously, with an independent resolution phase for module dependencies.

3. CommonJS is a shallow copy of the module, and ES6 Module is the introduction of the module. That is, the ES6 Module is only read-only and cannot change its value. The specific point is that the pointer cannot be changed, similar to const.

4. The interface of import is read-only (read-only status), and its variable value cannot be modified. That is, the pointer pointing to its variable cannot be modified, but the internal pointer pointing to the variable can be changed. You can reassign a commonJS pair (change the pointer pointing), but assigning a value to an ES6 Module will result in a compilation error.

What ES6 modules and CommonJS modules have in common:

1. Both CommonJS and ES6 Modules can assign values ​​to imported objects, that is, assign values ​​to the internal properties of the objects. value is changed.

【Related recommendations: javascript video tutorial, web front-end】

The above is the detailed content of What is the difference between commonjs and es6 modularity. For more information, please follow other related articles on the PHP Chinese website!