欢迎各位兄弟 发布技术文章
这里的技术是共享的
在 SeaJS 中,所有 JavaScript 文件都应该用模块的形式来书写,并且一个文件只包含一个模块。
使用全局函数 define
来定义模块:
define(id?, dependencies?, factory);
当前模块的唯一标识。该参数可选。如果没有指定,默认为模块所在文件的访问路径。如果指定的话, 必须是顶级或绝对标识(不能是相对标识)。
当前模块所依赖的模块,是一个由模块标识组成的数组。该参数可选。如果没有指定,模块加载器会从factory.toString()
中解析出该数组。
** 注意:强烈推荐不要设定 id
和 dependencies
参数。 在开发阶段,模块加载器会自动获取这两个参数。部署上线时,则可以通过优化工具来提取这两个参数。
模块的工厂函数。模块初始化时,会调用且仅调用一次该工厂函数。factory
可以是函数, 也可以是对象、字符串等任意值,这时 module.exports
会直接设置为 factory
值。
factory
函数在调用时,会始终传入三个参数: require
、exports
和 module
, 这三个参数在所有模块代码里可用。
define(function(require, exports, module) { // The module code goes here });
exports
用来向外提供模块的 API.
define(function(require, exports) { // snip... exports.foo = 'bar'; exports.doSomething = function() {}; });
除了给 exports
对象增加成员,还可以使用 return
直接向外提供 API.
define(function(require, exports) { // snip... return { foo: 'bar', doSomething: function() {}; }; });
如果 return
语句是模块中的唯一代码,可简化为:
define({ foo: 'bar', doSomething: function() {}; });
上面这种格式特别适合定义 JSON 数据。
** 注意:下面这种写法是错误的!
define(function(require, exports) { // snip... exports = { // 错误! foo: 'bar', doSomething: function() {}; }; });
模块加载器不能获取到新赋给 exports
变量的值。 请使用 return
或 module.exports
。
require
函数用来访问其他模块提供的 API.
define(function(require) { var a = require('./a'); a.doSomething(); });
它接受 模块标识 作为唯一参数。
请牢记,为了使静态分析能成功获取到模块依赖信息,在书写模块时,需要遵循一些简单的 规则。
该方法可用来异步加载模块,并在加载完成后执行回调函数。
define(function(require, exports, module) { // 加载一个模块 require.async('./b', function(b) { b.doSomething(); }); // 加载多个模块 require.async(['./c', './d'], function(c, d) { // do something }); });
使用 require()
的内部机制来解析并返回模块路径。该函数不会加载模块,只返回解析后的路径。
该方法可用来异步加载脚本,并在加载完成后,执行指定的回调函数。开发插件时, 可以通过覆盖该方法来实现自定义的资源加载。
有时候,我们需要给所有 require
参数对象添加一些公用属性或方法。这时, 使用 require.constructor
来实现会非常方便。
module
参数存储模块的元信息。拥有以下成员:
当前模块的唯一标识。 require(module.id)
必然返回此模块的 exports
。
define(function(require, exports, module) { console.log(module.id); // http://path/to/this/file.js console.log(require(module.id) === exports); // true });
module.dependencies
是一个数组,表示当前模块的依赖列表。
该数组只读:模块加载完成后,修改该数组不会有任何效果。
exports
对象由模块系统创建,这不能满足开发者的所有需求, 有时候会希望 exports
是某个类的实例。 这时可用 module.exports
来实现:
define(function(require, exports, module) { console.log(module.exports === exports); // true module.exports = new SomeClass(); console.log(module.exports === exports); // false });
注意,对 module.exports
的赋值需要同步执行,它不能放在回调函数里。 下面这样是不行的:
x.js:
define(function(require, exports, module) { setTimeout(function() { module.exports = { a: "hello" }; }, 0); });
y.js:
define(function(require, exports, module) { var x = require('./x'); console.log(x.a); // undefined });
有时候,我们需要给所有 module
参数对象添加一些公用属性或方法。在这种情况下, 使用module.constructor
可以很好地满足需求。
extend.js:
define(function(require, exports, module) { var Module = module.constructor; Module.prototype.filename = function() { var id = this.id; var parts = id.split('/'); return parts[parts.length - 1]; }; });
a.js:
define(function(require, exports, module) { exports.filename = module.filename(); }); 来自 http://www.zhangxinxu.com/sp/seajs/docs/zh-cn/module-definition.html