ECMAScript入門（七）--Module語法

你帶着你的同事聯調的時候
????

從古至今，Javascript都沒有自帶的模塊體系，能作的，也就只是將不一樣做用的代碼寫在不一樣的JS文件中，而後經過<script>分別引入。這樣作又一個很是致命的問題，那就是咱們要定位一個方法變得很是的困難。

一個靈活的模塊體系，能讓你的代碼之間的依賴關係更加直觀，一個好的模塊式的寫法讓沒個方法都能很快的找到聲明位置所在。

在NODE中是有這種寫法的，咱們稱爲CMD語法，就是經過require關鍵詞，引入所要依賴的文件。

固然，隨着前端在WEB開發中佔據的比重愈來愈高，客戶端JS的模塊化也尤其重要。其實已經有比較成熟的前端框架來實現這個功能，好比RequireJs和Seajs。ES6的出現，讓JS實現模塊功能變得更�加簡單。

//requirejs的語法
define(['moudleA'], function(){
　　function foo(){
　　　　doSomething();
　　}
　　return {
　　　　foo : foo
　　};
});

//seajs的用法
// 全部模塊都經過 define 來定義
define(function(require, exports, module) {
  // 經過 require 引入依賴
  var $ = require('jquery');
  var Spinning = require('./spinning');
  // 經過 exports 對外提供接口
  exports.doSomething = ...
  // 或者經過 module.exports 提供整個接口
  module.exports = ...
});

ES6的Module語法

ES6的模塊功能主要經過兩個關鍵字來實現export和import。

從字面上不難看出，export是輸出，即用來將模塊內部的方法暴露出來，而import是輸入，即引入其餘模塊的方法，便於在本模塊中調用其餘模塊的方法。

export關鍵字

正常來說，咱們能夠將每一個模塊都寫成一個獨立的文件，因爲Javascript做用域的問題，每一個模塊內部的變量及方法都是私有的，即只能內部訪問，外部沒法訪問。要想使模塊內部的方法能夠從外部訪問，就必須使用export關鍵字。

//moduleA.js
var moduleA1 = "a";
var moduleA2 = "aa";
function moduleFunc(){
    console.log(moduleA2);
}
export {
    moduleA1,
    moduleA2 as moduleA,
    moduleFunc as module
};

如上面的代碼所示，在模塊中聲明瞭變量和方法，咱們只須要將變量名或者方法名，置於export的做用下，就能夠被其餘模塊使用。

as關鍵詞能夠用來重命名，上面的例子中moduleA就等於moduleA2。

這裏須要注意的是，export定義的是對外的接口，接口必須在模塊內部被聲明或實現過，否則就會報錯。

var a = 1;
export a;//不報錯

export b;//報錯

import關鍵字

使用export定義了模塊的接口以後，其餘模塊就能夠經過import命令來引入這個模塊

//moduleB.js
import {moduleA1, moduleA} from './moduleA.js';

import {module as moduleFunc} from './moduleA.js';

moduleFunc();

如上面的代碼所示，經過import關鍵字從moduleA.js中引入了moduleA1、moduleA2、moduleFunc()三個變量，這樣在這個模塊中就能使用A模塊中的變量了。

須要注意的是，import關鍵字有提高效果，也就是不管寫在哪一個位置，都和寫在模塊頂部效果同樣。import加載模塊的過程是在編譯階段執行的，代碼運行以前就已經完成了加載過程。

若是咱們須要引入一個模塊中的全部變量，能夠用下面的方法

//moduleC.js
import * as module from './moduleA.js';

module.moduleA;//"a"
module.moduleFunc();//"aa"

另外，import加載的文件是不會重複加載的

//moduleD.js
import {moduleA1} from './moduleA.js';
import {moduleA2} from './moduleA.js';

//等同於
import {moduleA1, moduleA2} from './moduleA.js';

moduleA.js只會加載一次。

export default

export default是用來聲明模塊的默認接口的。

//hello.js
var name = "dahan";
function sayHello(){
    console.log("Hello");
}

export default sayHello;

//person.js
import hello from './hello.js';
hello();
//"Hello"

使用export default聲明的接口，引入的時候不須要使用大括號，也不用指定特定的變量名。