学习笔记 JavaScript ES6 模块化Module

学习内容：

• export
• import
• as 
• import default

模块化的规范

1、CommonJS : Node.js

这是出现的比较早的一种规范，他是在Node.js中的一种模块化规范，他的局限性是基于Node虽然能在服务器端实现模块的同步加载，但仅仅局限在服务端。

所以又产生了AMD的规范。

2、AMD ： require.js

AMD是require.js在推广过程中对模块化定义的规范化产出。记得以前用到前端框架时，总要引入一个require.js，就可以实现模块化。AMD叫异步模块定义，可以定义回调函数，回调函数里面可以等到模块加载完成，再在回调函数里面实现想要的功能。AMD推崇的是依赖前置，提前执行。与AMD对应的还有CMD。

3、CMD ： sea.js

CMD是sea.js在推广过程中对模块化定义的规范化产出。sea.js是阿里推出的，现已不再运维。CMD推崇依赖就近，延迟执行。

上面三种都是出现比较早的模块规范化，2015年出现了ES6。

4、ES6

2015年推出了ES6的模块化规范，正式纳入JS标准。

下面来学习在ES6中如何导入导出模块。

export/import

当用export 关键字导出模块的时，比如 :

export a = 7

则在import时，导入的名称和导出的名称必须完全一样(上面导出a，下面必须导入a才行)，否则找不到，如：

import {a} from './module.js' // "./"表示当前文件夹下，后缀名js可以不写
console.log(a);
console.log(aa);

-----------------------------------------------
7
Uncaught ReferenceError: aa is not defined

再来看，如果export导出了多个模块，有变量和方法，如：

export const a = 7;
export const b = 6;
export const sum = (x, y) => x + y;

 import时，{}里面可以用逗号分隔，如：

import { a, b, sum } from "./module.js"; // "./"表示当前文件夹下，后缀名js可以不写
console.log(a);
console.log(b);
console.log(sum(1, 2)); // 和正常的方法调用一样
 
--------------
7
6
3 // 1 + 2

如果export是对象的话，需要在对象上加上{}，如：

const obj = {
    name : 'Sure'
}

export {obj}

 import：

import {obj} from './module'

console.log(obj);

--------------------
{name: 'Sure'}

也可以一次导出多个，如：

const a = 7;
const b = 6;
const sum = (x, y) => x + y;

const obj = {
  name: "Sure",
};

export { a, b, sum, obj };

再复杂一点，加一个类进去，如：

export

class Person {
  constructor(name) {
    this.name = name;
  }
  showName() {
    console.log(this.name);
  }
}

export { Person };

import 

import { Person } from "./module.js"; // "./"表示当前文件夹下，后缀名js可以不写

let p = new Person('Sure')
console.log(p.name);

import时可以使用别名，用as即可，但是as以后，之前的变量名就不可以用了，如：

import { a as aa } from "./module";
console.log(aa);
console.log(a);

----------------------------------------------------
7
Uncaught ReferenceError: a is not defined

另一种导出方式，export default ，注意：每个module只能有一个default。

const a = 7;
export default a

导入：

import abc from './module'
console.log(abc);

------
7

 export default导出全部的内容：

const a = 7;
const b = 6;
const sum = (x, y) => x + y;

const obj = {
  name: "Sure",
};

class Person {
  constructor(name) {
    this.name = name;
  }
  showName() {}
}

export default { a, b, sum, obj, Person };

导入时，moduleObj这个名称可以随意定义：

import moduleObj from "./module.js"; // "./"表示当前文件夹下，后缀名js可以不写
console.log(moduleObj);


--------------------------------------------
{a: 7, b: 6, obj: {…}, sum: ƒ, Person: ƒ}
Person: ƒ Person(name)
a: 7
b: 6
obj: {name: 'Sure'}
sum: ƒ sum(x, y)

还有一种导入方式，是用在导出内容特别多时，import * as ：

注意看下面的输出。

import * as mod from './module'

console.log(mod);

--------------------------------------------------------------------------------------
Module {default: {…}, __esModule: true, Symbol(Symbol.toStringTag): 'Module'}
default: {a: 7, b: 6, obj: {…}, sum: ƒ, Person: ƒ}
__esModule: true
Symbol(Symbol.toStringTag): "Module"
[[Prototype]]: Object

上面的输出可以这样取值：

import * as mod from './module'

console.log(mod.default.a);
console.log(mod.default.sum(1,2))

------
7
3