视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JavaScript模块化思想之CommonJS、AMD、CMD、UMD
2020-11-27 20:31:41 责编:小采
文档

我所了解的三种模块加载方式分别是CommonJS、AMD和CMD

网上关于这三种模块加载方式讲解的文章很多,我就简单的做个介绍,如果想深入了解一下可以去网上查阅一下相关的资料。

(1)CommonJS

在CommonJS中,一个单独的文件就是一个模块。被调用模块内使用exports暴露接口,调用模块使用require调用暴露出来的接口。

示例如下:

// student.js
// 私有变量
var a = 123;
function add(student) {
 console.log('Add student:' + student);
}
// exports对象上的方法和变量是外部可访问的
exports.add = add;

1 // 使用require加载student.js模块2 var student = require('./student.js');

CommonJS加载模块是“同步”的,也就是说,如果我们要调用被调用模块中的公共方法和变量,一定要等被调用模块加载完毕后才可以。用于服务端的NodeJS就采用的CommonJS来管理模块。但是在浏览器端,同步加载会因为收到网络环境的影响存在很大的不确定性,所以CommonJS不适合于浏览器端。

如果在浏览器环境下想要从服务器加载模块,就必须使用“异步”的方式。所以就出现了AMD和CMD解决方案。

(2)AMD(Asynchromous Module Definition)

requireJS就是一种使用AMD异步加载模块的管理插件。AMD模块支持对象,函数,构造器,字符串,JSON等各种类型的模块。

AMD规范使用define方法定义模块:

//define(param1,param2) 通过define方法定义模块
//@param1: 数组,元素为引入的依赖模块
//@param2: 回调函数,通过形参传入依赖
define(['firstModule','secondModule'],function(firstModule,secondModule){
 function foo(){
 firstModule.test();
 }
 // 暴露foo()
 return {foo:foo};
});

同时,AMD允许使用define方法定义模块是兼容CommonJS规范,可以使用require和exports。

define(function(require,exports,module){
 var reqModule = require("./firstModule");
 reqModule.test();

 exports.pubPort = function(){
 // 函数体
 }
});

(3)CMD

CMD和AMD的区别主要体现在对依赖模块的执行时机上,AMD是“依赖前置”。主张提前加载所需模块,CMD是“依赖就近”。也就是可以用到的时候再加载。有点类似于Java中的“饿汉模式”和“懒汉模式”。

从requireJS 2.0开始,也可以延迟加载了。

举个栗子:

// AMD——依赖前置
define(['./a','./b'],function(a,b){
 //提前声明要依赖的模块
});

// CMD
define(function(require,exports,module){
 //依赖可以就近写
 var a = require('./a');
 a.test();

 //软依赖
 if(status){
 var b = require('./b');
 b.test();
 }

这里有个名词叫软依赖,我个人理解软依赖就是不一定依赖,硬依赖就是一定会依赖的模块,软依赖就是需要才依赖,不需要就不依赖,根据status判断。

(4)UMD

UMD——Universal Module Definition,通用的模块定义

UMD等于CommonJS加上AMD。UMD的工作其实就是做了一个判断:

- 先判断当前环境对NodeJs支持的模块是否存在,存在就用Node.js模块模式(exports)。

- 如果不支持,就判断是否支持AMD(define),存在就使用AMD方式加载。

感觉自己对UMD还不是很理解,不知道具体应该怎么去用。还是继续去了解了解。加油!

下载本文
显示全文
专题