Functions of modules
Why modules are needed
Before JavaScript was modularized, all variables were shared globally, making it especially easy to tamper with and cause some bizarre bugs. So a lot of times to solve this problem you solve this problem in the form of closures. For example: JQ
(function( global, factory ) {
...
})(global, factory);
Copy the code
role
Each module is independent, has its own scope of impact, easy to manage and read.
Es6 module
The strict mode this refers to undefined is enabled by default in modules
Modules can be loaded multiple times, but only run once on the first load
The import to introduce
Import is executed statically, so expressions and variables cannot be used, nor in conditional statements. Import statements are promoted to the top of the file and take precedence (compile-time execution)Copy the code
// Destruct the introduction
import { xx } from './module.js'
// Rename import
import { xx as xxx } from './module.js'
// Import the default export
import xx from './module.js'
// A combination of deconstruction and default introduction
import xx, { xx } from './module.js'
// Import modules
import 'xx'
// Conditions cannot be introduced
if (true) {
import xx from './module.js'
}
Copy the code
Export, export default Export
// The export must be a declaration
export const x = 1
// By default, only one module can be exported
export default { a: 1 }
Copy the code
A mixture of imports and exports
// Export all of the modules
export * from './module.js'
// Collect all of the module into an object and export it
export * as xx from './module.js'
// Import and export a default module
import module from './module.js'
export { module }
Copy the code
Dynamic loading
It returns a Promise
import('./modlue.js').then(_= > {})
Copy the code
A circular reference
Reference multiple times and execute once
CommonJS module
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.
Introduced the require
// Destruct the introduction
const { xx } = require('./module.js')
// whole introduction
const xx = require('./module.js')
Copy the code
Exports, module. Exports
exports.xx = 12
module.exports.xx = 12
Copy the code
A circular reference
Reference multiple times and execute once
Modify import Position
The difference between
-
The execution is different
Es6 compile time
CommonJS runtime execution
-
The output form of the value is invalid
References to Es6 values
Copy of CommonJS value
Post to recommend
- Vue + TypeScript + Element-UI + Axios builds the front-end project infrastructure
- Realize project download, automatic routing and project release scaffolding based on Node
- Encapsulate a simple WebSocket library
- Note: Vue often meet questions summary and analysis
- Proxy is an alternative to Object. DefineProperty in Vue3.0
- Vue 3.0 – First experience 1
- Figure out a prototype, a prototype object, a prototype chain
- Promise Principles = Build a Promise from 0 to 1
[Notes are not easy, if it is helpful to you, please like, thank you]