ES6 modularization changes the native development method of front-end

The modularization introduced by ES6 is similar to require.js , only need to import an entry file, other js files can be created and imported by function, export export method attributes, and then import Introduced and used, this new feature may lead to a boom in native development in the future, you can freely use modular development without the need for a tripartite framework (vue, react), and the current browser market is about to be unified, Even IE has given up its own kernel to use the google webkit kernel, and the computer is also equipped with the IEAdge browser by default, which is cool when you think about it.

PS: To use modular loading, a server environment is required, that is, it must be accessed through localhost , and the script label must also be added with the type="module" statement

1. Basic example

a.js

 export default function a1() {
    console.log('a1')
}

index.html

 <script type="module">
import a1 from './a.js'
a1() // a1
</script>

2. Destructuring assignment

c.js

 export function c1() {
    console.log('c1')
}

export function c2() {
    console.log('c2')
}

index.html

 <script type="module">
import { c1, c2 } from './c.js'
c1() // c1
c2() // c2
</script>

Three, js file introduction

a.js

 export default function a1() {
    console.log('a1')
}

b.js

 import a1 from './a.js'

export default function b1() {
    a1()
    console.log('b1')
}

index.html

 <script type="module">
import b1 from './b.js'
b1() // a1, b1
</script>

Fourth, the introduction of labels

d.js

 import a1 from './a.js'
a1()

console.log('d1')

index.html

 <script type="module" src="./d.js"></script>

Combining the above situations, does it feel the same as vue or react the development and use method is the same, but here you need to pass the script module type declaration, but you must know this It is native. It can be used directly without building a set of scaffolding. If you are doing some system projects, you can consider "launching" directly.

For more front-end knowledge, please pay attention to the applet, there will be surprises from time to time!