`
zccst
  • 浏览: 3315427 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

CMD规范

阅读更多
作者:zccst

在 CMD 规范中,一个模块就是一个文件。代码的书写格式如下:
define(factory);

define Function

define 是一个全局函数,用来定义模块。

define define(factory)

define 接受 factory 参数,factory 可以是一个函数,也可以是一个对象或字符串。

factory 为对象、字符串时,表示模块的接口就是该对象、字符串。比如可以如下定义一个 JSON 数据模块:

define({ "foo": "bar" });
也可以通过字符串定义模板模块:

define('I am a template. My name is {{name}}.');
factory 为函数时,表示是模块的构造方法。执行该构造方法,可以得到模块向外提供的接口。factory 方法在执行时,默认会传入三个参数:require、exports 和 module:

define(function(require, exports, module) {

  // 模块代码

});

define define(id?, deps?, factory)

define 也可以接受两个以上参数。字符串 id 表示模块标识,数组 deps 是模块依赖。比如:

define('hello', ['jquery'], function(require, exports, module) {

  // 模块代码

});
id 和 deps 参数可以省略。省略时,可以通过构建工具自动生成。

注意:带 id 和 deps 参数的 define 用法不属于 CMD 规范,而属于 Modules/Transport 规范。

define.cmd Object

一个空对象,可用来判定当前页面是否有 CMD 模块加载器:

if (typeof define === "function" && define.cmd) {
  // 有 Sea.js 等 CMD 模块加载器存在
}




1,require
require(id);

require.async(id, callback);异步加载

require.resolve(id);不加载模块,仅仅将短串解析成完整路径

2,exports  是一对象,用来向外提供模块接口
define(function(require, exports){
    exports.foo = "bar";
    exports.doSomethin = function(){};
});
还可以通过return对外提供接口
define(function(require, exports){
    return {
      foo : "bar";
      exports.doSomethin : function(){};
    };
});

还可以写成module.exports
define(function(require, exports){
    module.exports = {
      foo : "bar";
      exports.doSomethin : function(){};
    };
});

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

3,module  是一个对象,存储了与当前模块相关联的一些属性和方法

module.id String

模块的唯一标识。

define('id', [], function(require, exports, module) {

  // 模块代码

});
上面代码中,define 的第一个参数就是模块标识。

module.uri String

根据模块系统的路径解析规则得到的模块绝对路径。

define(function(require, exports, module) {

  console.log(module.uri);
  // ==> http://example.com/path/to/this/file.js

});
一般情况下(没有在 define 中手写 id 参数时),module.id 的值就是 module.uri,两者完全相同。

module.dependencies Array

dependencies 是一个数组,表示当前模块的依赖。

module.exports Object

当前模块对外提供的接口。

传给 factory 构造方法的 exports 参数是 module.exports 对象的一个引用。只通过 exports 参数来提供接口,有时无法满足开发者的所有需求。 比如当模块的接口是某个类的实例时,需要通过 module.exports 来实现:

define(function(require, exports, module) {

  // exports 是 module.exports 的一个引用
  console.log(module.exports === exports); // true

  // 重新给 module.exports 赋值
  module.exports = new SomeClass();

  // exports 不再等于 module.exports
  console.log(module.exports === exports); // false

});
注意:对 module.exports 的赋值需要同步执行,不能放在回调函数里。下面这样是不行的:

// x.js
define(function(require, exports, module) {

  // 错误用法
  setTimeout(function() {
    module.exports = { a: "hello" };
  }, 0);

});
在 y.js 里有调用到上面的 x.js:

// y.js
define(function(require, exports, module) {

  var x = require('./x');

  // 无法立刻得到模块 x 的属性 a
  console.log(x.a); // undefined

});













分享到:
评论

相关推荐

    CMD规范之seajs

    CMD规范之Seajs Seajs是一款轻量级的前端模块加载器,它遵循CommonJS规范,使得JavaScript在浏览器端也能实现模块化的开发。这个规范主要包含模块定义、模块加载和模块化开发的思想,大大提高了代码的可维护性和...

    将一些js库改写成符合cmd规范的模块

    本话题将深入探讨如何将现有的JavaScript库改写为符合CMD规范的模块,以便更好地在项目中利用和管理这些库。 CMD规范的核心思想是延迟执行和按需加载。它允许开发者在脚本中使用`define`函数来定义模块,并通过`...

    基于CMD规范的fangfis模块合并gulp插件

    1. **模块合并**:能够根据CMD规范,自动解析并合并多个模块文件为一个单一的文件,减少网络请求,提高页面加载速度。 2. **异步调用支持**:支持异步调用模块合并,这意味着在处理大型项目或者有动态依赖时,可以...

    JavaScript模块规范之AMD规范和CMD规范

    CMD规范的核心思想是“按需加载”,在CMD中,模块的定义、依赖和加载可以按需进行,可以在任何时刻去加载一个模块,而无需在定义的时候就指定依赖。这使得CMD在某些方面比AMD更加灵活。CMD的define函数不仅定义了...

    HaloJS是一款基于ZeptoJS并采用CMD规范面向移动端提供各种实用工具的组件库

    HaloJS的组件化设计是遵循CMD规范的,CMD是Sea.js推广的一种模块化开发方式,它推崇的是延迟执行和依赖注入,这使得代码组织更加清晰,易于维护和扩展。在CMD规范下,每个模块都可以独立开发,减少了模块间的耦合度...

    遵循CMD规范的sea.js

    sea.js遵循CMD规范,用于实现js在浏览器端的模块化开发。 sea.js中只有局部require。

    JS中的模块规范(CommonJS,AMD,CMD

    - **依赖延迟加载**: 在CMD规范中,只有当真正需要依赖时才会去加载它,这与AMD规范有所不同。 示例: ```javascript // 使用 Sea.js 实现 CMD 规范 define(function(require, exports, module) { var dep1 = ...

    CMD_DEMO.zip

    CMD_DEMO.zip是一个压缩包,其中包含了CMD规范的示例DEMO。CMD,全称Command Prompt,是Windows操作系统中的命令行界面,用户可以通过输入特定的命令来执行各种系统操作。这个压缩包很可能是为了帮助用户理解和学习...

    JS中的模块规范(CommonJS,AMD,CMD(少用))

    CMD规范的主要特点包括: - CMD同样使用`define()`函数定义模块。 - 模块可以按需加载,即只加载实际需要的部分。 - 支持模块的动态加载,使得代码更为灵活。 CMD的一个示例: ```javascript define(function...

    浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结.docx

    - **简介**:CMD规范是由中国淘宝团队提出的一种模块化规范,主要用于前端开发中,特别是在大型项目中表现出了良好的性能优势。 - **特点**: - 异步加载模块。 - 支持延迟加载和动态加载,即按需加载。 - 采用...

    AMD之require.js与CMD之sea.js

    Sea.js是CMD规范的主要实现,其模块定义使用`seajs.use`或`define`方法。CMD的依赖注入是延迟的,只有在运行到某个模块时才会解析其依赖。例如: ```javascript define(function(require, exports, module) { var ...

    前端开源库-gulp-cmd-build

    **Cmd**(Common Module Definition)是 Sea.js 提出的一种模块化规范,类似于 AMD(Asynchronous Module Definition)规范,但更注重代码的自然书写顺序。Cmd 支持动态加载模块,使得模块化开发更加灵活。Gulp-cmd-...

    前端开源库-grunt-cmd-transport-wnd

    2. **模块化处理**:支持CMD规范,使得你的代码可以以模块化的方式组织,便于管理和复用。 3. **压缩合并**:将多个JavaScript文件合并成一个文件,减少HTTP请求,同时进行压缩,降低文件大小,提高页面加载速度。 4...

    简单分页插件simplePagination改造为CMD模块

    CMD是JavaScript模块化开发的一种规范,尤其在中国社区广泛使用,如Sea.js等模块加载器就是基于CMD规范。CMD强调的是就近依赖,即在需要使用某个模块的地方直接require,而不是预先全局定义。 首先,理解`...

    vue文件经过编译使其满足AMDCMD的模式

    当Vue.js项目需要与AMD或CMD规范配合时,例如在一个已经采用RequireJS或Sea.js的大型项目中,Vue文件需要经过特定的编译过程才能适配这两种模块化系统。这个过程通常涉及预处理器或者构建工具,如Webpack、Rollup或...

    ES6模块化的import和export用法方法总结

    同时还有CMD规范,为同步加载方案如seaJS。 ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案。 ES6模块主要有两个功能:...

    浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结

    CommonJS规范的同步加载适合服务器端场景,AMD和CMD规范的异步加载更适合浏览器端。而在实际开发中,开发者需要根据项目的具体需求和环境选择合适的模块化规范。例如,在开发Node.js应用时,会优先考虑CommonJS规范...

Global site tag (gtag.js) - Google Analytics