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模塊化的標準仍然在路上，不過也已經普及，之後但願能繼續發展，讓前端更好的發展。