AMD、CMD、CommonJs和ES6对比

一、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就可以加载。就是异步模块定义，称为依赖前置(依赖或需要的时候在最上面定义好)

二、CMD（同步模块定义）

CMD（同步模块定义）是SeaJS（淘宝团队）在推广过程中对模块定义的规范化产出。

// 所有模块都通过define来定义
define(function(require, exports, module){
    // 通过require引入依赖
    var $ = require('jquery');
    var Spinning = require('./spinning');
})

依赖就近（什么时候使用，就什么时候引进来），即用即返回

 

三、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   带有有名字的输出

 

四、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('...')一样的
    }
}