首页 > web前端 > js教程 > 正文

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

高洛峰
发布: 2016-11-05 15:27:37
原创
1533 人浏览过

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

 


相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板