前端模塊化AMD、CMD、CommonJS&ES6

• 模塊化的必要性：
  爲了提升代碼的開發效率，方便代碼的維護，重構。

• 模塊化與組件化的區別：
  模塊能夠理解爲分解的頁面邏輯，好比一個網站的登陸，用戶管理等； 組件則是一個具體的功能。 具體來講一個下拉框是一個組件，一個登陸功能一個模塊。

• 目前常見的模塊化規範（排名不分前後）：

  1. AMD
  2. CMD
  3. CommonJS
  4. ES6

1. AMD

AMD與CMD相似，不一樣的是AMD推崇依賴前置，--requireJS 推廣過程當中出現的規範。

/** main.js中引入1.js及2.js **/
// 執行基本操做
define(["1.js","2.js"],function($,_){
  // some code here
});
/** 若是1.js中又引入了3.js，那就會先廣度優先，而後深度遍歷。   
請求1.js和2.js而後在1.js中進行3.js的請求，3.js返回結果後查看2.js是否已經返回，   
若是已經返回則合併結果後返回給main.js
**/
複製代碼

2. CMD

CMD推崇就近依賴。 --sea.js推廣過程當中出現的規範。
可是由於在AMD&CMD都是在瀏覽器端使用，採用的是異步加載，其實CMD仍是須要在一開始就請求須要的，只是寫法上更方便了。（採用的是正則匹配來得到js文件名，因此註釋掉的仍然會請求，而且只能夠書寫字符串，不可使用表達式）

/** AMD寫法 **/
define(["1", "2"], function(1, 2) { 
     // 依賴前置
  function foo(){
    lib.log('hello world!');
  }

  return {
    foo: foo
  };
});

/** CMD寫法 **/
define(function(require, exports, module) {
    var test = require('./1'); //就近依賴
    test.sayHi();
});

複製代碼

3. CommonJS

大前端使用的Node即時CommonJS的實例。
與AMD&CMD的不一樣之處在於CommonJS規範加載模塊是同步的，也就是說，只有加載完成，才能執行後面的操做。

require參數規則：

3.1. 若是參數字符串以「/」開頭，則表示加載的是一個位於絕對路徑的模塊文件。   
好比，require('/home/marco/foo.js')將加載/home/marco/foo.js。   
3.2. 若是參數字符串以「./」開頭，則表示加載的是一個位於相對路徑（跟當前執行腳本的位置相比）的模塊文件。   
好比，require('./circle')將加載當前腳本同一目錄的circle.js。   
3.3. 若是參數字符串不以「./「或」/「開頭，則表示加載的是一個默認提供的核心模塊（位於Node的系統安裝目錄中），   
或者一個位於各級node_modules目錄的已安裝模塊（全局安裝或局部安裝）。   
3.4. 若是參數字符串不以「./「或」/「開頭，並且是一個路徑，好比require('example-module/path/to/file')，   
則將先找到example-module的位置，而後再以它爲參數，找到後續路徑。   
3.5. 若是指定的模塊文件沒有發現，Node會嘗試爲文件名添加.js、.json、.node後，再去搜索。    
.js件會以文本格式的JavaScript腳本文件解析，.json文件會以JSON格式的文本文件解析，   
.node文件會以編譯後的二進制文件解析。   
3.6. 若是想獲得require命令加載的確切文件名，使用require.resolve()方法。
複製代碼

const webpack = require('webpack');//引入
const sayHi = function (){
    console.log('haha');
}
module.exports = {
    sayHi:sayHi
}//導出
複製代碼

4. ES6

相對於以上的AMD&CMD是用於瀏覽器端，CommonJS用於服務器端。ES6的模塊化很是可喜可賀的是瀏覽器和服務器通用的模塊解決方案。

那它是怎麼作到的呢？
區別與以上三者須要在 進行時加載，ES6儘可能的靜態化，使得編譯時就能肯定模塊的依賴關係，以及輸入和輸出的變量。

使用：
ES6使用import進行引入，export default(比export更友好)進行導出。

import { lastName as surname } from './profile.js';
function foo() {
  console.log('foo');
}

export default foo;
複製代碼

參考文章：

1. 《JavaScript 標準參考教程（alpha）》，by 阮一峯
2. 《ECMAScript 6 入門》，by 阮一峯