JavaScript动态加载进阶：异步策略与UsingJS实现

同步加载策略的局限性

在上一篇关于JavaScript动态加载的文章中，我们介绍了使用同步加载策略来实现模块引入的方式。

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

由于JavaScript是单线程执行的，同步加载策略存在诸多弊端，例如阻塞后续代码运行、导致浏览器界面假死等性能问题。

若改用异步策略，则难以实现“先加载依赖包，后使用模块”的效果，通常只能采用回调函数的形式。这并非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函数，其具体作用将在后文分析。

异步策略的特点是不阻塞当前代码执行。然而，若模块正在加载且后续代码依赖该模块，便会引发异常。解决这一依赖关系目前主要依靠回调函数。

UsingJS异步加载核心机制

遵循UsingJS“先加载后使用”的理念，异步解决方案的核心在于：在模块实际使用前，不立即发起文件请求，而是将所需的JS文件路径暂存于一个对象（如数组）中，待真正需要时再逐个加载。

 
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数组，并通过exist方法判断：若模块已存在，则不执行任何操作，从而避免重复添加。

那么，模块何时真正被加载呢？这就用到了前文提到的Using.asyn方法。该方法通知Using开始异步加载文件，并在所有文件加载完毕后执行传入的回调函数。

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

从代码可见，Using.asyn函数调用了Using.fn.script，并将回调函数作为参数传递。接下来分析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根据模块名加载对应的JS文件。

其次，通过内部函数loadScript执行实际的模块加载。利用计数器complete记录已加载的模块数量，当所有模块加载完毕（complete >= count）时，执行传入的回调函数。

整合上述代码，整体思路为：通过Using对象进行模块注册并记录，通过Using.asyn触发异步加载流程，最终由Using.fn.script完成加载并执行回调。

此外，还注意到Using.fetch函数。该函数主要用于解决按需加载的需求，类似于jQuery的getScript。在加载前会判断目标模块是否已存在，若已加载则直接执行回调，否则发起加载。

遗留问题与优化思考

此次UsingJS的主要改动是将同步策略调整为异步策略，但仍遗留一些问题。例如，如何实现类似$(document).ready的效果，仅在文档加载完毕后执行代码。虽然实现该功能不难，但在编写代码时，由于异步导致的Using.asyn多次调用及模块重复加载等问题较为复杂，故将此问题延后解决，逐步处理。

另外涉及导包顺序问题。虽然曾考虑通过添加依赖关系来自动解决加载顺序，但认为这种做法实际意义不大。因为开发人员通常清楚文件间的依赖关系；若不清楚，即使使用<script>标签也会出错。此外，实现依赖关系会增加UsingJS的代码体积，且属于重复造轮子。这种理解是否正确仍有待验证。