第三课：模块加载系统

模块加载，其实就是把js分成很多个模块，便于开发和维护。因此加载很多js模块的时候，需要动态的加载，以便提高用户体验。

在介绍模块加载库之前，先介绍一个方法。

动态加载js方法：

function loadJs(url , callback){

　　var node = document.createElement("script");

node[window.addEventListener ? "onload":"onreadystatechange"] = function(){

if(window.addEventListener || /loaded|complete/i.test(node.readyState)){

　　　　　　callback();

　　　　　　node.onreadystatechange = null;

　　　　}

　　}

　　node.onerror = function(){};

node.src = url;

　　var head = document.getElementsByTagName("head")[0];

　　head.insertBefore(node,head.firstChild);     //插入到head的第一个节点前，防止ie6下head标签没闭合前，使用appendChild报错。　

}

由于司徒正美使用了它写的mass框架来介绍模块加载，而业界用的最多的是require.js和sea.js。因此，我觉得他个性有点强。

我来讲下sea.js的模块加载过程吧：

页面chaojidan.jsp，在head标签中，引入sea.js，这时就会得到seajs对象。

同时引入index.js。

index.js的代码如下：

seajs.use([‘./a‘,‘jquery‘],function(a,$){
    var num = a.a;
    $(‘#J_A‘).text(num);
})

a.js :

define(function(require,exports,module){
    var b = require(‘./b‘);
    var a = function(){
        return 1 + parseInt(b.b());
    }
    exports.a = a;
})

b.js :

define(function(require,exports,module){
   var c = require(‘./c‘);

    var b = function(){
        return 2 + parseInt(c.c());
    }
    exports.b = b;
})

c.js :

define(function(require,exports,module){
    var c = function(){
        return 3;
    }
    exports.c = c;
})

由上可知，a模块依赖b，b依赖c.

当程序进入到index.js，seajs将调用use方法。

seajs.use = function(ids, callback) {
　　globalModule._use(ids, callback)
}说明： globalModule 为seajs初始化时（引入sea.js时），Module的实例 var globalModule = new Module(util.pageUri, STATUS.COMPILED)

此时 ids -> [‘./a‘,‘jquery‘]， callback -> function(a,$){var num = a.a;$(‘#J_A‘).text(num);}



接下来将调用 globalModule._use(ids, callback)


Module.prototype._use = function(ids, callback) {　　


　　var uris = resolve(ids, this.uri);      //解析[‘./a‘,‘jquery‘]
    this._load(uris, function() {    //把解析出来的a，jquery模块的地址[url1,url2]，调用_load方法。
      　　　　　　　　　　//util.map : 让数据成员全部执行一次一个指定的函数，并返回一个新的数组，该数组为原数组成员执行回调后的结果
      var args = util.map(uris, function(uri) {

         return uri ? cachedModules[uri]._compile() : null;//如果存在url，就调用_compile方法。


　　　}) 　　 if (callback) { callback.apply(null, args) }　　　})


}


因为调用_load方法后，会出现两个回调函数，因此我们将function(a,$){var num = a.a;$(‘#J_A‘).text(num);}标志为callback1,把this._load(uris, function() { })回调方法标志为callback2.  


resolve方法就是解析模块地址的，这里我就不细讲了。


最终var uris = resolve(ids, this.uri)中 的uris被解析成了[‘http://localhost/test/SEAJS/a.js‘,‘http://localhost/test/SEAJS/lib/juqery/1.7.2/juqery-debug.js‘]，模块路径解析已经完毕。


而接下来将执行this._load


// _load()方法主要会先判断哪些资源文件还没有ready，如果全部资源文件都处于ready状态就执行callback2
  // 在这其中还会做循环依赖的判断，以及对没有加载的js执行加载
  Module.prototype._load = function(uris, callback2) {　　


　　//util.filter : 让数据成员全部执行一次一个指定的函数，并返回一个新的数组，该数组为原数组成员执行回调后返回为true的成员
    //unLoadedUris是那些没有被编译的模块uri数组
    var unLoadedUris = util.filter(uris, function(uri) {
      //返回执行函数布尔值为true的成员，在uri存在并且在内部变量cacheModules中不存在或者它在存储信息中status的值小于STATUS.READY时返回true
      // STATUS.READY值为4，小于四则可能的情况是获取中，下载中。
      return uri && (!cachedModules[uri] ||
          cachedModules[uri].status < STATUS.READY)

    });  　　


　　//如果uris中的模块全部都ready好了，执行回调并退出函数体（这时就会调用模块的_compile方法了）。　　var length = unLoadedUris.length 　　if (length === 0) { callback2() return }


　　//还未加载的模块个数
    var remain = length
    //创建闭包，尝试去加载那些没有加载的模块
    for (var i = 0; i < length; i++) {
      (function(uri) {
        //判断如果在内部变量cachedModules里面并不存在该uri的存储信息则实例化一个Module对象
        var module = cachedModules[uri] ||
            (cachedModules[uri] = new Module(uri, STATUS.FETCHING))
        //如果模块的状态值大于等于2，也就意味着模块已经被下载好并已经存在于本地了，这个时候执行onFetched()
        //否则则调用fetch(uri, onFetched) ，尝试下载资源文件，资源文件下载后会触发onload，onload中会执行回调onFetched的方法。
        module.status >= STATUS.FETCHED ? onFetched() : fetch(uri, onFetched)
        function onFetched() {
          module = cachedModules[uri]
          //当模块的状态值为大于等于STATUS.SAVED的时候，也就意味着该模块所有的依赖信息已经被拿到
          if (module.status >= STATUS.SAVED) {
            //getPureDependencies：得到不存在循环依赖的依赖数组
            var deps = getPureDependencies(module)
            //如果依赖数组不为空
            if (deps.length) {
              //再次执行_load()方法，直到全部依赖加载完成后执行回调
              Module.prototype._load(deps, function() {
                cb(module)
              })
            }
            //如果依赖数组为空的情况下，直接执行cb(module)
            else {
              cb(module)
            }
          }
          // 如果获取失败后，比如404或者不符合模块化规范
          //在这种情形下，module.status会维持在 FETCHING 或者 FETCHED
          else {
            cb()
          }
        }

      })(unLoadedUris[i])
    }
    // cb 方法 - 加载完所有模块执行回调
    function cb(module) {
      // 如果module的存储信息存在，那么修改它的module存储信息中的status的值，修改为 STATUS.READY
      module && (module.status = STATUS.READY)
      // 只有当所有模块加载完毕后执行回调。
      --remain === 0 && callback2()
    }
  }


}


这里unLoadedUris的数组长度为2 ，[‘http://localhost/test/SEAJS/a.js‘,‘http://localhost/test/SEAJS/lib/juqery/1.7.2/juqery-debug.js‘]，所以 接下来会产生两个以 js路径为名称的闭包。


以http://localhost/test/SEAJS/a.js为例 
接下来 ： 首先会创建一个Module：


cachedModules(‘http://localhost/test/SEAJS/a.js‘) = new Module(‘http://localhost/test/SEAJS/a.js‘,1)


module.status >= STATUS.FETCHED ? onFetched() : fetch(uri, onFetched)


因为此时a模块并没有加载 所以接下来将会执行 fetch(uri, onFetched) 即fetch(‘http://localhost/test/SEAJS/a.js‘,onFetched)。


function fetch(uri, onFetched) {
    // 根据map中的规则替换uri为新的请求地址
    var requestUri = util.parseMap(uri)
    // 首先在已获取列表中查找是否含有requestUri记录
    if (fetchedList[requestUri]) {
      // 这个时候将原始uri的module存储信息刷新到通过map重定义的requestUri上
      cachedModules[uri] = cachedModules[requestUri]
      // 执行onFetched 并返回，意味着模块已经获取成功了
      onFetched()
      return
    }
    //在获取列表中查询 requestUri 的存储信息
    if (fetchingList[requestUri]) {
      //在callbacklist中加入该uri对应下的callback，并返回
      callbackList[requestUri].push(onFetched)    //如果正在获取中，就把此模块的onFetched回调方法push进数组中，并返回。
      return
    }
    // 如果尝试获取的模块都未出现在fetchedList和fetchingList中，则分别在请求列表和回调列表中添加其信息
    fetchingList[requestUri] = true
    callbackList[requestUri] = [onFetched]
    // Fetches it
    Module._fetch(
        requestUri,
        function() {
          fetchedList[requestUri] = true
          // Updates module status
          // 如果 module.status 等于 STATUS.FECTCHING ,则修改module状态为FETCHED
          var module = cachedModules[uri]
          if (module.status === STATUS.FETCHING) {
            module.status = STATUS.FETCHED
          }
          if (fetchingList[requestUri]) {
            delete fetchingList[requestUri]
          }
          // Calls callbackList 统一执行回调
          if (callbackList[requestUri]) {
            util.forEach(callbackList[requestUri], function(fn) {
              fn()    //fn就是模块a对应的onFeched方法。
            })
            delete callbackList[requestUri]
          }
        },
        config.charset
    )
  }


接下来 将会执行 Module._fetch()，这里的回调函数我们称作为callback3.

此方法就是调用loadJs方法动态下载a.js文件。（因为有a和jquery，所以会新建两个script）,这里有一个疑问，新建a的script，并添加到head中，就会下载js文件，但是在seajs中，并没有下载，而是等jquery的script建立好，并添加到head中，才会下载（谷歌调试器设断点，一直显示pending等待中）。这是为毛？（推荐看这里：http://ux.sohu.com/topics/50972d9ae7de3e752e0081ff，这里我说下额外的问题，大家可能知道为什么我们要少用table来布局，因为table在呈现树布局的时候，需要多次计算，而div只需要一次。同时，美的电商面试官告诉我：table需要全部解析完才会显示出来，而div解析多少就显示多少）。下载成功后，就会解析执行，执行的是define方法。这里会先执行a模块的代码。define(id,deps,function(){})方法解析




//define 定义 ,id : 模块id , deps : 模块依赖 , factory

  Module._define = function(id, deps, factory) {


　　 //解析依赖关系 // 如果deps不是数组类型，同时factory是函数 


　　 if (!util.isArray(deps) && util.isFunction(factory)) { // 函数体内正则匹配require字符串，并形成数组返回赋值给deps 


　　　　 deps = util.parseDependencies(factory.toString()) 


　　 }


　　//设置元信息 


　　 var meta = { id: id, dependencies: deps, factory: factory }　


　　 if (document.attachEvent) { 


　　　　 // 得到当前script的节点 


　　　　 var script = util.getCurrentScript() 


　　　　　　 // 如果script节点存在 


　　　　 if (script) { 


　　　　　　　　 // 得到原始uri地址 


　　　　　　　　 derivedUri = util.unParseMap(util.getScriptAbsoluteSrc(script)) } 


　　　　　　　　 if (!derivedUri) { 


　　　　　　　　　　　　 util.log(‘Failed to derive URI from interactive script for:‘, factory.toString(), ‘warn‘) 


　　　　　　　　 }


　　　　 }


　.........


 }


　　define首先会对factory执行一个判断 ，判断它是否为一个函数（原因是因为define内也可以包括文件，对象）




如果是函数 ， 那么 就会通过factory.toString()，得到函数，并通过正则匹配得 a.js的依赖，并把依赖保存在 deps 中




对于 a.js 而言， 它的依赖 是 b.js 所以 deps为 [‘./b‘]




并对 a.js 的信息进行保存 var meta = { id: id, dependencies: deps, factory: factory }




针对a.js meta = { id : undefined , dependencies : [‘./b‘] , factory : function(xxx){xxx}}




在 ie 6-9 浏览器中可以拿到当前运行js的路径 但是在标准浏览器中 ，这不可行 ，所以暂时先把元信息赋值给anonymousModuleMeta = meta。


然后触发onload，这时就会调用回调方法callback3，此回调方法就会修改当前回调模块（a.js）的状态值,将其设置为 module.status = STATUS.FETCHED。


再接下来 ,将统一 执行回调队列 callbackList 中的 a.js所对应的回调,也就是onFetched。


onFetched方法会检查a模块是否有依赖模块，因为a依赖于b，所以对模块a所依赖的b.js 执行_load()。


会去下载b模块，这时会先执行jquery的define方法。因为jquery没依赖模块，所以onload回调后。onFetched调用cb方法。


 


当b按照a一样的过程实现后，就会下载c模块。最终c,b,a模块都下载执行define，并onload结束后，也会调用cb方法，（先c,再b，后c）

所有模块都为ready之后，就会调用callback2方法。


最终回调到callback2,执行a和jquery模块的_compile方法：

首先编译a.js模块，模块a的function执行，因为a里面有require(b.js)，因此会去执行b模块的function.模块 a 的function开始执行模块 b 的function开始执行模块 c 的function开始执行模块 c 的function执行完毕模块 b 的function执行完毕模块 a 的function执行完毕

最后执行jquery的function。

编译结束后，就执行callback1,就可以使用a和jquery对象了。

seajs版本已经更新，现在没有_compile方法了。（大家自行去看，我也要去看下）




加油！





				


				
时间： 2024-08-29 04:31:12 

		


		


	

	
	

		


		
第三课：模块加载系统的相关文章


								

		

			

                第三章：模块加载系统（requirejs）
			

		

		

									

				任何一门语言在大规模应用阶段,必然要经历拆分模块的过程.便于维护与团队协作,与java走的最近的dojo率先引入加载器,早期的加载器都是同步的,使用document.write与同步Ajax请求实现.后来dojo开始以JSONP的方法设计它的每个模块结构.以script节点为主体加载它的模块.这个就是目前主流的加载器方式. 不得不提的是,dojo的加载器与AMD规范的发明者都是james Burke,dojo加载器独立出来就是著名的require.本章将深入的理解加载器的原理. 1.AMD规范			

		

	

				

		

			

                第四课：模块加载系统2
			

		

		

									

				最近比较闲,我就讲下seajs的模块编译_compile过程. 这里紧接着第三课的例子来讲解.首先是a.js的编译 Module.prototype._compile = function() { 126 var module = this 127 // 如果该模块已经编译过,则直接返回module.exports 128 if (module.status === STATUS.COMPILED) { 129 return module.exports 130 } 133 // 1. the			

		

	

				

		

			

                JavaScript架构设计 2.模块加载系统
			

		

		

									

				2.1 AMD规范 AMD是"Asynchronous Module Definition"的缩写,意为"异步模块定义".重点有两个.异步--有效避免了采用同步加载方式中导致的页面假死现象.模块定义--每个模块必须按照一定的格式编写.主要接口有两个,define与require.define是模块开发者关注的方法,require是模块使用者关注的方法. define的参数情况为define(id?,deps?,factory).第一个为模块ID,第2个为依赖列表,第			

		

	

				

		

			

                关于javascript模块加载技术的一些思考
			

		

		

									

				前不久有个网友问我在前端使用requireJs和seajs的问题,我当时问他你们公司以前有没有自己编写的javascript库,或者javascript框架,他的回答是什么都没有,他只是听说像requirejs和seajs是新东西新技术,很有价值所以想用它. 这位网友的问题引起了我对javascript模块加载技术的思考,上篇文章我给出了自己写的一个javascript库的基本结构,其实写这篇文章的一个起因就是因为我想使用requirejs或者seajs这样的技术来重新设计我写javascrip			

		

	

				

		

			

                Angular Material串串学客户端开发 2 - Node.js模块加载机制Require（）
			

		

		

									

				题外话解一下博客标题,因为第一篇文章评论中,有人质疑离题很远,说了半天和Angular Material没有半毛关系.其实我的的中心在后半句<串串学客户端开发>. require() 不要把这里的Require()和RequireJS混为一谈.不过有意思的是,Typescript的模块定义,甚至同时支持这两种模块机制. 导入和使用外部模块,只是简单的一句require(),看看angular/material/docs下的编译文件gulpfile.js的代码片段.对模块导入和使用有个直观的感觉			

		

	

				

		

			

                JavaScript之：模块加载程序的历史与背景
			

		

		

									

				原文:History and Background of JavaScript Module Loaders 作者:Elias Carlston 翻译:leotso 介绍 Web 应用程序的应用程序逻辑不断从后端移到浏览器端.但是,由于富客户端 JavaScript 应用程序的规模变得更大,它们遇到了类似于多年来传统应用所面临的挑战:共享代码以便重用,同时保持架构的隔离分层,并且足够灵活以便于轻松扩展. 这些挑战的一个解决方案是开发 JavaScript 模块和模块加载系统.这篇文章将着重于比较			

		

	

				

		

			

                自研模块加载器(三) module模块构造器设计-模块数据初始化
			

		

		

									

				依赖加载策略 模块数据初始化 status状态生命周期 代码展示 demo包括4个文件, index.html , a.js , b.js , startUp.js index.html <!DOCTYPE html> <html> <head> <title>自研模块加载器</title> </head> <body> <script src="./startUp.js"></scr			

		

	

				

		

			

                [译文]JOAL教程 第六课 高级加载方式与错误处理
			

		

		

									

				[译文]JOAL教程 原文地址:http://jogamp.org/joal-demos/www/devmaster/lesson6.html 原文作者:Athomas Goldberg 译文:三向板砖 转载请保留以上信息. 本次课程对应的学习笔记:http://blog.csdn.net/shuzhe66/article/details/40303739 第六课 高级加载方式与错误处理 本文是DevMaster.net(http://devmaster.net/)的OpenAL教程对应的JOA			

		

	

				

		

			

                Node.js【6】Web开发、进阶（模块加载、控制流、部署、弊端）
			

		

		

									

				笔记来自<Node.js开发指南>BYVoid编著 实现过程:https://github.com/ichenxiaodao/express-example 第5章 使用Node.js进行Web开发 从零开始用Node.js实现一个微博系统,功能包括路由控制.页面模板.数据库访问.用户注册.登录.用户会话等内容. 会介绍Express框架.MVC设计模式.ejs模板引擎以及MongoDB数据库的操作. 5.1.准备工作 Express(http://expressjs.com/)除了为http