ES6-Module

ES6 模块化

在 ES6 出现之前，JS 不像其他语言拥有 “模块化” 这一概念，于是为了支持 JS 模块化，我们使用类、立即执行的函数或者第三方插件(RequireJS、seaJS)来实现模块化，但是在 ES6 出现之后, 上述的解决方案都已经被废弃, 因为 ES6 中正式引入了模块化的概念

• ES6 模块化中的模块和 NodeJS 中的一样, 一个文件就是一个模块, 模块中的数据都是私有的
• ES6 模块化中的模块和 NodeJS 中一样, 可以通过对应的关键字暴露模块中的数据给外界，暴露之后外界就可以通过对应的关键字导入模块, 使用模块中暴露的数据

ES6 模块化的第一种方式

导出数据

export xxx;

导入数据

import {xxx} from "path";

示例如下

a.js

let name = "BNTang";
export {name};

index.js

import {name} from "./a.js"
console.log(name);

经过打包之后的效果如下所示

• 需要注意的，如果是通过 export {xxx} 的方式导出的数据, 那么在导入接收的时候接收的变量名称必须和导出的名称一致，究其原因是因为在导入的时候本质上是 ES6 的解构赋值

let obj = {
    name: "BNTang",
    age: 34
};
let {name, age} = obj;
console.log(name);
console.log(age);

• 如果是通过 export {xxx} 的方式导出的数据, 又想在导入数据的时候修改接收的变量名称, 那么可以使用 as 来修改

import {name as str} from "./a.js";

console.log(name);
console.log(str);

ES6 模块化的第二种方式

导出数据

export default xxx;

导入数据

import xxx from "path";

示例如下所示

b.js

let name = "BNTang";
export default name;

index.js

import str from "./b.js";

console.log(str);

第二种方式的注意点

• 如果是通过 export default xxx 导出的数据, 那么在接收导出数据的时候变量名称可以和导出的不一致
• 如果是通过 export default xxx 导出的数据, 那么在模块中只能使用一次 export default

修改 b.js 我导出了两次你在看看效果

let name = "BNTang";
export default name;

let age = 33;
export default age;

修改 index.js

import name from "./b.js";
import age from "./b.js";

console.log(name);
console.log(age);

会直接报错，打包之后运行的效果图如下所示

我们在来看看名称，导出的可以和导入的不一致不需要像第一种那样通过 as 来特定的指定一个名称去进行绑定

b.js

let name = "BNTang";
export default name;

index.js

import myName from "./b.js";

console.log(myName);

打包之后运行的效果图如下所示

两种方式混合使用

新建 c.js

let name = "BNTang";
let age = 33;
function say() {
    console.log("hi BNTang");
}
export {name, age, say};

class Person {
    constructor(){
        this.name = "BNTang";
        this.age = 18;
    }
}
export default Person;

修改 index.js

import Person, {name, age, say} from "./c.js";

let p = new Person();
console.log(p);

console.log(name);
console.log(age);
say();

打包之后运行的效果图如下所示