AMD和CMD的区别(在浏览器中的规范)

2019-08-21  本文已影响0人  codingQi

前言:

在开始之前,先说一下CommonJs,以前以为CommonJs就是CMD规范,原来是大错特错了,主要还是没分清这几个东东。
CommonJs主要是在node中的用法,即:module.exportsrequire方式。并且没有过时哦!
下面是我没用过的两种规范,但是之前见过,这也算是前端的一个发展吧,因此现在做一个了解和整理,也算是有点弄清楚了,后面不至于闹笑话了,不至于什么都不知道了,啊哈哈哈哈!

好啦,进入主题!!!!!!

一、AMD

特点:推崇依赖前置,异步模块定义,在定义模块的时候就要声明其依赖的模块。===== 等依赖都加载完了才去加载主模块,即回调函数。

AMD是RequireJs在推广过程中对模块定义的规范化产出。

define(['package/lib'],function(lib){
    function foo(){
        lib.log("hello world");
    };
    return {
        foo:foo
    };
})

// 加载模块
require(['myModule'], function (my){
  my.printName();
});

说明:require()函数接受两个参数:
(1)第一个参数是一个数组,表示所依赖的模块
(2)第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。

require()函数在加载依赖的函数的时候是异步加载的,这样浏览器不会失去响应,它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。

RequireJS主要解决两个问题:
1、多个js文件可能有依赖关系,被依赖的文件需要早于依赖它的文件加载到浏览器。
2、js加载的时候浏览器会停止页面渲染,加载文件越多,页面失去响应时间越长。

二、CMD(CMD 即Common Module Definition通用模块定义)

特点:推崇依赖就近,同步概念即用即加载模块。===== 即:只有在用到某个模块的时候再去require。

CMD是SeaJs在推广过程中对模块定义的规范化产出。

Sea.js 推崇一个模块一个文件,遵循统一的写法:define(id?, deps?, factory),因为CMD推崇一个文件一个模块,所以经常就用文件名作为模块id

CMD推崇依赖就近,所以一般不在define的参数中写依赖,在factory中写:
factory是一个函数,有三个参数,function(require, exports, module)
1、require 是一个方法,接受 模块标识 作为唯一参数,用来获取其他模块提供的接口:require(id)
2.、exports 是一个对象,用来向外提供模块接口
3.、module 是一个对象,上面存储了与当前模块相关联的一些属性和方法

// 所有模块通过defined来定义
define(function(require,export,module){
    // 通过require引入依赖
    var $=require('jqurey');
    var spinning=require('./spinning');
})

// 加载模块
seajs.use(['myModule.js'], function(my){

});
上一篇 下一篇

猜你喜欢

热点阅读