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