ES6学习总结（四）

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

<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>

到匿名函数自执行封装代码

(function(window){
    // your code here
 })();

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

// 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来实现模块化，，默认状况下，模块皆是在严格模式下运行能够导出外层函数，类与对象或者全部定义的变量

// a.js
export function hello() {
    return "hello world" 
}
// b.js 
import {hello} from "a.js";
function sayHello() {
    hello();  
}
sayHello();

ES6模块化中import和export也能够重命名，如果有时候导出的名字跟其余的正在使用中的名字有冲突的时候，在导入的时候可使用as来重命名（忽然间想起来SQL）

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

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

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模块化的标准仍然在路上，不过也已经普及，之后但愿能继续发展，让前端更好的发展。