ES6 module

1.概述

• 1.1 JavaScript一直没有(module)体系，导致无法将一个大程序拆分成相互依赖的小文件。
• 1.2 ES6之前，指定了一些模块加载方案，CommonJS和AMD，前者用于服务器，后者用于浏览器。
• 1.3 ES6的设计思想是尽量静态化，使得编译时就能确定模块的依赖关系，输入输出关系。
• 1.4CommonJS和AMD都只能在运行时确定这些东西。

//CommonJS 模块
let {stat, exists, readFile} = require('fs');

//等同于
    let _fs = require('fs');
    let stat = _fs.srat;
    let exists = _fs.esists;
    let readFile = _fs.readFile;

上面的代码的实质是整体加载fs模块，生成一个对象(_fs),然后再从这个对象上面读取3个方法。这种加载称为“运行时加载”,
因为只有在运行时才能得到这个对象，导致完全没办法再编译时进行"静态优化"。

• 1.5 ES6模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。

//ES6模块
import {stat, exists, readFile } from 'fs'

上面代码的实质是从fs模块加载三个方法，而不加载其他方法，这种加载称为"编译时加载"或者静态加载，即ES6可以再编译时完成模块记载，效率比CommonJS的加载方式高。

2.ES6模块加载自动采用严格模式。(具体详见ES6便准入门)

3.export命令

• 3.1 模块功能主要由两个命令构成:export和import.export命令用于规定模块的对外接口，import命令用于输出其他模块提供的功能。

• 3.2 一个模块就是一个独立的文件没文件内部变量外部不能获取，必须通过export输出变量

//export 输出变量方法 1
{
    export var name = '123';
    export var age = 20;
    export var qq = '92039123'
}

//export 输出变量方法 2 (推荐方法)
{
    var name = "123";
    var age = 19;
    var qq = "183092190"

    export {name, age, qq}
}

• 3.3 export语句输出的接口与其对应的值是哦对那个太绑定关系，即可以通过接口渠道模块内部实时的值。

{
    export var number = 10;

    setTimeout((number) => {
        number = 500
    },1000)
}
number的值再1000ms之后变为了500

• 3.4 export命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内就会出错。

{
    var a = 123;
    {
        export {a};
    }
}
报错

4.import命令

• 4.1使用export命令定义了模块的对外接口后，其他JS文件就可以通过import命令加载这个模块了。

//main.js
import {name, age, qq} from './profile'
function message {
    console.log(name, age, qq);
}

import 后面的 from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js后缀可以省略，如果只是模块名，不带有路径必须配置告诉JavaScript引擎该模块的位置
import {myMethods} from 'util'

• 4.2import命令会自动提升到整个模块的头部并首先执行。

5模块的整体加载

• 1.除了指定加载莫格输出值，还可以使用正题加载(星号 * ),来指定一个对象，所有输出值都加载在这个对象上。

//1.js
{
    function add (r){
        return  r + r;
    }

    function power(r) {
        return r * r;
    }

    export {add,power}
}

//2.js
{
    import {area,power} from './1'
    console.log(" r + r",area(5));
    console.log("r * r",power(10));
}

//整体加载
{
    import * as rMethods from './1'
    console.log(" r + r",rMethods.area(5));
    console.log("r * r",rMethods.power(10));
}

6.export default 命令

• 6.1 使用import命令时用户需要知道加载的变量名或函数名。可以使用export default默认输出。

//1.js
{
    export default function(){
        console.log("123")
    }
}
//2.js
{
    import (任意指定名称) from './1'
    名称()
}

多个模块加载
{
export default function(){
console.log(“123”)
}
}

7.使用场合

• 7.1按需加载

button.onclick = function(){
    import('./1.js')
    .then(res => {
        console.log(res)
    })
    .catch( err => {
        console.log(err)
    })
}

• 7.2条件加载

if(condition){
    import ('./1.js')
    .then(
        //...
     ) else{
        import ("./2.js")
        .then(
            //...
        )
    }
}

• 7.3同时加载多个模块

Promise.all([
    import ('./1.js'),
    import ('./2.js'),
    import ('./3.js')
])
.then([module1, module2, module3]) => {
    //...
}

• 7.4使用在async函数之中。

async function main() {
    const myModule = await import('./myModule.js');
    const {export1, export2} = await import ("./myModule.js");
    const [module1, module2, module3] = 
    await Promise.all([
        import ('./1.js'),
        import ('./2.js'),
        import ('./3.js')
    ])
}

main();

• 相关文献 <ES6标准入门>