ES6 -模块化

1.定义模块: export

export const a=12

export {a,b,c}

别名 export {a as aaa,b as bbb,c as ccc} ->使用 import {aaa,bbb,ccc} from './modules/1.js'

2.使用模块: import   <script type="module"> <\/script>

import {a,b,c} from './modules/1.js'

别名 import {a as aaa,b as bbb,c as ccc} from './modules/1.js' ->使用 console.log(aaa);

import * as test from './modules/1.js' ->使用 console.log(test.a);

3.import特点:

a) import可以是相对路径，也可以是绝对路径

b) import模块只会导入一次，无论你引入多少次

c) import './modules/1.js';如果这么用，相当于引入文件

d)有提升效果，import会自动提升到顶部，首先执行

e) 导出去模块内容，如果里面有定时器更改，外面也会改动

4.export default ，import 引用时没有{}

// export default ，引用时没有{}
export default 12;
import a from './modules/1.js' 

5.import() 可以动态引用，返回值是个promise对象

优点：1.按需加载 2.可以写到if中 3.路径可以动态

import('./modules/1.js').then(res=>{
    console.log(res.a);
})

// Promise.all()
Promise.all([
    './modules/1.js',
    './modules/2.js'
]).then((mod1,mod2)=>{
    console.log(mod1,mod2);
})

// async await

async function test(){
   const [mod1,mod2]=await Promise.all([
        import('./modules/1.js'),
        import('./modules/2.js')
    ]);
    console.log(mod1,mod2);
}