前端commonjs、AMD、CMD、ES6等模块化的对比

CommmonJS用于node端，是同步加载的
AMD依赖于requirejs,是异步加载的，是提前加载，立即加载
CMD依赖于seajs,是异步加载，延后加载，就近加载，用时加载
ES6是ES2015的简称，一般通过export来暴露模块，import来导入模块

CommonJS

CommonJS模块化规范：

1.通过module.exports或exports来暴露模块

2.通过require来加载模块

//用法举例

//a.js文件
var math = {
add:function(a,b){
return a+b;
}
}
module.exports = math	
//module是代表当前模块，通常通过module.exports来暴露模块


//b.js
var math = require('./a.js')		//模块依赖,通过require导入模块
console.log(math.add(1,2))		//3

//一个模块有多个变量时
//a.js
var x = 5;
var addX = function (value) {
  return value + x;
};
module.exports.x = x;
module.exports.addX = addX;

//b.js
var example = require('./a.js');

console.log(example.x); // 5
console.log(example.addX(1)); // 6

注意：当被暴露的对象是单一的值时，不能通过exports来暴露，只能通过module.exports来暴露

var x = 5
module.exports.x = x  //不能使用exports.x = x

CommonJS的特点

1.同步加载，一般用于node端

2.一次加载，多次使用。对同一个模块而言，只会运行一次，多次使用时会从缓存中获取

3.模块加载的顺序，按照它出现的顺序

4.代码都运行在模块作用域，不会造成全局污染

AMD

AMD是一种异步加载模块的方式，主要用在浏览器环境中。主要依赖于require.js库

AMD模块化规范：

1.通过define()方法定义模块

2.通过require方法加载模块

使用方法

1.先加载require.js(从官网下载最新版本)

//通过这种方式先加载requirejs
<script src="js/require.js"></script>

//为防止加载require.js阻塞页面，可以将其写在页面的底部，或写成以下这种形式
　<script src="js/require.js" defer async="true" ></script>
//async属性表明要异步加载，避免网页失去响应，IE不支持这个属性，为兼容IE,所以需要添加defer属性

2.创建一个主文件(入口文件)

//创建一个main.js,我们要写的代码从这里开始
//在html里导入以下js
<script src="js/require.js" data-main="js/main"></script>

//data-main的作用时指出我们的入口文件在哪,require.js会第一个加载主文件

3.主文件的写法

//若主模块不依赖于其他模块，则不必要使用requirejs

//一般而言，主模块要依赖于其他模块，需要使用AMD的require方法来加载依赖的模块

//main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){

　　　　// some code here

});
//require第一个参数时一个数组，表示依赖的模块，第二个参数是一个回调，回调的参数表示对应的模块，这样在回调中就可以使用这些模块了

//它的回掉函数只有在所有模块都加载完成才开始执行

4.在主模块中配置模块加载的一些行为(通过require.config()方法)

// main.js

require.config({
　　paths: {

　　　　　　"jquery": "lib/jquery.min",
　　　　　　"underscore": "lib/underscore.min",
　　　　　　"backbone": "lib/backbone.min"
　　　　}
});

//require配置一般写在main.js入口文件的顶部
//paths属性表示要加载的文件的路径，可以写本地路径，或服务器路径
//baseUrl属性可以用来改变基目录，上面代码可用以下方式表示

require.config({
　　　　baseUrl: "js/lib",
　　　　paths: {
　　　　　　"jquery": "jquery.min",
　　　　　　"underscore": "underscore.min",
　　　　　　"backbone": "backbone.min"
　　　　}
});

5.定义模块(通过define()方法)

//a.js
//通过define来定义模块,
//如果该模块还依赖其他模块，则第一个参数是一个数组，表示其依赖的模块
 define(['package/lib'], function(lib){
  function foo(){
    lib.log('hello world!');
  }

  return {
    foo: foo
  };
});

//b.js
//在其他模块使用a.js
require(['a'], function (a){
   a.foo()
});

CMD(seajs)

//依赖就近，延迟加载
define(function (require, exports, module){
  var someModule = require("someModule");
  var anotherModule = require("anotherModule");

  someModule.doTehAwesome();
  anotherModule.doMoarAwesome();

  exports.asplode = function (){
    someModule.doTehAwesome();
    anotherModule.doMoarAwesome();
  };
});

ES6

模块化规范：

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。
export 命令用于规定模块的对外接口。
import 命令用于输入其他模块提供的功能。

//export暴露接口
//圆面积计算
export function area(radius) {
  return Math.PI * radius * radius;
}
 
//圆周长计算
export function circumference(radius) {
  return 2 * Math.PI * radius;
}

//main.js
//import导入模块
//以大括号的形式加载对外的模块
import {area,circumference} from './hangge';
console.log('圆面积：' + area(10));
console.log('圆周长：' + circumference(11));

//也可以通过以下方式导入所有接口
import * as circle from './hangge';
console.log('圆面积：' + circle.area(10));
console.log('圆周长：' + circle.circumference(11));export default:用来默认暴露模块，导入时不需要使用大括号

export default:用来默认暴露模块，导入时不需要使用大括号

//a.js
//圆面积计算（作为默认接口）
export default function(radius) {
  return Math.PI * radius * radius;
}
 
//圆周长计算
export function circumference(radius) {
  return 2 * Math.PI * radius;
}


//b.js
//area导入的是export default暴露的接口
import area, {circumference} from './a';
console.log('圆面积：' + area(10));
console.log('圆周长：' + circumference(11));


//注:es6 需要babel来支持

前端commonjs、AMD、CMD、ES6等模块化的对比

猜你喜欢