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

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();