文档章节

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

刘军兴
 刘军兴
发布于 2015/11/27 15:21
字数 1321
阅读 60
收藏 2
点赞 0
评论 0

前面看 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
博文 184
码字总数 226359
作品 0
昌平
使用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
一步步学会使用SeaJS 2.0

一步步学会使用SeaJS 2.0 1、SeaJS是什么? -------------------------------------------------- 1、SeaJS是什么? https://github.com/seajs/seajs/issues/547),详细说明了前端模块化。 ...

leon_rock
2014/04/05
0
1
seajs通过module.constructor.prototype扩展公共方法

看了一遍关于《扩展SeaJS模块定义中的module参数的应用示例》讲得很不错!自己就尝试一下! http://limu.iteye.com/blog/1136712 https://github.com/seajs/seajs/issues/67 为了能够预加载公...

尐桀
2014/11/04
0
0
seaJs学习笔记之javascript的冲突问题

seaJs是一个处理模块化的JS开源库,在学习seaJs之前还是要了解一下什么是JS模块化的一些概念,知道这个之后,会更好的了解seaJs的使用。  首先先看一下下面的这个问题。当你的学习教程网站...

xuexijc
2013/11/27
0
0
seajs初尝 加载jquery返回null解决学习日志

今天早上初尝seajs,发现一个非常蛋疼的事情,使用官方demo中的jquery是没有问题, 下载官方最新版jquery 2.1.1发现console.log($)返回null,百思不得其解!只能求助度娘! 在GitHub发现了玉...

尐桀
2014/10/31
0
1
seajs学习日志 简单尝试模板+数据合并、模块异步加载、非标准CMD模式定义define模块

今天继续尝试seajs 2.3的版本,那做点什么demo好呢,就来一个简单是数据模板吧,然后通过其他一些细节深入学习 先看看目录结构,按照官方demo架设 index.html只是简单入口文件和seajs的配置项...

尐桀
2014/11/01
0
1
Gulp和Webpack工具的区别

引用知乎的回答:https://www.zhihu.com/question/37020798 怎么解释呢?因为 Gulp 和 browserify / webpack 不是一回事 Gulp应该和Grunt比较,他们的区别我就不说了,说说用处吧。Gulp / Gr...

easonjim
2016/12/24
0
0
浅谈Javascript模块化开发

*** 自己接触过的几种javascript模块开发,由于水平有限,只能简单谈一谈。 *** 立即执行匿名函数 由于javascript的函数作用域,将模块代码放入立即执行匿名函数中,防止污染全局变量。将需要...

jackzlz
2015/08/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

shell中的函数、shell中的数组、告警系统需求分析

shell中的函数 格式: 格式: function f_name() { command } 函数必须要放在最前面 示例1(用来打印参数) 示例2(用于定义加法) 示例3(用于显示IP) shell中的数组 shell中的数组1 定义数...

Zhouliang6
46分钟前
2
0
用 Scikit-Learn 和 Pandas 学习线性回归

      对于想深入了解线性回归的童鞋,这里给出一个完整的例子,详细学完这个例子,对用scikit-learn来运行线性回归,评估模型不会有什么问题了。 1. 获取数据,定义问题     没有...

wangxuwei
今天
1
0
MAC安装MAVEN

一:下载maven压缩包(Zip或tar可选),解压压缩包 二:打开终端输入:vim ~/.bash_profile(如果找不到该文件新建一个:touch ./bash_profile) 三:输入i 四:输入maven环境变量配置 MAVEN_HO...

WALK_MAN
今天
0
0
33.iptables备份与恢复 firewalld的9个zone以及操作 service的操作

10.19 iptables规则备份和恢复 10.20 firewalld的9个zone 10.21 firewalld关于zone的操作 10.22 firewalld关于service的操作 10.19 iptables规则备份和恢复: ~1. 保存和备份iptables规则 ~2...

王鑫linux
今天
2
0
大数据教程(2.11):keeperalived+nginx高可用集群搭建教程

上一章节博主为大家介绍了目前大型互联网项目的系统架构体系,相信大家应该注意到其中很重要的一块知识nginx技术,在本节博主将为大家分享nginx的相关技术以及配置过程。 一、nginx相关概念 ...

em_aaron
今天
1
0
Apache Directory Studio连接Weblogic内置LDAP

OBIEE默认使用Weblogic内置LDAP管理用户及组。 要整理已存在的用户及组,此前办法是导出安全数据,文本编辑器打开认证文件,使用正则表达式获取用户及组的信息。 后来想到直接用Apache Dire...

wffger
今天
2
0
HFS

FS,它是一种上传文件的软件。 专为个人用户所设计的 HTTP 档案系统 - Http File Server,如果您觉得架设 FTP Server 太麻烦,那么这个软件可以提供您更方便的档案传输系统,下载后无须安装,...

garkey
今天
1
0
Java IO类库之BufferedInputStream

一、BufferedInputStream介绍 /** * A <code>BufferedInputStream</code> adds * functionality to another input stream-namely, * the ability to buffer the input and to * sup......

老韭菜
今天
0
0
STM 32 窗口看门狗

http://bbs.elecfans.com/jishu_805708_1_1.html https://blog.csdn.net/a1985831055/article/details/77404131...

whoisliang
昨天
1
0
Dubbo解析(六)-服务调用

当dubbo消费方和提供方都发布和引用完成后,第四步就是消费方调用提供方。 还是以dubbo的DemoService举例 -- 提供方<dubbo:application name="demo-provider"/><dubbo:registry address="z...

青离
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部