阅读sea.js源码小结

2016-06-26 10:20:00

sea.js想解决的问题

恼人的命名冲突
烦琐的文件依赖

对应带来的好处 Sea.js 带来的两大好处：

通过 exports 暴露接口。这意味着不需要命名空间了，更不需要全局变量。这是一种彻底的命名冲突解决方案。
通过 require 引入依赖。这可以让依赖内置，开发者只需关心当前模块的依赖，其他事情 Sea.js 都会自动处理好。对模块开发者来说，这是一种很好的关注度分离，能让程序员更多地享受编码的乐趣。

API速查

1. seajs.config2. seajs.use3. define4. require5. require.async6. exports7. module.exports

sea.js的执行过程

启动

用script标签引入sea.js文件，seajs.config(data)启动配置函数，config函数会会合并所有config配置，seajs.use = function(ids, callback),启用主脚本

运行过程

主脚本启动之后，首先利用request模块请求主脚本(生成script标签插入head标签中)，然后根据正则解析模块define的依赖，并对依赖递归解析其依赖。
在运行过程中，通过监听发布者模式，系统内置了8个事件，可用于开发插件。

resolve       -- 将 id 解析成为 uri 时触发load          -- 开始加载文件时触发fetch         -- 具体获取某个 uri 时触发request       -- 发送请求时触发define         -- 执行 define 方法时触发exec         -- 执行 module.factory 时触发config         -- 调用 seajs.config 时触发error          -- 加载脚本文件出现 404 或其他错误时触发

全局挂载

所有相关数据最后全部挂载在window.seajs下，包括方法及模块数据。

小知识点

exports与module.exports

exports 仅仅是 module.exports 的一个引用。在 factory 内部给 exports 重新赋值时，并不会改变 module.exports 的值。因此给 exports 赋值是无效的，不能用来更改模块接口。

//源码如下// Exec factoryvar factory = mod.factory;var exports = isFunction(factory) ?  factory.call(mod.exports = {}, require, mod.exports, mod) :  factory

关于动态依赖

有时会希望可以使用 require 来进行条件加载：

if (todayIsWeekend)  require("play");else  require("work");

但请牢记，从静态分析的角度来看，这个模块同时依赖 play 和 work 两个模块，加载器会把这两个模块文件都下载下来。这种情况下，推荐使用 require.async 来进行条件加载。

//sea.js源码如下require.async = function(ids, callback) { //可传入回调函数  Module.use(ids, callback, uri + "_async_" + cid())  //——async_英语标识这个脚本是异步加载的，cid用于清除缓存  return require //返回require方便链式调用}

在开发时，Sea.js 是如何知道一个模块的具体依赖呢？

a.js

define(function(require, exports) {  var b = require('./b');  var c = require('./c');});

Sea.js 在运行 define 时，接受 factory 参数，可以通过 factory.toString() 拿到源码，再通过正则匹配 require 的方式来得到依赖信息。依赖信息是一个数组，比如上面 a.js 的依赖数组是：['./b', './c']

//源码如下// Parse dependencies according to the module factory codeif (!isArray(deps) && isFunction(factory)) {    deps = typeof parseDependencies === "undefined" ? [] : parseDependencies(factory.toString()) //parseDependencies是利用正则解析依赖的一个函数}

时间出发函数Emit

// Emit event, firing all bound callbacks. Callbacks receive the same// arguments as `emit` does, apart from the event namevar emit = seajs.emit = function(name, data) {  var list = events[name]  if (list) {    // Copy callback lists to prevent modification    list = list.slice()    // Execute event callbacks, use index because it's the faster.    for(var i = 0, len = list.length; i list = list.slice(),注释是防止拷贝该时间的回调函数，防止修改，困惑了一下。原因是Javascript中赋值时，对于引用数据类型，都是传地址。所以这里，如果想防止触发事件的过程中回调函数被更改，必须对这个list数组进行拷贝，而并非只是将list指向events[name]的地址。### 根据debug值配置是否删除动态插入的脚本

// Remove the script to reduce memory leak
if (!data.debug) {
head.removeChild(node)
}

这里思考了蛮久，为什么可以删除动态插入的脚本？这样脚本还会生效吗？首先，必须了解计算机内存分为1. 静态数据区 (用来存放程序中初始化的全局变量的一块内存区域)1. 代码区 (通常用来存放执行代码的一块内存区域)1. 栈区 (栈在进程运行时产生，一个进程有一个进程栈。栈用来存储程序临时存放的局部变量，即函数内定义的变量 不包括static 类型的。函数被调用时，他的形参也会被压栈。1. 堆区 (用于存放进程运行中被动态分配的内存段，它的大小并且不固定，可动态扩展。当进程调用malloc等分配内存时，新分配的内存被动态的添加到堆上（堆被扩大），当利用free等函数释放内存时，被释放的‘ 内存从堆中剔除)这些在Javascript中都被屏蔽了，大部分时候我们都不需要考虑，但是如果要深入了解的话，则是必须要知道的知识。首先HTML文档中的JS脚本在计算机中作为指令被读入内存，之后开始执行，CPU开始一条一条指令读取，比如，读取到var cool = "wilson"时，就会在内存中分配一个6字符大小的内存，一个function也一样会在内存中占据一定大小。所以，当指令全部运行完之后，指令本身其实已经没有用了，但是仍然给占据了一部分内存。当你点击按钮触发一个回调函数时，并非去读取指令，而是读取内存中这个回调函数的地址。所以删除这些动态加载的JS文件是没有问题的。### ID 和路径匹配原则所谓 ID 和路径匹配原则 是指，使用 seajs.use 或 require 进行引用的文件，如果是具名模块（即定义了 ID 的模块），会把 ID 和 seajs.use 的路径名进行匹配，如果一致，则正确执行模块返回结果。反之，则返回 null。### 对 module.exports 的赋值需要同步执行，不能放在回调函数里。下面这样是不行的

// x.js
define(function(require, exports, module) {

// 错误用法
setTimeout(function() {
module.exports = { a: "hello" };
}, 0);

});

//在 y.js 里有调用到上面的 x.js:

// y.js
define(function(require, exports, module) {

var x = require('./x');

// 无法立刻得到模块 x 的属性 a
console.log(x.a); // undefined

});