ES Module complete knowledge

ES Module complete knowledge

Organize ES Module modular features, import, export syntax knowledge, notes, and concise syntax

ES Modules feature

The ES Module standard executes JS code by adding the type = module attribute to script

    <script type="module">
        console.log('this is es module')
    </script>
Copy the code

Four features

• The ESM automatically adopts strict mode, ignoring ‘use strict’, where this is undefined in modularity

    <script type="module">
        console.log(this) // undefined
    </script>
Copy the code

• Each ES Module runs in a separate private scope (addressing global contamination by using variables)

    <script type="module">
        var foo = 100
        console.log(foo)
    </script>
    <script type="module">
         console.log(foo) // Uncaught ReferenceError: foo is not defined
    </script>
Copy the code

• ESM requests external JS modules through CORS

// Access to script at 'https://libs.baidu.com/jquery/2.0.0/jquery.min.js' from origin 'http://127.0.0.1:5501' has been blocked by CORS // policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
<script type="module" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>	

<script type="module" src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>// It is running properlyCopy the code

• The ESM script tag is delayed, which is equivalent to adding the defer attribute to the script tag

ES Modules export

• The default is derived

// Export by default
const name = 'hello module'
export default name

/ / import
import name from '... '
Copy the code

• Separate export

/ / export
export const name = 'hello module'

/ / import
import { name } from '... '
Copy the code

• Import and export multiple files together

const name = 'name'
function say() {}
class Person {}

/ / export
export { name, say, Person }

/ / import
import { name, say, Person  } from '... '
Copy the code

• Rename export

// Rename the export
const name = 'name'
export { name as fooName }

/ / import
import { fooName } from '... '
Copy the code

• Rename the export. Special case: Rename the export to default

// Rename the export to the default export
const name = 'name'
export { name as default }

// Import (must also be renamed when importing)
import { defalut as fooName } from '... '
Copy the code

ES Modules imported

• Relative path import

import { name } from './module.js' // Full path, can not omit the file suffix.js
Copy the code

• An absolute path

import { name } from '/module.js' // Start with the directory following the current project
Copy the code

• Full URL

import { name } from 'http://localhost:3000/module.js' // You can reference the CDN module file directly
Copy the code

• Load only, not extract

import {} from './module.js'  // Used to load sub-function modules that do not need control
import './module.js' //
Copy the code

• Extract to the same object

import as mod from './module.js'
Copy the code

• Dynamic import module

import('./module.js').then((module) = > {
 	console.log(module)})Copy the code

ES Modules Import and export precautions

• Export is fixed usage, not deconstruction. They look similar, but they don’t actually have anything to do with each other

const name = 'li'
const age = 18
export { name, age }

/ / import
import { name, age } from '... '

/ / deconstruction
const { foo, bar } = { foo: "aaa".bar: "bbb" };
Copy the code

• Export reference address (js module is a singleton)

// module.js
let name = 'li'
setTimeout(() = > {
    name = 'ban'
}, 1000)

export { name }

// app.js
import { name } from './module.js'
console.log(name)	// li
setTimeout(() = > {
    console.log(name) // ban
}, 1500)
Copy the code

• The exported member is read-only and cannot be modified

// a.js
export let name = 'li'

// b.js
import { name } from './a.js'
name = 'ban' // Uncaught TypeError: Assignment to constant variable.
Copy the code

Import and export members in a unified manner

// index.js
// import/export
import age, { name } from 'a.j'
import { sex } from 'b.js'
export { age, name, sex }

//
// Import/export variables cannot be obtained in the current writing method
export {deault as age, name } from 'a.js'
export { sex } from 'b.js'
Copy the code