阅读sea.js源码小结

sea.js想解决的问题

  1. 恼人的命名冲突

  2. 烦琐的文件依赖

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

  1. 通过 exports 暴露接口。这意味着不需要命名空间了,更不需要全局变量。这是一种彻底的命名冲突解决方案。

  2. 通过 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

});

#JavaScript、seajs#

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部