foreword
In the process of project development, some shared data, methods, classes, etc. can be encapsulated into modules for output. We load the modules where needed, saving a lot of repetitive code.
How to modularize development uses ES6 knowledge: export and import.
export
absolute output
That is, there must be a variable name or method name in order to output.
export function test () {} //correct
export function () {} // wrong
You can export directly before variables and methods
export var test = "123"
export var test = function () {}
export var test = function test1 () {} //output test variable
export function test () {}
Export output variables at any location
The output variable name or method name must be enclosed in brackets {}
var test = "123"
export {test}
var test1 = function () {}
export {test1}
rules of use
Export can be used multiple times in a file and export can also output multiple variables at a time
var test = "123"
export {test}
var test1 = function () {}
export {test1}
export {test,test1}
export default
default output
Just don't make absolutes, I default to output a variable or method (anonymous method can also), you can use any variable name to refer to when you refer.
In essence, export default is to output a variable or method defined as default, so it cannot be followed by a variable declaration statement
export default function () {} // also correct
export default var test = function () {} // wrong
You can export default directly before variables and methods
export default function () {}
export default function test () {}
export default output variable at any location
There is no need to add {} to the output variable name or method name
var test = "123"
export default test
///////
var test1 = function () {}
export default test1
rules of use
Export default can only be used once in a file and export default can only output one variable at a time
import
After using the export command to define the external interface of the module, other JS files can load the module through the import command.
Load the exported module
The variable name and function name of the loaded module must be the same as the variable name output by export and need to be enclosed in brackets {}
//index.js file
var test = function () {}
export {test}
// test.js file in the same folder
import {test} from './index.js' //correct
import test from './index.js' // wrong
import {test1} from './index.js' // wrong
Load modules exported by export default
The variable name and function name of the loaded module can be arbitrary and do not require parentheses {}
//index.js file
var test = function () {}
export default test
// test.js file in the same folder
import test from './index.js' //correct
import test1 from './index.js' //correct
import()
Using the import() function, dynamic loading can be achieved.
import('./index.js')
.then((res) => {
// ...
});
- import() returns a Promise object. After import() loads the module successfully, the module will be used as an object as the parameter of the then method.
- import() is asynchronous loading.
- import() is typically used for on-demand, conditional, and dynamic module paths.