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]