您好,欢迎访问一九零五行业门户网

JavaScript模块化思想之CommonJS、AMD、CMD、UMD

我所了解的三种模块加载方式分别是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还不是很理解,不知道具体应该怎么去用。还是继续去了解了解。加油!
其它类似信息

推荐信息