AMD、CMD规范详解

AMD规范

1.1什么是AMD规范

Asynchronous Module Definition,用白话文讲就是 异步模块定义,对于 JSer 来说,异步是再也熟悉不过的词了,所有的模块将被异步加载,模块加载不影响后面语句运行。所有依赖某些模块的语句均放置在回调函数中。

1.1.2AMD规范是怎么出来的

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

1.2用法

AMD规范定义了一个自由变量或者说是全局变量 define 的函数。

define( id?, dependencies?, factory );

第一个参数 id 为字符串类型,表示了模块标识,为可选参数。若不存在则模块标识应该默认定义为在加载器中被请求脚本的标识。如果存在,那么模块标识必须为顶层的或者一个绝对的标识。

第二个参数,dependencies ,是一个当前模块依赖的,已被模块定义的模块标识的数组字面量。

第三个参数,factory,是一个需要进行实例化的函数或者一个对象。

1.3基本导入导出

在AMD中,导入和导出模块的代码,都必须放置在define函数中

define([依赖的模块列表], function(模块名称列表){
    //模块内部的代码
    return 导出的内容
})

1.4模块

创建模块标识为 alpha 的模块,依赖于 require, export,和标识为 beta 的模块

define("alpha", [ "require", "exports", "beta" ], function( require, exports, beta ){
    export.verb = function(){
        return beta.verb();
        // or:
        return require("beta").verb();
    }
});
1.4.1alpha

返回对象字面量的异步模块

define(["alpha"], function( alpha ){
    return {
        verb : function(){
            return alpha.verb() + 1 ;
        }
    }
});
1.4.2无依赖

无依赖模块可以直接使用对象字面量来定义

define( {
    add : function( x, y ){
        return x + y ;
    }
} );
1.4.4类似与 CommonJS 方式定义
define( function( require, exports, module){
    var a = require('a'),
          b = require('b');

    exports.action = function(){};
} );

CMD规范

1.1什么是CMD规范

Common Module Definition,公共模块定义规范,在CMD中 一个模块就是一个文件

1.1.2CMD规范是怎么出来的

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

1.2用法

SeaJS要解决的问题和requireJS一样,只不过在模块定义方式和模块加载(可以说运行、解析)时机上有所不同

在CMD规范中,一个文件就是一个模块,使用define来进行模块

define(factory)

这里的define是一个全局函数,用来定义模块,这里的factory参数既可以是函数,又可以是字符串或对象。如果参数是字符串或对象时,表示该模块的接口就是是该对象或字符串

define({'website':'oecom'});
define('这里是OECOM');

当factory为函数时,此函数就是模块的构造方法,该函数默认为提供三个参数:require,exports,module

define(function(require,exports,module){

})

1.2.2同步加载

require参数也是一个方法,接收的参数为模块标识,其实就是需要加载模块的相对路径,作用就是加载其他模块。

define(function(require,exports,module){
    var a = require('./a');
    a.out();//假设模块a有out方法。
})

1.2.3异步加载

直接使用require加载属于是同步加载,require提供了async方法来在模块内部进行也不加载模块,并在加载完成以后执行指定的回调函数。

define(function(require,exports,module){
    require.async('./a',function(a){
        a.doSomething()
        })
        require.async(['./c','./b'],function(c,b){
        c.doSomething()
        b.doSomething()
        })
    }

注意require 是同步往下执行,require.async 则是异步回调执行。require.async 一般用来加载可延迟异步加载的模块。

1.2.4exports

exports是一个用来想外接提供模块接口的对象

define(function(require,exports){
    var name = 10;
    exports.name = name;
    exports.out = function(){
        console.log("输出内容")
    }
    })

当加载的时候就可以直接使用下面的方式了:

define(function(require,exports,module){
    var a = require('./a');
    a.out();//输出内容
    console.log(a.name);//10
})

当然导出模块还可以直接使用return的方式

define(function(require){
    return{
        name:10,
        out:function(){
            console.log("输出内容")
        }
    }
})

但是千万不要写成

 exports = {
        name:10,
        out:function(){
            console.log("输出内容")
        }
  };

但是可以用module.exports的形式来写:

define(function(require,exports,module){
    module.exports = {
        name:10,
        out:function(){
            console.log("输出内容")
        }
    }
})

提示exports 仅仅是 module.exports 的一个引用。在 factory 内部给 exports重新赋值时,并不会改变 module.exports 的值。因此给 exports 赋值是无效的,不能用来更改模块接口。

还有一点就是导出模块不要写在回调函数里,导出是需要同步执行,否则导入是会导入失败。

二者区别

  1. 两者定位有差异。RequireJS 想成为浏览器端的模块加载器,同时也想成为 Rhino / Node 等环境的模块加载器。SeaJS 则专注于 Web 浏览器端,同时通过 Node 扩展的方式可以很方便跑在 Node 服务器端

  2. 两者遵循的标准有差异。RequireJS 遵循的是 AMD(异步模块定义)规范,SeaJS 遵循的是 CMD (通用模块定义)规范。规范的不同,导致了两者API 的不同。SeaJS 更简洁优雅,更贴近 CommonJS Modules/1.1 和 Node Modules 规范。

  3. 两者社区理念有差异。RequireJS 在尝试让第三方类库修改自身来支持 RequireJS,目前只有少数社区采纳。SeaJS 不强推,而采用自主封装的方式来“海纳百川”,目前已有较成熟的封装策略。

  4. 两者代码质量有差异。RequireJS 是没有明显的 bug,SeaJS 是明显没有 bug。

  5. 两者对调试等的支持有差异。SeaJS 通过插件,可以实现 Fiddler 中自动映射的功能,还可以实现自动 combo 等功能,非常方便便捷。RequireJS无这方面的支持。

  6. 两者的插件机制有差异。RequireJS 采取的是在源码中预留接口的形式,源码中留有为插件而写的代码。SeaJS 采取的插件机制则与 Node 的方式一致开放自身,让插件开发者可直接访问或修改,从而非常灵活,可以实现各种类型的插件。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值