学习 Seajs 笔记(四) 直接查看源码
前面看 seajs 的文档引入了一些新概念, 云山雾罩得不如直接看源码, 做实验. 因此今天实际查看, 调试源码, 做实验.
现写一个简单的 hello.js , 出于编程的某种传统, 一般都是用 hello-world:
define('hello', [], function(require, exports, module) {
console.log('hello.js is loaded, require is: ', require,
' exports is: ', exports,
' and module is: ', module);
exports.str = 'What shall we export...?';
});
这里按照 CMD 要求写全了 define(id, deps,factory) 要求的三参数格式. 再复制一个简单的 html, 加入
seajs-debug.js (调试版本),
<body>
<script src='../dist/sea-debug.js'></script>
<script>seajs.use('./hello.js');</script> <!-- 正常方式引入 hello.js -->
<!-- 测试这样引入如何? <script src='./hello.js'></script> -->
</body>
浏览器打开此页面, console 中什么也没显示, 看来 hello factory 函数 `此时' 尚未被调用, 但查看 seajs 对象
里面的 cache{} 对象, 里面有(两项) hello.js 的键, dist/hello.js, ./hello.js, 估计可能我们引入的 sea.js 在
dist 目录的原因.
复制 sea-debug.js 到当前实验目录, 将引入 sea-debug.js 的路径改为 src='./sea-debug.js' 实验:
这次 console 中显示出 'hello.js is loaded ... ...', 而且 seajs.cache{} 中也就只有一项 hello.js 了.
再仔细对比以上两种方式, seajs.data.base 的值有所不同, 前者是 `... dist/', 后者是 `... _learn/' (此次的学习目录)
我想如果用 seajs.config() 设置一下 base 能改好. 不过还是让我们(调试)进入源码看看.
// seajs.use 进入这里, 委托给 Module.use() 实现.
seajs.use = function(ids, callback) {
Module.use(ids, callback, an_unique_id?); // 这里似乎将每次 use() 当做一个匿名模块看待.
}
// 进入 Module.use, 原注释 Use function is equal to load an anonymous module, 当前尚不明确是什么.
Module.use = function(ids, callback, use_mod_uri) {
// 根据 uri 获取对应 module, 如果没有, 则创建一个新的 module 对象.
// 第一次加载肯定没有, 则是创建一个新的(匿名的?), mod.status=0 为初始状态.
var use_mod = Module.get(use_mod_uri, []ids);
// 初始化某些值和一个回调函数, 该回调在所有依赖模块加载之后被调用, 见下面 load() 之后.
use_mod.callback = function() ...
// 加载模块内容, 见下面.
use_mod.load();
}
// 原注释: load module.dependencies and fire onload when all done.
// 加载此 mod 的 *所有*依赖模块, 并在 *所有*都完成后调用 mod.onload() .
Module.prototype.load = function() {
// 如果此模块正在加载中(status >= is-being-loaded), 则等待其加载完成(防止重复加载)
if (this.status >= STATUS.loading) return;
this.status = STATUS.loading;
// 准备工作, 计算 uris. 因为 ids 是复数的多个 id, 这里每个 id 解析所对应的 uri 构成了 uris[] 数组.
// 详细解析过程略, 文档中有介绍解析规则, 基本和 nodejs 等规则相同/相似.
var uris[] = this.resolve();
emit('load', ...); // 发布 'load' 事件. 细节和少量吐槽略.
for-each (uri in uris[]) // 构造依赖模块集合 deps{}, 也含自己.
this.deps[...] = Module.get(uri);
// pass entry to it's dependencies. 细节还不很明白.
this.pass();
// 这里似乎指如果有 _entry 则表示此模块已加载完成, 所以调用 onload() 事件.
if (this._entry.length)
this.onload(), return;
// 开始并行加载. (Begin parallel loading). 这里并行大概指同时开始数个 script 节点下载脚本.
for-each (mod for uris[]) {
// status < 1 即是 0, 初始时才为 0.
mod.fetch() if (mod.status < 1) // 1 is status fetching.
// 否则...
mod.load() else-if (mod.status == 2) // 2 is status saved.
}
// 某些 ie6-9 的bug 修复问题, 略.
}
虽然有很多还不明白, 总算看到有一个 mod.fetch() 部分是此情况下要执行的, 再次进入看看:
// Fetch a module.
mod.fetch = function() {
mod.status = 1-fetching; // 模块状态转移为 正在加载中...
emit('fetch', ...); // 发布正在加载事件, 这里设计为事件处理者可更改加载地址(略).
emit('request', ...); // 发布请求事件.
... (这里似乎返回了下面的函数, 然后调用?)
}
// 异步获取 url 指定的 js, 并在获取之后回调 callback.
function request(url, callback, ...) { // 后面参数暂不关心.
var <script> = 创建一个 `script' DOM 节点
// 设置 onload 事件和 onerror 事件.
<script>.onload = function() {
callback() // 加载后回调, 部分清理细节略.
}
<script>.onerror = function() {
onload(true) --> callback(error=true) // 如果出错也回调, 部分细节略.
}
// 解释: A script that will be run asynchronously(异步地) as soon as it is available.
<script>.async = true, .src = url, // 于是这里是用 script 节点异步加载 js.
.append-to(<head>);
}
// 然后浏览器下载了该 js 之后, 产生 <script>.onload 事件(或 onerror),
// 然后(数个?)回调到 mod.callback() 这里.
IN Module.use(use_callback) mod.callback = function() {
var exports[];
// 以下表示 use([a,b,c...]) 写了一个到多个模块, 则一起组装为 exports[] 数组.
for(i = 0; i < uris[].lenght; ++i)
exports[i] = exec(mod of uris[i]) // 执行该模块, 得到其导出结果.
use_callback.apply(global, exports); // 回调 use() 中的 callback(a,b,c...)
}
此时大致理解的是:
1. use() 被当做一个(略有特殊的) module 看待.
2. module 使用 status 字段记录状态. 可能处于未加载, 加载中, 加载完毕等不同状态.
3. use() 经过数个调用进入 request() 函数, 其使用 <script> 标签异步加载 js, 加载成功/失败之后产生回调.
4. 在 module 中有几个字段需要深入理解, 才能了解加载机理: status, deps{}, _entry[].
5. fetch() 中有些细节粗看时忽略了, 下面再细看时不能忽略.
== 补充 ==
后来又想了一下, 觉得按照从 <script>.onload 回调开始, 一层一层向上 callback 的视角看, 可能更容易
理解. 时间有限, 就不细研究(写)了.