seajs动态加载js原理_seajs模块加载与执行原理小记

本文仅讨论具名模块的情况,即通过spm打包出来的模块.

今天又研究了下seajs源码,源码中并没有显式的判断id与路径相不相等,即没有类似如下的代码

if(id == uri){

mod.exec();

}

假定被加载的模块为a.js

step1:在加载a.js前,就创建并缓存了a.js的module实例A,key值为a.js的全路径,暂定为uriA

step2:定义好onload事件(这里ie又出来捣乱了),创建script标签插入head

step3:浏览器加载完a.js后,执行define方法跟踪代码到seajs内部,发现并没有做什么特别的事,只是调用了Module.save方法,id与路径的匹配即体现在这个save方法中.且看源码:

1 //Save meta data to cachedMods

2 Module.save = function(uri, meta) {3 var mod =Module.get(uri)4

5 //Do NOT override already saved modules

6 if (mod.status

第3行,获取缓存中的module,uri是模块中的id.

假如id与加载路径相等,那么这里可以获取到step1缓存的A,然后将factory等属性赋给A,结束

假如id与加载路径不相等,那么这里将获取不到A,会新创建一个新实例B

step4:浏览器执行完a.js的代码,执行onload回调,进行一系列的属性操作(比如waiting和remain)和依赖模块的加载等等,这里有递归...需要花点时间才能看懂.

step5:等step4的所有递归执行完,也即a.js及其所有依赖模块都已加载完,执行完,进入就绪状态,执行a.js的factory,这里的factory从A中获取,A通过uriA从缓存中获取.

如果step3中,a.js中的id与加载它的路径不一致,那么这里A中的factory将是undefined,所以你的factory方法就不执行.

以上是seajs处理模块的大致流程.

至于使id与路径一致,通常的做法是,use或require里的直接量字符串参数与模块里的id相等.比如

//html页面

seajs.use("app/start",function(){//code

})

//start.js

define("app/start",["jquery/jquery/1.7.2/jquery"],function(require, exports, module){//code

})

不过,这两个值通过seajs内部resolve过后能相等,也是可以的.