javascript动态加载二

166 阅读 0 评论 110 点赞

我是靠谱客的博主懦弱小笼包，最近开发中收集的这篇文章主要介绍javascript动态加载二，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在上一篇javascript动态加载中，提到了使用同步加载策略这一个方式来实现如

复制代码代码如下:

 
Using("jquery"); 
Using("User"); 

$("#ID").click(function(){ 
var user = new User(); 
user.name = "xx"; 
user.show(); 
}); 

由于JS是单线程的，所以同步策略带来的坏处不少，比如阻止之后的代码运行、造成浏览器假死等问题。
使用异步策略又难以实现先导包后使用的效果。只能采用callback的形式来进行，这又不是UsingJS想要实现的，毕竟jQuery的getScript函数就可以实现这一方式。

经过一番思考，到底怎么解决导包而且是异步的方式，最后得出一个解决方案。先来看一下采用这个方案后的编程方式。

复制代码代码如下:

 
<div id="panel"></div> 

<script type="text/javascript" src="js/using-0.4.js"></script> 
<script type="text/javascript"> 
Using("jq"); 
Using("jq"); 
Using("Http"); 

Using.asyn(function(){ 
$("#panel").click(function(){ 
alert("Using jquery object"); 
}); 
Using.fetch("Http",function(){ 
var http = new Using.Modules.Http(); 
http.set("xxx"); 
http.show(); 
}); 
}); 
</script> 

如上代码所示，总体来说与同步策略没有太大的修改，只是导入了两次jquery，这里显然是需要处理成只导包一次，并且里面增加了一个Using.asyn函数，具体这个函数做什么用，之后会分析。
都知道，异步策略，是不影响当前运行的，那么，我导入的包，假如正在加载，而其后的代码也正在运行，两者之间也刚好存在依赖关系，那么就会出现异常，怎么解决这两者之间的关系，目前唯一的解决办法就是回调函数。

按照Using的思想，必须是先导包后使用。异步的解决办法就是在模块使用之前，并不真的去进行文件拉取，而是将需要的JS文件放置到一个对象当中，比如Array，当有真正需求的时候，再逐个进行加载。来看看

复制代码代码如下:

 
Using("jq"); 
Using("jq"); 
Using("Http"); 

是怎么工作的。上一段代码

复制代码代码如下:

 
var moduleList = []; 

Using.fn = Using.prototype; 
Using.fn.initialize= function(module){ 
!this.exist(moduleList,module) ? moduleList.push(module) : null; 
} 

这段代码是略去上下文，截取的Using的原型中的一个初始化方法，从代码得知，其主要的职责就是将需要加载的模块放置到moduleList中，并且进行判断，假如moduleList中含有当前需要加载的模块，那么，不进行任何操作。

那么，什么时候进行加载呢？这个就用到了之前提到的Using.asyn方法，也就是通知Using，现在需要异步加载文件了，并且，在加载完毕之后调用Using.asyn函数的回调函数。同样上一段代码

复制代码代码如下:

 
Using.asyn = function(callback){ 
Using.fn.script(callback); 
} 

从代码只能简要的看出，Using.asyn函数调用了Using.fn.script函数，并且将回调函数传给了它。自然，就需要看看其又是怎么工作的。

复制代码代码如下:

 
Using.fn.script = function(callback){ 
var _this = this, 
complete = 0, 
count = moduleList.length, 
len = 0; 
if(count < 1){ 
return; 
} 

var loadScript = function(){ 
while(len < count){ 
_this.ajax(Using.Config[moduleList[len]],function(){ 
complete++; 
if(complete >= count){ 
callback(); 
} 
}); 
len++; 
} 
} 
!Using.Config ? _this.ajax("/js/config",function(){ 
loadScript(); 
}) : loadScript(); 
} 

首先看Using.Config，就是上一篇提到的模块配置文件，以通知Using通过模块名来加载相应的模块文件。

其次就是通过内部函数loadScript来做模块文件的加载，通过一个计数器complete来判断当前已经加载了几个模块，当所有模块加载完毕，则调用回调函数。

整合以上代码，整个思路就是说，通过Using对象来导包，并记录，通过Using.asyn来通知Using进行异步加载，最后由Using.fn.script来实现异步加载并执行回调函数。

还注意到Using.fetch函数，整个函数主要是为了解决当代码运行到一定程度或者某一个需求才要加载的文件，类似于$.getScript文件，在加载之前会进行判断，判断当前需要的模块是否已经加载过，如果加载过则直接执行回调函数。

这一次UsingJS的改动，主要是为了将同步策略改为异步策略，但是同样遗留有很多问题，比如要进行类似$(document).ready，只在文档加载完毕的时候才执行，本身来说，实现这个一个效果并不难，而是编写代码时，脑子凌乱了，一时没办法解决Using.asyn多次调用时，由于异步而产生的多次加载同一个模块，又或者各种莫名其妙的问题，一时没有了头绪，故，将此问题后延，一步一步的解决之。

还有便是导包的顺序，不能任意顺序，当时也想做成任意导包，通过添加依赖关系，来做到由代码解决加载顺序，但是又想到，这个做法没有什么很大的实际意义，编码人员肯定知道文件之间的依赖关系的，如果编码的人不知道文件的加载顺序，就是使用<script>标签形式，照样会出错，而做成依赖关系不仅增加了Using的体积，更重要的是做了一件重复的事情。不知道这样理解对不对。