ES6学习总结（四）

发表于 | 分类于 | 阅读次数:

ES6模块化之前，前端模块化之路可谓是布满沧桑，从最开始的刀耕火种，无数的脚本层叠在一起引入

1
2
3
4
<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="c.js"></script>
<script type="text/javascript" src="d.js"></script>
到匿名函数自执行封装代码

1
2
3
(function(window){
    // your code here
 })();

再到后来的common.js，以及后面的require.js和AMD

1
2
3
4
5
6
7
8
9
10
11
// a.js
exports.add = function() {

};
// b.js
var add = require('a').add;
exports.increment = function() {
    
};
// c.js
var inc = require('b').increment;

可以看出前端模块化一直在进步，但是始终没有一致的标准，直到ES6实现模块化之后，前端的模块化之路才慢慢的变得比较统一，ES6使用import和export来实现模块化，默认情况下，模块皆是在严格模式下运行，可以导出外层函数，类与对象或者所有定义的变量

1
2
3
4
5
6
7
8
9
10
// a.js
export function hello() {
	return "hello world" 
}
// b.js 
import {hello} from "a.js";
function sayHello() {
	hello();  
}
sayHello();

ES6模块化中import和export也可以重命名，若是有时候导出的名字跟其他的正在使用中的名字有冲突的时候，在导入的时候可以使用as来重命名（突然间想起来SQL）

1
import {hello as cala} from "a.js";

可以用两个不一样的名字来导出相同的值，ES6中可以使用default关键字来实现默认导出，不能在语句和函数之内使用export关键字，只能在模块顶部使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function hello() {
	return "hello world" 
}

export {
  hello as foo,
  hello as bar
}

//default
var obj={
  key1:value1,
  key2:value2
};
export {obj as default}
export default{
  key1:value1,
  key2:value2
}

ES6模块化负责处理不同模块间的耦合关联，具体到编译时处理所有的模块依赖，将模块打包成文件传输等工作可以用打包工具webpack等来完成，目前来说，ES6模块化的标准仍然在路上，不过也已经普及，以后希望能继续发展，让前端更好的发展。