AMD/CMD和CommonJS的区别

  1. commonjs是用在服务器端的,是同步的,如node.js
  2. amd,cmd是用在浏览器端的,是异步的。其中amd先提出来,cmd是根据commonjs和amd的基础上提出来的。

commonjs

Commonjs是服务器端的模块规范,Node.js采用了这个规范

根据Commonjs规范,一个单独的文件就是一个模块,加载模块使用require方法,该方法读取文件并执行,最后,返回文件的内部expots对象。

CommonJS加载模块是同步的,只有加载完成之后才可以执行后面的操作。像Node.js主要用于服务器的编写,加载的模块文件一般都已经存在本地硬盘上了,所以加载起来比较快。不用考虑异步加载的方式。所以,CommonJS规范比较适用。但是如果是在浏览器端,要从服务器加载模块,就必须是异步模式,所以才有了AMD,CMD解决方案。

AMD/CMD

AMD是“Asynchronous Module Definition”的缩写,意思就是“异步模块定义”,它采用异步方式加载模块,模块的加载不影响它后面语句的运行,所有依赖的模块的语句,都定义在一个回调函数中,等到加载完之后,这个回调函数才会运行。

AMD也采用了require语句加载模块,但是不同于CommonJS

主要由两个JavaScript库实现了AMD规范。require.js和curl.js

相同点:都是异步加载

AMD推崇前置依赖,在定义模块的时候就要声明其依赖的模块。AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。

CMD推崇后置依赖,只有在用到某个模块的时候才去require。CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

对于依赖的模块,AMD是提前执行的,CMD是延迟执行的。

CMD在AMD基础上改进,可按需加载,预先下载代码,但并没有立即执行,即“就近书写,延迟执行”


AMD
//a.js
define(function(){
    console.log('a.js'执行);
    return {
        hello: function(){
            console.log('This is a.js');
        }
    }
})

//b.js
define(function(){
    console.log('b.js执行');
    return {
        hello: function(){
            console.log('hello, b.js');
        }
    }

});

//main.js
require(['a','b'],function(a,b){
    console.log('main.js执行');
    a.hello();
    $('#b').click(function(){
        b.hello();
    });
});
CMD
//a.js
define(function(){
    console.log('a.js执行');
    return{
        hello: function(){
            console.log('This is a.js');
        }
    }
});

//b.js
define(function(){
    console.log('b.js执行');
    return {
        hello: function(){
            console.log('This is b.js');
        }
    }
});

//main.js
define(function(){
    console.log('main.js执行');
    var a = require('a');
    a.hello();
    $('#b').click(function(){
        var b = require('b');
        b.hello();
    })
});

  转载请注明: TomoFur AMD/CMD和CommonJS的区别

 上一篇
字符串常用方法 字符串常用方法
.length返回字符换长度 .charAt(索引)返回指定索引位置的字符,如果索引超过了字符串长度会返回空串 .charCodeAt(索引)返回给定索引位置的字符的字符编码 var str = 'hello'; console.log(s
2019-04-30
下一篇 
virtual DOM及diff算法 virtual DOM及diff算法
什么是virtual dom?从本质上而言,Vdom只是一个用于描述DOM节点的原生JS对象,并且最少包括tag,props,和children三个属性,下面是一个经典的Vdom例子: { tag: "div", props
2019-04-22
  目录