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);
