seajs官方文档的学习笔记（一）
seajs API 快速参考 --> https://github.com/seajs/seajs/issues/266
########### 模块 https://github.com/seajs/seajs/issues/240 #####################
sea.js 专注于前端开发领域里的 JS 模块：
1. 模块是一段 JavaScript 代码，具有统一的基本书写格式。
2. 模块之间通过基本交互规则，能彼此引用，协同工作。
模块定义规范（Module Definition Specification）：对[基本书写格式]与[基本交互规则]的清楚描述。
有CommonJS 社区的 Modules 1.1.1 规范、NodeJS 的 Modules 规范、RequireJS 提出的 AMD 规范等等。
sea.js 遵循的是 CMD 规范
########## CMD模块定义规范 https://github.com/seajs/seajs/issues/242 ############
CMD（common Module Definition）。该规范明确了模块的[基本书写格式]和[基本交互规则]。
CMD 规范中，一个模块就是一个文件。
define(factory)
define：是[全局函数]，用来定义一个模块
factory：函数、对象或者字符串
define({'foo', 'bar'});
define('I am a template, My name is {{name}}');
↓
factory为函数时，表示[模块的构造方法]，可以得到模块向外提供的接口。 factory 方法在执行时，默认会传入三个参数：require、exports 和 module.
define(id?, deps?, factory)
字符串 id 表示模块标识，数组 deps 是模块依赖
define('hello', ['jquery'], function(require, exports, module) {
// 模块代码
})；
define.cmd
一个空对象，可用来判定当前页面是否有 CMD 模块加载器
if (typeof define === 'function' && define.cmd) {
// 有 sea.js 等 CMD 模块加载器存在
}
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
require(id)
require 是一个方法，接受[模块标识]作为[唯一参数](参数值必须是字符串直接量。)，用来获取模块提供的接口
define(function(require, exports) {
// 获取模块 a 的接口
var a = require('./a');
// 调用模块 a 的方法
a.doSomething();
});
require.async(id, callback?)
require.async 用来在模块内部[异步加载]模块，在加载完成后执行回调（ callback 可选）。 require(id) 是同步往下执行
define(function(require, exports) {
// 异步加载一个模块，在加载完成时，执行回调
require.async('./b', function(b) {
b.doSomething();
});
// 异步加载多个模块，在加载完成时，执行回调
require.async(['./c', './d'], function(c, d) {
// 这 function 里的参数要与前面加载模块的顺序一一对应
c.doSomething();
d.doSomething();
});
});
require.resolve(id)
该函数[不会加载函数]，只[返回]解析后的[模块绝对路径]。（使用模块系统内部的路径解析机制）
define(function(require, exports) {
console.log(require.resolve('./b'));
// ==> http://localhost/seajsS/quick-start/static/hello/src/b.js
});
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
exports
是一个对象，用来向外提供模块接口
define(function(require, exports) {
// 对外提供 foo 属性
exports.foo = 'bar';
// 对外提供 doSomething 方法
exports.doSomething = function() {};
});
替代exports
使用 return 直接向外提供接口
define(function(require) {
// 通过 return 直接提供接口
return {
foo: 'bar', doSomething: function() {}
};
});
或者是
define(function(require, exports, module) {
// 正确写法
module.exports = {
foo: 'bar', doSomething: function() {}
};
// 错误写法
// 解释：exports 仅仅是 module.exports 的一个引用，给 exports 重新赋值时，并不会改变 module.exports 的值，OK？
exports = {
foo: 'bar', doSomething: function() {}
};
});
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
module
是一个对象，存储了与当前模块相关联的一些属性和方法
module.id
模块的唯一标识。define 的第一个参数就是模块标识
define('module_id', [], function(require, exports, module) {
// 模块代码
});
module.uri
返回模块的绝对路径（根据模块系统的路径解析规则）。
define(function(require, exports, module) {
console.log(module.uri);
// ==> http://localhost/seajsS/quick-start/static/hello/src/main.js
});
没有在 define 中手写 id 参数时，module.id 的值就是 module.uri，两者完全相同
注意：而require.resolve(id) 是使用模块系统内部的路径解析机制的
module.dependencies Array
表示当前模块的依赖
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
});
这就是 CMD 模块定义规范的所有内容。经常使用的 API 只有 define, require, require.async, exports, module.exports 这五个。其他 API 有个印象就好，在需要时再来查文档，不用刻意去记。
################# 模块标识 https://github.com/seajs/seajs/issues/258 ####################
################# require的书写约定 https://github.com/seajs/seajs/issues/259 ############
require 的参数值 必须 是字符串直接量
################# 模块的加载启动 https://github.com/seajs/seajs/issues/260 ###############
seajs 启动模块
<script src="path/to/sea.js"></script>
<script>
seajs.use('./main');
</script>
seajs.use(id, callback?) | Function |
在页面中加载任意模块
// 加载模块 main，并在加载完成时，执行指定回调
seajs.use('./main', function(main) {
main.init();
});
// 并发加载模块 a 和模块 b，并在都加载完成时，执行指定回调
seajs.use(['./a', './b'], function(a, b) {
a.init();
b.init();
});
与 DOM ready
没有任何关系。如果某些操作要确保在 DOM ready 后执行，需要使用 jquery 等类库来保证
seajs.use(['jquery', './main'], function($, main) {
$(document).ready(function() {
main.init();
});
});
最佳实践
1. seajs.use 理论上只用于加载启动，不应该出现在 define 中的模块代码里。在模块代码里需要异步加载其他模块时，推荐使用 require.async 方法。
2. 引入 sea.js 时，可以把 sea.js 与其他文件打包在一起，可提前合并好，或利用 combo 服务动态合并。无论哪一种方式，为了让 sea.js 内部能快速获取到自身路径，推荐手动加上 id 属性：<script src="path/to/sea.js" id="seajsnode"></script>
加上 seajsnode 值，可以让 sea.js 直接获取到自身路径，而不需要通过其他机制去自动获取。这对性能和稳定性会有一定提升，推荐默认都加上。
################# 配置 https://github.com/seajs/seajs/issues/262 ###############
seajs.config({ // 别名配置 alias: { 'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe', 'json': 'gallery/json/1.0.2/json', 'jquery': 'jquery/jquery/1.10.1/jquery' }, // 路径配置 paths: { 'gallery': 'https://a.alipayobjects.com/gallery' }, // 变量配置 vars: { 'locale': 'zh-cn' }, // 映射配置 map: [ ['http://example.com/js/app/', 'http://localhost/js/app/'] ], // 预加载项 preload: [ Function.prototype.bind ? '' : 'es5-safe', this.JSON ? '' : 'json' ], // 调试模式 debug: true, // Sea.js 的基础路径 base: 'http://example.com/path/to/base/', // 文件编码 charset: 'utf-8' });
浙公网安备 33010602011771号