AMD、CMD、CommonJs和ES6對比

1、AMD（異步模塊定義）

AMD（異步模塊定義）是RequireJS在推廣過程當中對模塊定義的規範化產出。AMD是一個概念，RequireJs是對這個概念的實現。好比javascript語言是對ECMAscript語言的實現，ECMAscript是一個組織，RequireJS是這個組織之下制定的一套腳本語言。

// 異步的動態的加載js文件
// 依賴別的庫，經過數組形式加載庫進來['package/lib']
## define定義，依賴lib庫，經過['package/lib']加載這個庫，經過回調函數接受lib參數，能夠獲得lib裏面的一下方法
define(['package/lib'], function(lib){
    function foo(){
        lib.log("hello world!")
    }
    return {    // return輸出
        foo:foo
    }
})
引用的話經過require就能夠加載。就是異步模塊定義，稱爲依賴前置(依賴或須要的時候在最上面定義好)

2、CMD（同步模塊定義）

CMD（同步模塊定義）是SeaJS（淘寶團隊）在推廣過程當中對模塊定義的規範化產出。

// 全部模塊都經過define來定義
define(function(require, exports, module){
    // 經過require引入依賴
    var $ = require('jquery');
    var Spinning = require('./spinning');
})

依賴就近（何時使用，就何時引進來），即用即返回

 

3、CommonJS規範

CommonJS規範-module.exports   是服務端nodeJs後端支持的規範，前端瀏覽器不支持CommonJS規範。

是服務端進行模塊劃分的方式
exports.area = function(r){
    return Math.PI * r * r;
}
exports.circumference = function(r){
    return 2 * Math.PI * r;
}
兩種輸出方式：
module.exports  沒有名字的命名輸出
exports   帶有有名字的輸出

 

4、ES6特性 export/import 導出/導入

export default{}  // 默認導出
import router from './router' // 導入

export function formatDate(date, fmt) {} // 向瀏覽器暴露這個方法
import { format } from 'common/js/utils' // 導入

export let sum = (x,y)=>{ return x+y }
import * as util from './util'    // 經過*封裝起來
console.log(`sum:${util.sum(1,6)}`)

至關於：
define('util',function(){
    return {
        sum:function(){
        
        },
        minus:function(){
        
        }
    }
})

methods:{
    increment(){
        this.$emit("incre");
        import('./../util')   // 異步加載  與require('...')同樣的
    }
}