论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Asp.net教程
Tag:静态页面,treeview,gridview,repeater,dataset,sqldatareader,ado.net,上传,三层,ajax,xml,留言本,新闻发布,商城,注入,存储过程,分页,安全,优化,xmlhttp,fso,jmail,application,session,防盗链,stream,无组件,组件,md5,乱码,缓存,加密,验证码,算法,cookies,ubb,正则表达式,水印,索引,日志,压缩,base64,url重写,控件,Web.config,JDBC,函数,内存,PDF,迁移,结构,破解,编译,配置,进程,分词,IIS,触发器,socket,form认证,登录,视频教程

Sys.ScriptLoader与JS加载进度条的实现

文章类别:Asp.net | 发表日期:2008-10-5 22:09:06

  今天有人问我,163邮箱那样的Javascript加载进度条是如何实现的。

  我不知道,不过实现一个不难,因为<script />有onload和onreadystatechange。还有就是,我们有Atlas。

  Atlas中有个类:Sys.ScriptLoader,它的作用就是在页面中依次地加载多个Script文件。在实现之前,先来分析一下这个类的代码。

 

  1Sys.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            else {
 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}
112Sys.ScriptLoader.registerClass('Sys.ScriptLoader');
  可以看出,Sys.ScriptLoader加载script的方法就是通过代码依次向<header />里添加<script />元素。事实上,它在Atlas中被使用的非常少。

  事实上,Sys.ScriptLoader的代码非常简单,我添加的注释越看越像画蛇添足。值得注意的是所有的资源都被尽可能的释放。尤其注意从第99行开始的代码,if体内首先用临时变量保留两个全局变量,然后再将全局变量释放。其目的就是避免在completionCallback在执行时抛出异常而导致的内存泄露,即使只有万分之一的可能性。Javascript越多,则越容易造成内存泄露,在编写JS代码时最好注意这方面的问题。

  接着解释一下load方法的第一个参数references,原本以为这一个Sys.Reference类的数组,结果发现其实相差甚远。不管怎么样顺便看一下该类的代码。

 

 1Sys.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}
32Sys.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<%@ Page Language="C#" %>
 2
 3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4
 5<script runat="server">
 6
 7</script>
 8
 9<html xmlns="http://www.w3.org/1999/xhtml" >
10<head runat="server">
11    <title>Load Scripts</title>
12    <script language="javascript">
13        function Load()
14        {
15            document.getElementById("bar").style.width = "0px";
16            var scripts = new Array();
17            for (var i = 0; i < 8; i++)
18            {
19                var s = new Object();
20                var sleep = Math.round((Math.random() * 400)) + 100;
21                s.url = "Script.ashx?sleep=" + sleep + "&t=" + Math.random();
22                s.cost = sleep;
23                scripts.push(s);
24            }
25               
26            Jeffz.Sample.LoadScripts.load(scripts);
27        }
28    </script>
29</head>
30<body style="font-family: Arial;">
31    <form id="form1" runat="server">
32    <div>
33        <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数组的格式如下:

1var scripts =
2[
3    { url : "http://www.sample.com/sample1.js", cost : costOfLoading1 },
4    { url : "http://www.sample.com/sample2.js", cost : costOfLoading2 },
5    { url : "http://www.sample.com/sample3.js", cost : costOfLoading3 }
6];
  每个元素的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{
 5    var totalCost = 0;
 6    var scriptLoader = new Sys.ScriptLoader();
 7
 8    this.load = function(scripts)
 9    {
10        if (Jeffz.Sample.__onScriptLoad != null)
11        {
12            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        {
22            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    {
35        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    {
43        Jeffz.Sample.__onScriptLoad = null;
44    }
45   
46    function onScriptLoad(url, loadedCost)
47    {
48        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一样建一个队列嘛),但是代码量自然而然就上去了,开发的复杂度也提高了。

  不过我认为,这种“单线程”的script加载已经足够用于大多数情况了。而且如果真的有“特殊”要求,参照Sys.ScriptLoader这个如此清晰明了的范例,自己重新写一个对于广大开发人员来说,难道还不是易如反掌的事情吗?
http://www.cnblogs.com/JeffreyZhao/archive/2006/09/13/502357.html

视频教程列表
文章教程搜索
 
Asp.net推荐教程
Asp.net热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058