ES6

ES6学习笔记15:ES6中的模块(module)

Posted by mieruko on 2016-12-25

前言

ES6的这个变化（引入模块的概念）非常重要，尤其是在后端编程来看。
前段时间用Node写demo的时候，完全离不开modules啊。
当然，浏览器端也是用的越来越多的，新版本的框架全家桶齐刷刷上了ES6，齐刷刷用了modules。
总之，重要！！

模块的导出和导入

先来看如何写一个模块并把它导出！
假设我们现在有同一个目录下的两个文件，script1.js和script2.js

script1.js:

1
2
3
4
5
6
'use strict'

let fruit = "🍋";
let dessert = "🍰";

export {fruit, dessert};

好！导出了！
现在如果你想在另一个文件(script2.js)里导入它：

1
2
3
4
5
'use strict';

import {fruit, dessert} from "./script1";

console.log(fruit, dessert);

当然，如果想要导入全部内容，我们有更简单的写法: 

1
import * as xxx from "./script1";

经过测试，必须有as!必须有as!!

重命名导入导出模块中的东西

我可以这样写script1.js: 

1
2
3
4
5
6
7
8
9
10
'use strict'

let fruit = "🍋"；
let dessert = "🍰";

function dinner(fruit, dessert) {
    console.log(`今天晚餐是: ${fruit}与${dessert}`);
}

export {fruit, dessert, dinner as supper}

于是script2.js里面必须这样写： 

1
2
3
'use strict'

import {fruit, dessert, supper} from "./script1";

当然我还可以导入的时候再改一次名字: 

1
2
3
'use strict'

import {fruit, dessert, supper as dinner} from "./script1";

ok,万事大吉！

export default

我们可以设置一下模块默认要导出的东西：

script1.js: 

1
2
3
4
5
6
7
8
'use strict'

let fruit = "🍋"；
let dessert = "🍰";

export default function dinner(fruit, dessert) {
    console.log(`今天晚餐是: ${fruit}与${dessert}`);
}

或者写成另一种格式: 

1
export {dinner as default};

然后在script2中就可以这样做啦：

script2.js:

1
import xxx from "./script1.js";

xxx是你给这个默认导入的东西起的名字。
比如: 

1
import chef from "./script1.js";

于是chef就和dinner函数是一个东西！

结语

至此，总算差不多把ES6给整了个差不多明白了。
好，开始写demo，写demo，写demo！

FEATURED TAGS
ES6