文档章节

学习 Seajs 笔记(四) 直接查看源码

刘军兴
 刘军兴
发布于 2015/11/27 15:21
字数 1321
阅读 62
收藏 2

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

 

© 著作权归作者所有

共有 人打赏支持
刘军兴
粉丝 56
博文 187
码字总数 231243
作品 0
昌平
私信 提问
SeaJs的模块定义、模块加载及模块依赖关系

SeaJS 是由玉伯开发的一个遵循 CommonJS 规范的模块加载框架,可用来轻松愉悦地加载任意 JavaScript 模块和css模块样式。SeaJS非常小巧,小巧在于压缩和gzip后体积只有4K,而且接口和方法也非...

Sephiroth
2012/03/12
2K
1
SeaJS 2.0 Beta 发布,JS 模块加载框架

如果你是第一次接触 SeaJS,可以直接访问官方文档:seajs.org 按照顺序依次尝试和阅读就好。 如果你是老用户,请随着下文一起来看看这 3 个多月来,SeaJS 都发生了哪些变化。 更小 看下图,左...

oschina
2013/02/18
2.2K
13
使用SeaJS实现模块化JavaScript开发

前言 SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScrip...

green001
2014/04/01
0
2
使用SeaJS实现模块化JavaScript开发

前言 SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScrip...

i33
2013/03/15
0
0
用seaJs来动态加载angularjs

github地址:https://github.com/chaosforfun/Angular-test-seaJs Angular-test-seaJs angular测试驱动开发实际案例+seaJs按路由加载文件 测试 先是为了学习angular提倡的测试驱动,试着把a...

赵小笨
2013/09/23
0
2

没有更多内容

加载失败,请刷新页面

加载更多

redis数据结构

redis不只是一个简单的键(key)-值(value)数据库,实际上它是一个数据结构服务器,支持各种类型的值。也就是说,在传统的键-值数据库中,你把字符串键与字符串值联系起来,而在redis,值不仅限...

hblt-j
4分钟前
1
0
MySQL事务的的介绍及使用

1. 事务的特性 1.1 原子性(Atomicity): 原子性是指事务是一个不可分割的工作单位,事务中的操作要么都发生,要么都不发生。 1.2. 一致性(Consistency): 在一个事务中,事务的前后数据的完...

kuchawyz
10分钟前
0
0
[sed] 将 the 和 statement 之间的单词变为全大写

-bash-4.1$ cat textfind the Match statementConsult the Get statementusing the Read statement to retrieve data-bash-4.1$ cat sedsrc1/the .* statement/{hs/.*the (.......

圣洁之子
10分钟前
0
0
curl 编译安装(openssl)

//依赖安装yum install openssl openssl-develwget https://curl.haxx.se/download/curl-7.63.0.tar.gztar -zvxf curl-7.63.0.tar.gzcd curl-7.63.0./configure --prefix=......

colin_86
11分钟前
1
0
Canvas之使用图片

canvas有比较强的图片操作能力。可以用于动态的图像合成或者作为图形的背景。浏览器支持任意格式如PNG、GIF、或者JPEG,你甚至可以将同一个页面中的其他canvas元素生成的图片作为图片源(toDa...

tianyawhl
13分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部