Before because of

Recently, I read the code of a big man in the company, and suddenly had a question about import(). I looked through some materials for inquiry, hoping to help students who have the same question, and also hope that the big man passing by can give me more advice. Next, enter notes to share ~.

The import function

The import() function, introduced in the ES2020 proposal, can load modules asynchronously and dynamically. The import() function also differs from the import statement in that it has no static connection to the loaded module. The import function returns a Promise object that can be used to receive data using the.then and.catch methods. Once the import() module is successfully loaded, the module is used as an object as an argument to the then method. Therefore, you can use the syntax of object deconstruction assignment to get the output interface. , which allows module paths to be generated dynamically. The import function can be placed anywhere because it is executed at runtime, and when it is executed, the specified module is loaded, so it can be loaded dynamically in conditional statements and functions, for example

If (true) {return import ('. / XXX/aaa). Then (MSG = > {/ / loading content not error}). The catch (err = > {/ / the error codo})}Copy the code

Because of its dynamic loading and other features, it can be used in a number of situations:

  1. Vue project routes are loaded on demand
{ path:'/xxx' name:'/XXX' component:()=>import(.. /xxx/xxx.vue) }Copy the code

2. Load modules on demand

xxx.click=function(){
    import('../xxx').then(fn=>{
        ...
    })
}
Copy the code

3. Conditional loading

If (true) {return import ('. / XXX/aaa). Then (MSG = > {} / / loading content). The catch (err = > {/ / the error codo})}Copy the code

The all method loads multiple modules, and there are many interesting uses that I won’t list here.

The import statement

The import statement is a product of the static modularity idea proposed in ES6. It is used in conjunction with export, where the export command specifies the external interface of a module and the import command inputs functions provided by other modules. You can use the AS keyword in both import and export to rename exported/imported variables. Such as:

./a.js var chara=52 var charb=99 export { chara, Charb as HHH charb as WWW}./b.js import {chara as a, HHH, WWW as XXX} fromCopy the code

The interface output by the export statement has a dynamic binding relationship with its corresponding value. A one-to-one relationship has been established between the interface name and the variables inside the module. That is, the real-time value inside the module can be obtained through the interface. Export, like import, cannot appear in the block-level scope and must be at the top level. The exact value exported must be an interface, and unlike ConmonJS, the output interface does not have dynamic updates. Examples of incorrect writing:

Var a = 3 export a // error -> Var a = 3 var a = 3 export{a} 2. Function fn(){} export fn Export function fn(){} or function fn(){} export {fn}Copy the code

Import commands are statically analyzed by the JavaScript engine, executed before other statements in the module, loaded asynchronously, placed at the head of the module, and cannot support conditional statements. The engine processes import statements at compile time and does not analyze or execute conditional statements or functions such as if. So it makes no sense for an import statement to be placed in a control statement such as if or a block of function code, and therefore reports a syntactic error rather than an execution-time error. Such as:

if(true){ import xxx from ./xxx; / / error}Copy the code

When using the import command, the user needs to know the name of the variable or function to be loaded; otherwise, the command cannot be loaded. However, if you do not know the attributes and methods of the module, you can specify the default output for the module by using the export default command for convenience. (Note: in a file or module, there can be multiple export and import, and only one export default.) Such as:

Function aa(){} export default AA or export default function aa(){}Copy the code

When Export Default exports an anonymous interface, import gives the anonymous interface any name it wants.

//b.js
export default function(){}
//a.js
import xxx from ./b.js
Copy the code

export … from … A module can be imported and exported, for example:

Export {a,b}from./ab.js // can also use as, the difference is that a, B does not import the current module, only forward, so that the current module can not use a,b // equivalent to:  import {a,b} from ./ab.js export {a,b}Copy the code

Switch between default export and named export:

export { default as juming } from './defa'; Export {juming as default} from './defa'; Import {juming} from './defa'; export default juming;Copy the code