在 Sea.js 中,所有 JavaScript 模块都遵循 CMD(Common Module Definition) 模块定义规范。该规范明确了模块的基本书写格式和基本交互规则。
在 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 模块加载器存在
}
require Function
require
是 factory
函数的第一个参数。
require require(id)
require
是一个方法,接受 模块标识 作为唯一参数,用来获取其他模块提供的接口。
define(function(require, exports) {
// 获取模块 a 的接口
var a = require('./a');
// 调用模块 a 的方法
a.doSomething();
});
注意:在开发时,require
的书写需要遵循一些 简单约定。
require.async require.async(id, callback?)
require.async
方法用来在模块内部异步加载模块,并在加载完成后执行指定回调。callback
参数可选。
define(function(require, exports, module) {
// 异步加载一个模块,在加载完成时,执行回调
require.async('./b', function(b) {
b.doSomething();
});
// 异步加载多个模块,在加载完成时,执行回调
require.async(['./c', './d'], function(c, d) {
c.doSomething();
d.doSomething();
});
});
注意:require
是同步往下执行,require.async
则是异步回调执行。require.async
一般用来加载可延迟异步加载的模块。
require.resolve require.resolve(id)
使用模块系统内部的路径解析机制来解析并返回模块路径。该函数不会加载模块,只返回解析后的绝对路径。
define(function(require, exports) {
console.log(require.resolve('./b'));
// ==> http://example.com/path/to/b.js
});
这可以用来获取模块路径,一般用在插件环境或需动态拼接模块路径的场景下。
exports Object
exports
是一个对象,用来向外提供模块接口。
define(function(require, exports) {
// 对外提供 foo 属性
exports.foo = 'bar';
// 对外提供 doSomething 方法
exports.doSomething = function() {};
});
除了给 exports
对象增加成员,还可以使用 return
直接向外提供接口。
define(function(require) {
// 通过 return 直接提供接口
return {
foo: 'bar',
doSomething: function() {};
};
});
如果 return
语句是模块中的唯一代码,还可简化为:
define({
foo: 'bar',
doSomething: function() {};
});
上面这种格式特别适合定义 JSONP 模块。
特别注意:下面这种写法是错误的!
define(function(require, exports) {
// 错误用法!!!
exports = {
foo: 'bar',
doSomething: function() {};
};
});
正确的写法是用 return
或者给 module.exports
赋值:
define(function(require, exports, module) {
// 正确写法
module.exports = {
foo: 'bar',
doSomething: function() {};
};
});
提示:exports
仅仅是 module.exports
的一个引用。在 factory
内部给 exports
重新赋值时,并不会改变 module.exports
的值。因此给 exports
赋值是无效的,不能用来更改模块接口。
module Object
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 模块定义规范的所有内容。经常使用的 API 只有 define
, require
, require.async
, exports
, module.exports
这五个。其他 API 有个印象就好,在需要时再来查文档,不用刻意去记。
与 RequireJS 的 AMD 规范相比,CMD 规范尽量保持简单,并与 CommonJS 和 Node.js 的 Modules 规范保持了很大的兼容性。通过 CMD 规范书写的模块,可以很容易在 Node.js 中运行,后续会介绍。
祝使用愉快,有任何想法建议,欢迎反馈留言。
<!-- /.comment-content --><!-- /.comment --><!-- /.discussion-bubble-content --><!-- /.discussion-bubble-inner -->
相关推荐
CMD 模块定义规范与 Node.js 的模块规范非常相近。通过 Sea.js 的 Node.js 版本,可以很方便实现模块的跨服务器和浏览器共享。 模块化开发并不是新鲜事物,但在 Web 领域,前端开发是新生岗位,一直处于比较原始的...
CMD 模块定义规范与 Node.js 的模块规范非常相近。通过 Sea.js 的 Node.js 版本,可以很方便实现模块的跨服务器和浏览器共享。 模块化开发并不是新鲜事物,但在 Web 领域,前端开发是新生岗位,一直处于比较原始的...
3.CMD规范 通用模块定义 规范实现者: seaJS 服务端和浏览器通用 官方模块规范 1.ESM规范 就是ES6 Module 各浏览器和服务端 目前常用的就是浏览器端的RequireJS、NodeJS、以及ESM CommonJS语法分析 module....
还有一些对于模块化一些专业的定义为:模块化是软件系统的属性,这个系统被分解为一组高内聚,低耦合的模块。那么在理想状态下我们只需要完成自己部分的核心业务逻辑代码,其他方面的依赖可以通过直接加载被人已经写...
用于将html代码打包成cmd,amd规范可以使用的模块。这样可以跨域使用。 Installation npm install gulp-view-compile Test npm test example var rename = require('gulp-rename'); var viewCompile = require('gulp-...
modJS是一个精简版的AMD/CMD规范,并不完全遵守AMD/CMD规范,目的在于希望给使用者提供一个类似nodeJS一样的开发体验,同时具备很好的线上性能。 使用define来定义一个模块: define (id, factory) 在平常开发中,...
把用AMD规范编写的module适配到KISSY SEAJS 规范中的适配器 ...## 通用模块定义 Universal Module Definition 兼容 AMD KISSY CMD Author @释剑 这里在非AMD的环境里面会重新定义一份符合AMD而且兼容CMD or KMD的d
seajs实现了JavaScript 的 模块开发及按模块...使用define函数来进行定义一个模块,根据 CMD (Common Module Definition)模块定义规范。一个文件就是一个模块。所以一个js文件中只有一个define,即一个文件是一个模块
本文为大家解读javascript的模块化,具体内容如下 AMD是RequireJS在推广...CMD是SeaJS在推广过程中对模块定义的规范化产出。 Define定义exports 导出define(function(require,exports,module){}); module上存储了当
如果你不想花时间学习require.js,也不想翻看长篇的cmd/amd规范,那么这个mini-define就是你不错的选择。如果你之前用过sea.js或require.js那么mini-define更加高效,更加轻量,更加易用。项目地址:github 用法 首先...
模块化js常用的工具Requirejs和Seajs, Requirejs是按照AMD的规范来定义模块的,Seajs是按照CMD的规范来定义模块的.Requirejs 与 Seajs 的最大区别:执行模块的机制不同RequireJS对模块的态度是预执行,也就是所依赖...
简单友好的模块定义规范:Sea.js 遵循 CMD 规范,可以像 Node.js 一般书写模块代码。 自然直观的代码组织方式:依赖的自动加载、配置的简洁清晰,可以让我们更多地享受编码的乐趣。 Sea.js 还提供常用插件,非常有助...
特点遵循规范,可以像Node.js 一样来写模块代码(参见:AMD、CMD)完全异步,不对源码做任何改动、没eval、setTimeout,全速加载!干干净净,只有一个函数:define,连学习文档都不需要了!代码小巧,压缩后: 1.6kb...
简单友好的模块定义规范:Sea.js 遵循 CMD 规范,可以像 Node.js 一般书写模块代码。 自然直观的代码组织方式:依赖的自动加载、配置的简洁清晰,可以让我们更多地享受编码的乐趣。 Sea.js 还提供常用插件,非常有助...
模块规范的定义简单友好,Sea.js 遵循 CMD 规范,为 Node.js 模块风格。 自然直观的代码组织,自动加载依赖,配置简单明了,让您更享受编码的乐趣。 Sea.js 提供了常用的插件,它们对开发调试和性能优化非常有帮助...
学习AMD,CMD,CommonJS 这几种规范是什么AMD规范,定义一个API define()所有module定义都通过NodejsJS运行时,脱离浏览器限制.跨平台.提供系统级API访问功能,进程,I/O等等.npm Node的包管理工如何异步加载JS文件,并让其...
定义模块 module.exports exports 引用模块 require 第三方模块 express 规范 commonJS NodeJS AMD require.js CMD sea.js ES Module ES6 开启http服务器 安装第三方模块 npm install 知识点 开启http服务器 http fs...
定义模块 module.exports exports 引用模块 require 第三方模块 express 规范 commonJS NodeJS AMD require.js CMD sea.js ES Module ES6 开启http服务器 安装第三方模块 npm install 知识点 开启http服务器 http fs...
1.简介 Seajs,一个Web模块加载框架,追求简单、自然的代码书写和组织方式,:Sea.js 遵循 CMD 规范,模块化JS代码。依赖的自动加载、配置的简洁清晰,可以让程序员更多...异步模块定义(AMD)是Asynchronous Module D
4、变量类型定义错误 第10页 【案例1.4.1】 第10页 5、正确使用逻辑与&&、屏蔽&操作符 第17页 【案例1.5.1】 第17页 6、注意数据类型的匹配 第18页 【案例1.6.1】 第18页 【案例1.6.2】 第18页 7、用于控制条件转移...