ES6模块化使用方式

ES6之前javascrip没有模块化的概念，是ES6的新特性。本文主要介绍js模块化的使用。

一、ES6模块化的第一种方式:

1.1 使用方法

• 导出数据：export {xxx};

在ES6中每一个模块即是一个文件，在文件中定义的变量，函数，对象在外部其他模块中是无法获取的。如果你希望外部模块可以读取模块当中的内容，使用export来对其进行暴露（输出）。

• 导入数据：import {xxx} from “path”;
  -a.js

1.2.注意点：

1. 如果是通过export {xxx};方式导出数据，那么在导入接收的时候接收的变量名称必须和导出的名称一致。原因是因为在导入的时候本质上是ES6的解构赋值。

注意点1的案例：

a.js为导出文件

let name = "gg";
/*
ES6提供了export关键字用于暴露数据
NodeJS是exports
* */
export {name};//将a模块的name暴露给外界使用
let age = "3";
export {age};

b.js导如文件a.js

/*
ES6提供了import 关键字用于导入
NodeJS是require：const less = require('less');
* */
import {name} from "./a.js";//导入a模块，并且使用name接受a模块暴露的参数 
console.log(name);

回顾解构赋值
将对象中的属性提取到变量中,可以使用ES6的解构赋值
注意：解构赋值中属性同变量名称必须一模一样。

解构赋值案例：

let obj = {
    name1:"gg",
    age:34
};
let {name1, age} = obj;
console.log(name1, age);//gg,34

2. 如果是通过export {xxx};方式导出数据，又想在导入数据的时候修改接收的变量名称，那么可以使用as来修改.
   但是如果通过as修改了接收的变量名称，那么原有的变量名称就会失效。

注意点2案例：通过as修改接收的变量名称

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

二、ES6模块化的第二种方式:

2.1 使用方法

• 导出数据：export default xxx;
• 导入数据：import xxx from “path”;

2.2 注意点：

1. 如果是通过export default xxx;导出数据，那么在接受导出数据的时候，变量名称可以和导出的名称不一致。
   变量名称可以和导出的名称不一致。b.js为导出文件

let name = "jj";
/*
ES6提供了export关键字用于暴露数据
NodeJS是exports
* */
export default name;//将a模块的name暴露给外界使用
let age = "3";
export default age;

import str from "./b.js";
console.log(str);

2. 如果是通过export default xxx;导出数据，那么在模块中只能使用一次export default
   模块中只能使用一次export default

/*
import name from "./b.js";
import age from "./b.js";
console.log(name, age);//报错
*/

三、两种方式混合使用

-c.js为导出文件

/*第一种方式暴露*/
let name = "lnj";
let age = 33;
function say() {
    console.log("hi");
}
export {name,age,say};
/*第二种方式暴露*/
class Person {
    constructor(){
        this.name = "gg";
        this.age = 3;
    }
}
export default Person;

import Person,{name,age, say} from "./c.js";
let p = new Person();
console.log(p);
console.log(name);
console.log(age);
say();