学习 Seajs 笔记(四) 直接查看源码
学习 Seajs 笔记(四) 直接查看源码
刘军兴 发表于2年前
学习 Seajs 笔记(四) 直接查看源码
  • 发表于 2年前
  • 阅读 57
  • 收藏 2
  • 点赞 0
  • 评论 0

【腾讯云】买域名送云解析+SSL证书+建站!>>>   

前面看 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 的视角看, 可能更容易
理解. 时间有限, 就不细研究(写)了.

 

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 54
博文 141
码字总数 223794
×
刘军兴
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: