ES6-模組

---

ES6中我們可以定義模組，就是可以根據應用的需求，把它們分割成不同的小的部分，這些就是我們說的模組。在每個模組裡可以匯出它需要讓其它模組使用的東西，在其它模組裡面可以匯入這些模組匯出的東西，然後就可以在這些模組使用匯入的功能了

一、 常規語法

1. 模組匯出。匯出的可以是變數，也可以函式、類等。

//model.js
let fruit = "檸檬";
let dessert = "蛋糕";
const dinner = (fruit,dessert) => {
    console.log('今天的晚餐是'+fruit+'和'+dessert);
};
export {fruit,dessert,dinner}

2. 模組匯入。

//法一:
import {fruit,dessert,dinner} from "./modules/model.js"
console.log(fruit,dessert);
dinner(fruit,dessert);
//法二:
import * as chef from "./modules/model.js"
console.log(model.fruit,model.dessert);
model.dinner(model.fruit,model.dessert);

二、 重新命名模組匯入匯出

1. 模組匯出。

//model.js
let fruit = "檸檬";
let dessert = "蛋糕";
const dinner = (fruit,dessert) => {
    console.log('今天的晚餐是'+fruit+'和'+dessert);
};
export {fruit,dessert,dinner as supper}
//在匯出時將函式dinner重新命名為supper

2. 模組匯入。

import {fruit,dessert,supper as newsupper} from "./modules/model.js"
//在匯入時將函式supper重新命名為newsupper
console.log(fruit,dessert);
newsupper(fruit,dessert);

三、 模組預設匯出

我們可以設定一下模組可以預設匯出的東西。每個模組都可以有一個預設要匯出的東西。比如我想讓模組裡的 dinner 這個函式成為這個模組預設要匯出的東西。

1. 模組匯出。

//model.js
//法一：
export default function dinner(fruit,dessert){
  console.log('今天的晚餐是'+fruit+'和'+dessert);
}
//法二：
const dinner = (fruit,dessert) => {
  console.log('今天的晚餐是'+fruit+'和'+dessert);
};
export default dinner 
//法三：
const dinner = (fruit,dessert) => {
  console.log('今天的晚餐是'+fruit+'和'+dessert);
};
export { dinner as default}

2. 模組匯入。

import model from "./modules/model.js"
model('檸檬','蛋糕');

最差勁的不是輸的人，而是一開端就不想贏的人。