重新回头学习归纳ES6的知识点---------模块 Module 的语法

1.概述：

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

import命令会被 JavaScript 引擎静态分析，先于模块内的其他语句执行（import命令叫做“连接” binding 其实更合适）。

2.export命令：

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。

    输出三个变量

export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

    输出一组变量。它与前一种写法（直接放置在var语句前）是等价的

var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export { firstName, lastName, year };

    输出函数和类（class），使用as关键字，并且重命名了函数v1和v2的对外接口，重命名后，v2可以用不同的名字输出两次  

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

3.import命令：

    使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。加载profile.js文件，并从中输入变量。

    import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同。

import { firstName, lastName, year } from './profile.js';

   为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。

import { lastName as surname } from './profile.js';

    *模块的整体加载

//输出-----------------
export function area(radius) {
  return Math.PI * radius * radius;
}

export function circumference(radius) {
  return 2 * Math.PI * radius;
}

//输入-----------------
import * as circle from './circle';
console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));

3.default 命令     

export default命令用在匿名函数 和 非匿名函数前，也是可以的；

这时就也需要知道原模块输出的函数名。可以自定义。需要注意的是，这时import命令后面，不使用大括号。

// -------------export
export default function foo() {
  console.log('foo');
};
// 或者写成
export default function () {
  console.log('foo');
}
// 或者写成
function foo() {
  console.log('foo');
};
export default foo;

//--------------import
import crc32 from 'crc32';

   显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能唯一对应export default命令。

   本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字。所以，下面的写法是有效的。

function add(x, y) {
  return x * y;
}
export {add as default};
// 等同于
// export default add;

// app.js
import { default as foo } from 'modules';
// 等同于
// import foo from 'modules';

正是因为export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句。

下面代码中，export default a的含义是将变量a的值赋给变量default。所以，最后一种写法会报错。

同样地，因为export default命令的本质是将后面的值，赋给default变量，所以可以直接将一个值写在export default之后。

export var a = 1;   // ----正确

var a = 1;   
export default a;   // ----正确

export default var a = 1; // ----错误

export default 42;   // ----正确

export 42;   // ----报错

   多个变量输入时：

import aa, { each, forEach } from 'lodash';

4.import() 

   import()  类似node里面require， 可以动态引入, 返回值，是个promise对象

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

   用法：

let sign=1;
function config(){
   switch(sign){
      case 1:
           return './modules/1.js';
           break;
       case 2:
            return './modules/2.js';
            break;
    }
}
import(config(1)).then(res=>{
    $(function(){
        $('body').css({
            background:'gray'
        })
    })
});

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

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

    console.log(m1,m2);
}

main();