今天有人問我，163郵箱那樣的Javascript加載進度條是如何實作的。
我不知道，不過實作一個不難，因為<script />有onload和onreadystatechange。還有就是，我們有Atlas。
Atlas中有個類：Sys.ScriptLoader，它的作用就是在頁面中依次地加載多個Script檔案。在實作之前，先來分析一下這個類的代碼。
1
Sys.ScriptLoader = function() {
2
3
// 所有Script的reference對象數組。
4
var _references;
5
// 所有Script加載完之後執行的回調函數。
6
var _completionCallback;
7
// 執行回調函數時提供的上下文（參數）。
8
var _callbackContext;
9
10
// 目前正在加載的Script的HTTP Element（<script />）。
11
var _currentLoadingReference;
12
// 目前的Script加載完成後所調用的回調函數。
13
var _currentOnScriptLoad;
14
15
// ScriptLoader唯一的方法，傳入三個參數，參數含義不再贅述。
16
this.load = function(references, completionCallback, callbackContext) {
17
_references = references;
18
_completionCallback = completionCallback;
19
_callbackContext = callbackContext;
20
21
loadReferences();
22
}
23
24
// 開始加載引用。
25
function loadReferences() {
26
// 如果目前正在加載某個Script。
27
// 這表示此方法不是第一次被調用，而是在某個Script被加載
28
// 完成後才被調用，用以加載下一個Script。
29
if (_currentLoadingReference) {
30
// 檢視目前Script元素的readyState，IE下為complete，
31
// 其他浏覽器如FF則為loaded（FF其實并無此屬性，
32
// 但是下面的代碼會将其設為loaded）。
33
// 如果加載失敗，則退出。
34
if ((_currentLoadingReference.readyState != 'loaded') &&
35
(_currentLoadingReference.readyState != 'complete')) {
36
return;
37
}
38
else {
39
// 進入此分支，表明加載成功。
40
41
// 如果目前Script定義了onLoad函數。
42
if (_currentOnScriptLoad) {
43
// 通過eval調用（這裡是個麻煩的地方）。
44
eval(_currentOnScriptLoad);
45
// 設為null，釋放資源。
46
_currentOnScriptLoad = null;
47
}
48
49
// 将相關事件設為null以確定釋放資源。
50
if (Sys.Runtime.get_hostType() != Sys.HostType.InternetExplorer) {
51
// 如果目前浏覽器不是IE，見下面的代碼
52
// 會發現為<script />定義了onload事件。
53
_currentLoadingReference.onload = null;
54
55
else {
56
// 如果是IE，見下面代碼會發現為了
57
// <script />定義了onreadystatechange事件。
58
_currentLoadingReference.onreadystatechange = null;
59
60
61
// 最終釋放目前的<script />引用。
62
_currentLoadingReference = null;
63
64
}
65
66
// 如果還有沒有加載的Script。
67
if (_references.length) {
68
// 出隊列。
69
var reference = _references.dequeue();
70
// 建立<script />
71
var scriptElement = document.createElement('script');
72
// 設目前的<script />和目前加載成功的回調函數。
73
_currentLoadingReference = scriptElement;
74
_currentOnScriptLoad = reference.onscriptload;
75
76
if (Sys.Runtime.get_hostType() != Sys.HostType.InternetExplorer) {
77
// 如果不是IE的話，那麼為<script />設屬性readyState，
78
// 并且使用onload事件。
79
scriptElement.readyState = 'loaded';
80
scriptElement.onload = loadReferences;
81
82
83
// 如果是IE，那麼使用onreadystatechange事件。
84
scriptElement.onreadystatechange = loadReferences;
85
86
scriptElement.type = 'text/javascript';
87
scriptElement.src = reference.url;
88
89
// 将<script />添加至DOM
90
var headElement = document.getElementsByTagName('head')[0];
91
headElement.appendChild(scriptElement);
92
93
return;
94
95
96
// 如果執行到這裡，說明所有的Script已經加載完了。
97
// 如果定義了所有Script加載完之後執行的回調函數，
98
// 那麼執行并釋放資源。
99
if (_completionCallback) {
100
var completionCallback = _completionCallback;
101
var callbackContext = _callbackContext;
102
103
_completionCallback = null;
104
_callbackContext = null;
105
106
completionCallback(callbackContext);
107
108
109
_references = null;
110
111
}
112
Sys.ScriptLoader.registerClass('Sys.ScriptLoader');
可以看出，Sys.ScriptLoader加載script的方法就是通過代碼依次向<header />裡添加<script />元素。事實上，它在Atlas中被使用的非常少。
事實上，Sys.ScriptLoader的代碼非常簡單，我添加的注釋越看越像畫蛇添足。值得注意的是所有的資源都被盡可能的釋放。尤其注意從第99 行開始的代碼，if體内首先用臨時變量保留兩個全局變量，然後再将全局變量釋放。其目的就是避免在completionCallback在執行時抛出異常 而導緻的記憶體洩露，即使隻有萬分之一的可能性。Javascript越多，則越容易造成記憶體洩露，在編寫JS代碼時最好注意這方面的問題。
接着解釋一下load方法的第一個參數references，原本以為這一個Sys.Reference類的數組，結果發現其實相差甚遠。不管怎麼樣順便看一下該類的代碼。
1
Sys.Reference = function() {
2
3
var _component;
4
var _onload;
5
6
this.get_component = function() {
7
return _component;
8
9
this.set_component = function(value) {
10
_component = value;
11
12
13
this.get_onscriptload = function() {
14
return _onload;
15
16
this.set_onscriptload = function(value) {
17
_onload = value;
18
19
20
this.dispose = function() {
21
_component = null;
22
23
24
this.getDescriptor = function() {
25
var td = new Sys.TypeDescriptor();
26
27
td.addProperty('component', Object);
28
td.addProperty('onscriptload', String);
29
return td;
30
31
32
Sys.Reference.registerSealedClass('Sys.Reference', null, Sys.ITypeDescriptorProvider, Sys.IDisposable);
33
Sys.TypeDescriptor.addType('script', 'reference', Sys.Reference);
到這裡，我想大家也應該想到了如何使用Sys.ScriptLoader輕而易舉地制作JS加載的進度條。不過既然寫到了這裡，也就繼續把它進行一個簡單的實作。
首先是aspx檔案。
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Load Scripts</title>
<script language="javascript">
function Load()
{
document.getElementById("bar").style.width = "0px";
var scripts = new Array();
for (var i = 0; i < 8; i++)
{
var s = new Object();
var sleep = Math.round((Math.random() * 400)) + 100;
s.url = "Script.ashx?sleep=" + sleep + "&t=" + Math.random();
s.cost = sleep;
scripts.push(s);
Jeffz.Sample.LoadScripts.load(scripts);
</script>
</head>
<body style="font-family: Arial;">
<form id="form1" runat="server">
<div>
<atlas:ScriptManager ID="ScriptManager1" runat="server">
34
<Scripts>
35
<atlas:ScriptReference Path="js/LoadScripts.js" />
36
</Scripts>
37
</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數組的格式如下：
1
var scripts =
2
[
3
{ url : "[url]http://www.sample.com/sample1.js[/url]", cost : costOfLoading1 },
4
{ url : "[url]http://www.sample.com/sample2.js[/url]", cost : costOfLoading2 },
5
{ url : "[url]http://www.sample.com/sample3.js[/url]", cost : costOfLoading3 }
6
];
每個元素的url屬性不必說，而cost的功能就是表示加載該檔案所消耗的時間的 值。這個值沒有機關，用到的隻是這個值在總共消耗裡的比例。另外，可以看到有一個Script.ashx，其作用是模拟一個長時間script加載，它會 根據querystring中的sleep的值将線程休眠一段時間（至于後面的t，目的隻是通過改變querystring來避免點選按鈕時浏覽器的緩 存），這個檔案幾乎沒有代碼，可以在範例下載下傳中看到它的實作。最後通過調用Jeffz.Sample.LoadScripts.load方法進行加載，這 就涉及到了下面的代碼，LoadScripts.js：
Type.registerNamespace('Jeffz.Sample');
Jeffz.Sample.LoadScripts = new function()
{
var totalCost = 0;
var scriptLoader = new Sys.ScriptLoader();
this.load = function(scripts)
{
if (Jeffz.Sample.__onScriptLoad != null)
throw new Error("In progress");
totalCost = 0;
Jeffz.Sample.__onScriptLoad = onScriptLoad;
var references = new Array();
var loadedCost = 0;
for (var i = 0; i < scripts.length; i++)
totalCost += scripts[i].cost;
loadedCost += scripts[i].cost;
var ref = createReference(scripts[i].url, loadedCost);
references.push(ref);
scriptLoader.load(references, onComplete);
function createReference(url, loadedCost)
var ref = new Object();
ref.url = url;
ref.onscriptload = "Jeffz.Sample.__onScriptLoad('" + url + "', " + loadedCost + ")";
return ref;
function onComplete()
Jeffz.Sample.__onScriptLoad = null;
function onScriptLoad(url, loadedCost)
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
不過事情到此為止了嗎？事實上，我對這個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這個如此清晰明了的範例，自己重新寫一個對于廣大開發人員來說，難道還不是易如反掌的事情嗎？
本文轉自 jeffz 51CTO部落格，原文連結：http://blog.51cto.com/jeffz/60960，如需轉載請自行聯系原作者