Sys.ScriptLoader与JS加载进度条的实现 (转自 http://jeffreyzhao.cnblogs.com/ )
2006-09-13 10:49
381 查看
转载： http://jeffreyzhao.cnblogs.com/
今天有人问我，163邮箱那样的Javascript加载进度条是如何实现的。
我不知道，不过实现一个不难，因为<script />有onload和onreadystatechange。还有就是，我们有Atlas。
Atlas中有个类：Sys.ScriptLoader，它的作用就是在页面中依次地加载多个Script文件。在实现之前，先来分析一下这个类的代码。
1Sys.ScriptLoader.registerClass('Sys.ScriptLoader');
可以看出，Sys.ScriptLoader加载script的方法就是通过代码依次向<header />里添加<script />元素。事实上，它在Atlas中被使用的非常少。
事实上，Sys.ScriptLoader的代码非常简单，我添加的注释越看越像画蛇添足。值得注意的是所有的资源都被尽可能的释放。尤其注意从第99行开始的代码，if体内首先用临时变量保留两个全局变量，然后再将全局变量释放。其目的就是避免在completionCallback在执行时抛出异常而导致的内存泄露，即使只有万分之一的可能性。Javascript越多，则越容易造成内存泄露，在编写JS代码时最好注意这方面的问题。
接着解释一下load方法的第一个参数references，原本以为这一个Sys.Reference类的数组，结果发现其实相差甚远。不管怎么样顺便看一下该类的代码。
1Sys.Reference.registerSealedClass('Sys.Reference', null, Sys.ITypeDescriptorProvider, Sys.IDisposable);
33Sys.TypeDescriptor.addType('script', 'reference', Sys.Reference);
关心一下Sys.ScriptLoader类的代码可知，reference数组的每个元素其实只是简单的“{ url : "http://www.sample.com/sample.js", onscriptload : "alert(1)"}”形式的对象。不过这样也好，想构造这么一个数组也能轻易地使用JSON了。
到这里，我想大家也应该想到了如何使用Sys.ScriptLoader轻而易举地制作JS加载的进度条。不过既然写到了这里，也就继续把它进行一个简单的实现。
首先是aspx文件。
1
3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5</script>
8
9<html xmlns="http://www.w3.org/1999/xhtml" >
10<head runat="server">
11 <title>Load Scripts</title>
12</head>
30<body style="font-family: Arial;">
31 <form id="form1" runat="server">
32 <div>
33 <atlas:ScriptManager ID="ScriptManager1" runat="server">
34 </atlas:ScriptManager>
38
39 Progress Bar:
40 <div style="border: solid 1px black;">
41 <div id="bar" style="height: 20px; width:0%; background-color:Red;"></div>
42 </div>
43 <input type="button" onclick="Load()" value="Load" />
44 <div id="message"></div>
45 </div>
46 </form>
47</body>
48</html>
非常的简单。使用两个DIV制作了一个最简单的进度条。在点击按钮时调用了Load()函数。该函数随机生成了Script链接并生成了一个8元素的scripts数组。scripts数组的格式如下：
1var scripts =
2[
3];
每个元素的url属性不必说，而cost的功能就是表示加载该文件所消耗的时间的值。这个值没有单位，用到的只是这个值在总共消耗里的比例。另外，可以看到有一个Script.ashx，其作用是模拟一个长时间script加载，它会根据querystring中的sleep的值将线程休眠一段时间（至于后面的t，目的只是通过改变querystring来避免点击按钮时浏览器的缓存），这个文件几乎没有代码，可以在范例下载中看到它的实现。最后通过调用Jeffz.Sample.LoadScripts.load方法进行加载，这就涉及到了下面的代码，LoadScripts.js：
1Type.registerNamespace('Jeffz.Sample');
2
3Jeffz.Sample.LoadScripts = new function()
4 var totalCost = 0;
6 var scriptLoader = new Sys.ScriptLoader();
7
8 this.load = function(scripts)
9 if (Jeffz.Sample.__onScriptLoad != null)
11 throw new Error("In progress");
13 }
14
15 totalCost = 0;
16 Jeffz.Sample.__onScriptLoad = onScriptLoad;
17 var references = new Array();
18
19 var loadedCost = 0;
20 for (var i = 0; i < scripts.length; i++)
21 totalCost += scripts[i].cost;
23 loadedCost += scripts[i].cost;
24
25 var ref = createReference(scripts[i].url, loadedCost);
26
27 references.push(ref);
28 }
29
30 scriptLoader.load(references, onComplete);
31 }
32
33 function createReference(url, loadedCost)
34 var ref = new Object();
36 ref.url = url;
37 ref.onscriptload = "Jeffz.Sample.__onScriptLoad('" + url + "', " + loadedCost + ")";
38 return ref;
39 }
40
41 function onComplete()
42 Jeffz.Sample.__onScriptLoad = null;
44 }
45
46 function onScriptLoad(url, loadedCost)
47 var progress = 100.0 * loadedCost / totalCost;
49 document.getElementById("bar").style.width = progress + "%";
50 document.getElementById("message").innerHTML += ("<strong>" + url + "</strong>" + " loaded.<br />");
51 }
52}
哎，似乎完全没有必要对代码进行多余的解释。到目前为止，一个简单的Script加载进度条就完成了，相当的简单。代码可以点击这里下载，也可以点击这里查看效果。
不过事情到此为止了吗？事实上，我对这个Solution不怎么满意，虽然对于大多数情况应该已经够用了。可以注意到，我将Jeffz.Sample.LoadScripts实现成为了一个Singleton，也就是说，没有另外一个和它一样的实例。并且在load方法的一开始就判断是不是正在加载，如果是，那么会抛出一个异常。实现了这么一种“单线程”的加载，直接原因是受限于Sys.ScriptLoader的实现。
请看Sys.ScriptLoader代码的第44行，它使用了eval来“邪恶”地进行了script加载完成时的回调。这其实对于开发人员是一种非常难受的实现，因为eval，所以无法地将一个函数的引用作为回调函数来传递。唯一能做的就是只能把“根代码”作为字符串形式来交给Sys.ScriptLoader。虽然还是能够通过Sys.ScriptLoader实现“并发”的Script加载（说白了最多像Sys.ScriptLoader一样建一个队列嘛），但是代码量自然而然就上去了，开发的复杂度也提高了。
另外，Sys.ScriptLoader在加载某Script出错时也没有提示，而是直接退出，这个也不是很理想。
不过我认为，这种“单线程”的script加载已经足够用于大多数情况了。而且如果真的有“特殊”要求，参照Sys.ScriptLoader这个如此清晰明了的范例，自己重新写一个对于广大开发人员来说，难道还不是易如反掌的事情吗？
今天有人问我，163邮箱那样的Javascript加载进度条是如何实现的。
我不知道，不过实现一个不难，因为<script />有onload和onreadystatechange。还有就是，我们有Atlas。
Atlas中有个类：Sys.ScriptLoader，它的作用就是在页面中依次地加载多个Script文件。在实现之前，先来分析一下这个类的代码。
1Sys.ScriptLoader.registerClass('Sys.ScriptLoader');
可以看出，Sys.ScriptLoader加载script的方法就是通过代码依次向<header />里添加<script />元素。事实上，它在Atlas中被使用的非常少。
事实上，Sys.ScriptLoader的代码非常简单，我添加的注释越看越像画蛇添足。值得注意的是所有的资源都被尽可能的释放。尤其注意从第99行开始的代码，if体内首先用临时变量保留两个全局变量，然后再将全局变量释放。其目的就是避免在completionCallback在执行时抛出异常而导致的内存泄露，即使只有万分之一的可能性。Javascript越多，则越容易造成内存泄露，在编写JS代码时最好注意这方面的问题。
接着解释一下load方法的第一个参数references，原本以为这一个Sys.Reference类的数组，结果发现其实相差甚远。不管怎么样顺便看一下该类的代码。
1Sys.Reference.registerSealedClass('Sys.Reference', null, Sys.ITypeDescriptorProvider, Sys.IDisposable);
33Sys.TypeDescriptor.addType('script', 'reference', Sys.Reference);
关心一下Sys.ScriptLoader类的代码可知，reference数组的每个元素其实只是简单的“{ url : "http://www.sample.com/sample.js", onscriptload : "alert(1)"}”形式的对象。不过这样也好，想构造这么一个数组也能轻易地使用JSON了。
到这里，我想大家也应该想到了如何使用Sys.ScriptLoader轻而易举地制作JS加载的进度条。不过既然写到了这里，也就继续把它进行一个简单的实现。
首先是aspx文件。
1
3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5</script>
8
9<html xmlns="http://www.w3.org/1999/xhtml" >
10<head runat="server">
11 <title>Load Scripts</title>
12</head>
30<body style="font-family: Arial;">
31 <form id="form1" runat="server">
32 <div>
33 <atlas:ScriptManager ID="ScriptManager1" runat="server">
34 </atlas:ScriptManager>
38
39 Progress Bar:
40 <div style="border: solid 1px black;">
41 <div id="bar" style="height: 20px; width:0%; background-color:Red;"></div>
42 </div>
43 <input type="button" onclick="Load()" value="Load" />
44 <div id="message"></div>
45 </div>
46 </form>
47</body>
48</html>
非常的简单。使用两个DIV制作了一个最简单的进度条。在点击按钮时调用了Load()函数。该函数随机生成了Script链接并生成了一个8元素的scripts数组。scripts数组的格式如下：
1var scripts =
2[
3];
每个元素的url属性不必说，而cost的功能就是表示加载该文件所消耗的时间的值。这个值没有单位，用到的只是这个值在总共消耗里的比例。另外，可以看到有一个Script.ashx，其作用是模拟一个长时间script加载，它会根据querystring中的sleep的值将线程休眠一段时间（至于后面的t，目的只是通过改变querystring来避免点击按钮时浏览器的缓存），这个文件几乎没有代码，可以在范例下载中看到它的实现。最后通过调用Jeffz.Sample.LoadScripts.load方法进行加载，这就涉及到了下面的代码，LoadScripts.js：
1Type.registerNamespace('Jeffz.Sample');
2
3Jeffz.Sample.LoadScripts = new function()
4 var totalCost = 0;
6 var scriptLoader = new Sys.ScriptLoader();
7
8 this.load = function(scripts)
9 if (Jeffz.Sample.__onScriptLoad != null)
11 throw new Error("In progress");
13 }
14
15 totalCost = 0;
16 Jeffz.Sample.__onScriptLoad = onScriptLoad;
17 var references = new Array();
18
19 var loadedCost = 0;
20 for (var i = 0; i < scripts.length; i++)
21 totalCost += scripts[i].cost;
23 loadedCost += scripts[i].cost;
24
25 var ref = createReference(scripts[i].url, loadedCost);
26
27 references.push(ref);
28 }
29
30 scriptLoader.load(references, onComplete);
31 }
32
33 function createReference(url, loadedCost)
34 var ref = new Object();
36 ref.url = url;
37 ref.onscriptload = "Jeffz.Sample.__onScriptLoad('" + url + "', " + loadedCost + ")";
38 return ref;
39 }
40
41 function onComplete()
42 Jeffz.Sample.__onScriptLoad = null;
44 }
45
46 function onScriptLoad(url, loadedCost)
47 var progress = 100.0 * loadedCost / totalCost;
49 document.getElementById("bar").style.width = progress + "%";
50 document.getElementById("message").innerHTML += ("<strong>" + url + "</strong>" + " loaded.<br />");
51 }
52}
哎，似乎完全没有必要对代码进行多余的解释。到目前为止，一个简单的Script加载进度条就完成了，相当的简单。代码可以点击这里下载，也可以点击这里查看效果。
不过事情到此为止了吗？事实上，我对这个Solution不怎么满意，虽然对于大多数情况应该已经够用了。可以注意到，我将Jeffz.Sample.LoadScripts实现成为了一个Singleton，也就是说，没有另外一个和它一样的实例。并且在load方法的一开始就判断是不是正在加载，如果是，那么会抛出一个异常。实现了这么一种“单线程”的加载，直接原因是受限于Sys.ScriptLoader的实现。
请看Sys.ScriptLoader代码的第44行，它使用了eval来“邪恶”地进行了script加载完成时的回调。这其实对于开发人员是一种非常难受的实现，因为eval，所以无法地将一个函数的引用作为回调函数来传递。唯一能做的就是只能把“根代码”作为字符串形式来交给Sys.ScriptLoader。虽然还是能够通过Sys.ScriptLoader实现“并发”的Script加载（说白了最多像Sys.ScriptLoader一样建一个队列嘛），但是代码量自然而然就上去了，开发的复杂度也提高了。
另外，Sys.ScriptLoader在加载某Script出错时也没有提示，而是直接退出，这个也不是很理想。
不过我认为，这种“单线程”的script加载已经足够用于大多数情况了。而且如果真的有“特殊”要求，参照Sys.ScriptLoader这个如此清晰明了的范例，自己重新写一个对于广大开发人员来说，难道还不是易如反掌的事情吗？
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Sys.ScriptLoader与JS加载进度条的实现
- Sys.ScriptLoader与JS加载进度条的实现
- Sys.ScriptLoader与JS加载进度条的实现
- Sys.ScriptLoader与JS加载进度条的实现
- Sys.ScriptLoader与JS加载进度条的实现
- MSN弹出式窗口popup的JS实现【转：http://www.cnblogs.com/vagerent/archive/2007/07/02/802975.html】
- 使用JS实现倒计时功能(http://www.cnblogs.com/doll-net)
- 使用JS实现倒计时功能(http://www.cnblogs.com/doll-net)
- 该如何加载google-analytics(或其他第三方)的JS (转自http://www.cnblogs.com/BearsTaR/archive/2010/05/12/best_use_google_analytics.html)
- 原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo) (转http://www.cnblogs.com/mrthink/archive/2011/01/29/1947532.html)
- js 调用C#.NET后台方法 转载自：http://www.cnblogs.com/lizhao/archive/2010/11/23/1990436.html
- 重提URL Rewrite(转载：http://www.cnblogs.com/JeffreyZhao/archive/2008/01/12/Url-Rewrite-1.html)
- 浅谈前端实现页面加载进度条以及 nprogress.js 的实现
- Silverlight中实现带CheckBox的多选下拉框--来源(附有实例代码)：http://www.cnblogs.com/shiaupo/archive/2011/06/04/2072668.html
- CORS 跨域 实现思路及相关解决方案(转：http://www.cnblogs.com/sloong/p/cors.html)
- 使用Sqlserver事务发布实现数据同步（引：http://www.cnblogs.com/daizhj/archive/2009/11/18/1605293.html ）
- 转自http://www.cnblogs.com/jscode/archive/2012/07/10/2583856.html
- Android实现XML解析技术 (转载http://www.cnblogs.com/hanyonglu/archive/2012/02/28/2370675.html)
- HTTP协议的chunked编码 http://www.cnblogs.com/zhaozhan/archive/2010/08/24/1807639.html
- 亲测VS2010纯静态编译QT4.8.0，实现VS2010编译调试Qt程序，QtCreator静态发布程序http://www.cnblogs.com/elect-fans/archive/2012/