javascript动态加载二
2024-05-06 14:21:22
供稿：网友
在上一篇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);
