前端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来支持


展开阅读全文

没有更多推荐了,返回首页