Export default and corresponding import

1. Know about exports and imports

Things that are exported can be imported and accessed

A module that is not exported can be imported

// a.js const age = 18 console.log(age) // main.js import './a.js' // Import './a.js' import './a.js' import './a.js' // import multiple times, and the result is printed only once 18Copy the code

2. Basic usage

The import corresponding to export default can be named arbitrarily

 // a.js
 export default age
 
 // main.js
 import age111 from './a.js'
Copy the code

A module can have only one Export Default

 // a.js
 const name = 'xiaolong'
 const age = 18
 export default age
 export default name
 // Uncaught SyntaxError: Identifier '.default' has already been declared
Copy the code

Export and corresponding import

1. Basic usage

// export declaration or statement export const age = 18 const age = 18 export {age} // Curly braces are required export age // Uncaught SyntaxError: Unexpected token 'export' // main.js import main.js import {age} from './a.js' // Curly braces must be added import age from './a.js' // Uncaught SyntaxError: The requested module './a.js' does not provide an export named 'default' import {age1} from './a.js' // Uncaught SyntaxError: The requested module './a.js' does not provide an export named 'age1'Copy the code

2. Multiple exports

 export { name, age, sayHello }
Copy the code

3. Alias the export and import

Export {sayHello as hello, name, age} import {sayHello, age, name as Person} from './a.js'Copy the code

4. Import as a whole

All output is imported, including those exported via Export Default

 import * as Person from './a.js' // Module {Symbol(Symbol.toStringTag): 'Module'}
Copy the code

5. Import simultaneously

Import {age, name, sayHello} from './a.js' import age2 from './a.js' import age2 from './a.js' import age2 from '. name, sayHello } from './a.js'Copy the code

Precautions for Module

1. This at the top of the module points to

In a module, the top layer of this points to undefined

 // a.js
 console.log(this) 
 
 // main.js
 import './a.js' 
 // undefined
Copy the code

2. The import and import ()

The import command is promoted to the head of the module and executed first

// a.js export {age} // main.js console.log(' sofa ') console.log(' second ') import {age} from '. '// 18 // sofa // secondCopy the code

Import is executed before the code is executed

Import and export commands can only be executed at the top level of a module, not in a code block

If (PC){import 'pc.js'}else if(Mobile){import 'Mobile. Js'}Copy the code

Import () can be imported conditionally

 if(PC){
     import('pc.js')
 }else if(Mobile){
     import('mobile.js')
 }
Copy the code

3. Compound writing method of import and export

// main.js export{age} from './a.js' // The current module cannot access age // equivalent to import {age} from './a.js' export{age} from './a.js' // The current module can access ageCopy the code

Reference:

Pre-mooc courses

Extension:

3. ES Modules: Get to grips with comics

Commonjs and Es Module-

ES Module