一页面多XMLHttpRequest对象


Posted in Javascript onJanuary 22, 2007

刚在ajacn发了个贴,关于为XMLHttpRequest提供一个对象池。或许能帮到你,转贴如下:

在网上看到了有些同志提到了为Ajax的XMLHttpRequest提供一个对象池,也读了他们给出的实现代码。感觉不是特别理想,于是模仿apache的commons中的ObjectPool的思路写了一个简单的JavaScript版。 
望指教: 

代码
function ObjectPool(poolableObjectFactory) {    
    this._poolableObjectFactory = poolableObjectFactory;    
    this._idlePool = [];     
    this._activePool = [];     
}    
// 从对象池中租借一个对象,如果目前没有可用的空闲对象则通过poolableObjectFactory创建一个    
// 既然是借的,用完记得一定要还哦!    
ObjectPool.prototype.borrowObject = function() {    
    var object = null;    
    var idlePool = this._idlePool;    
    var factory = this._poolableObjectFactory;    
    if (idlePool.length > 0) {    
        object = idlePool.pop();    
    }    
    else {    
        object = factory.makeObject();    
    }    
    if (object != null) {    
        this._activePool.push(object);    
        if (factory.activateObject) {    
            factory.activateObject(object);    
        }    
    }    
    return object;    
}    
// 归还一个对象    
ObjectPool.prototype.returnObject = function(object) {    
    function indexOf(array, object) {    
        for (var i = 0; i < array.length; i++) {    
            if (array[i] == object) return i;    
        }    
        return -1;    
    }    
    if (object != null) {    
        var activePool = this._activePool;    
        var factory = this._poolableObjectFactory;          
        var i = indexOf(activePool, object);    
        if (i < 0) return;          
        if (factory.passivateObject) {    
            factory.passivateObject(object);    
        }           
        activePool.splice(i, 1);    
        this._idlePool.push(object);    
    }    
}    
// 返回当前激活对象的个数    
ObjectPool.prototype.getNumActive = function() {    
    return this._activePool.length;    
}    
// 返回当前空闲对象的个数    
ObjectPool.prototype.getNumIdle = function() {    
    return this._idlePool.length;    
}    
// 销毁对象池及其中的所有对象    
// 如果对象池中的对象需要析构。那么必须实现poolableObjectFactory中的destroyObject方法,同时保证ObjectPool的destroy方法在需要的时候被调用到(例如Window的unload事件中)。    
ObjectPool.prototype.destroy = function() {    
    var factory = this._poolableObjectFactory;    
    function returnObject(object) {    
        if (factory.passivateObject) {    
            factory.passivateObject(object);    
        }    
    }    
    function destroyObject(object) {    
        if (factory.destroyObject) {    
            factory.destroyObject(object);    
        }    
    }       
    var activePool = this._activePool;    
    for (var i = 0; i < activePool.length; i++) {    
        var object = activePool[i];    
        returnObject(object);    
        destroyObject(object);    
    }    
    var idlePool = this._idlePool;    
    for (var i = 0; i < idlePool.length; i++) {    
        var object = idlePool[i];    
        destroyObject(object);    
    }    
    this._idlePool = null;     
    this._activePool = null;     
    this._poolableObjectFactory = null;    
}   

上面代码中ObjectPool的构造参数poolableObjectFactory的声明如下: 

代码
// 注意: 这只是说明,不是真正的代码!    
var PoolableObjectFactory = {           
    makeObject: function() {}, // 创建一个新的对象。(必须声明)       

    activateObject: function(object) {}, // 当一个对象被激活时(即被借出时)触发的方法。(可选)    

    passivateObject: function(object) {}, // 当一个对象被钝化时(即被归还时)触发的方法。(可选)    

    destroyObject: function(object) {} // 销毁一个对象。(可选)           
};    

结合XMLHttpRequest创建过程的简陋示例: 

代码
// 声明XMLHttpRequest的创建工厂    
var factory = {         
    makeObject: function() {    
        // 创建XMLHttpRequset对象    
        // 注:这里的创建方法不够强壮,勿学!    
        if (window.ActiveXObject){    
            return new ActiveXObject("Microsoft.XMLHTTP");    
        }    
        else {    
            return new XMLHttpRequest();    
        }    
    },              
    passivateObject: function(xhr) {    
        // 重置XMLHttpRequset对象    
        xhr.onreadystatechange = {};    
        xhr.abort();    
    }    
};    
var pool = new ObjectPool(factory); // 创建对象池    
// ......    
var xhr = pool.borrowObject(); // 获得一个XMLHttpRequest对象    
xhr.onreadystatechange = function() {    
    if (xhr.readyState == 4) {    
        // ......    
        pool.returnObject(xhr); // 归还XMLHttpRequest对象    
    }    
};    
xhr.open(method, url, true);    
// ......    

最后附上jsUnit的测试用例: 

代码
function test_pool() {    
    var factory = {    
        counter: 0,    

        makeObject: function() {    
            return {id: ++ this.counter};               
        },          

        activateObject: function(object) {    
            object.activated = true;    
        },    

        passivateObject: function(object) {    
            object.activated = false;               
        },    

        destroyObject: function(object) {    
            object.destroyed = true;                
        }    
    };    
    var pool = new ObjectPool(factory);    
    // borrowObject object1    
    var object1 = pool.borrowObject();    
    assertEquals(object1.id, 1);    
    assertTrue(object1.activated);    
    assertEquals(factory.counter, 1);    
    assertEquals(pool.getNumActive(), 1);    
    assertEquals(pool.getNumIdle(), 0);    
    // borrowObject object2    
    var object2 = pool.borrowObject();    
    assertEquals(object2.id, 2);    
    assertTrue(object2.activated);    
    assertEquals(factory.counter, 2);    
    assertEquals(pool.getNumActive(), 2);    
    assertEquals(pool.getNumIdle(), 0);    
    // borrowObject object3    
    var object3 = pool.borrowObject();    
    assertEquals(object3.id, 3);    
    assertTrue(object3.activated);    
    assertEquals(factory.counter, 3);    
    assertEquals(pool.getNumActive(), 3);    
    assertEquals(pool.getNumIdle(), 0);    
    // returnObject object2    
    pool.returnObject(object2);    
    assertFalse(object2.activated);    
    assertEquals(factory.counter, 3);    
    assertEquals(pool.getNumActive(), 2);    
    assertEquals(pool.getNumIdle(), 1);    
    // returnObject object3    
    pool.returnObject(object3);    
    assertFalse(object3.activated);    
    assertEquals(pool.getNumActive(), 1);    
    assertEquals(pool.getNumIdle(), 2);    
    // returnObject object1    
    pool.returnObject(object1);    
    assertFalse(object1.activated);    
    assertEquals(pool.getNumActive(), 0);    
    assertEquals(pool.getNumIdle(), 3);         
    // destroy the pool    
    pool.destroy();    
    assertTrue(object1.destroyed);    
    assertTrue(object2.destroyed);    
    assertTrue(object3.destroyed);    
}  

Javascript 相关文章推荐
jQuery数据显示插件整合实现代码
Oct 24 Javascript
Node.js开发指南中的简单实例(mysql版)
Sep 17 Javascript
jQuery实现ichat在线客服插件
Dec 29 Javascript
javascript中scrollTop详解
Apr 13 Javascript
使用 bootstrap modal遇到的问题小结
Nov 09 Javascript
关于Vue Webpack2单元测试示例详解
Aug 14 Javascript
JavaScript数组push方法使用注意事项
Oct 30 Javascript
React Native 图片查看组件的方法
Mar 01 Javascript
JQuery选中select组件被选中的值方法
Mar 08 jQuery
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 Javascript
JS常见内存泄漏及解决方案解析
May 30 Javascript
JavaScript实现商品评价五星好评
Nov 30 Javascript
javascript 播放器 控制
Jan 22 #Javascript
JAVASCRIPT HashTable
Jan 22 #Javascript
Maps Javascript
Jan 22 #Javascript
自适应高度框架 ----属个人收藏内容
Jan 22 #Javascript
Opacity.js
Jan 22 #Javascript
html读出文本文件内容
Jan 22 #Javascript
用ADODB.Stream转换
Jan 22 #Javascript
You might like
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
php5.4传引用时报错问题分析
2016/01/22 PHP
PHP 芝麻信用接入的注意事项
2016/12/01 PHP
基于thinkPHP3.2实现微信接入及查询token值的方法
2017/04/18 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
Javascript下IE与Firefox下的差异兼容写法总结
2010/06/18 Javascript
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
用Jquery.load载入页面实现局部刷新
2014/01/22 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
js实时获取并显示当前时间的方法
2015/07/31 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
2016/05/31 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
2017/03/29 Javascript
基于JavaScript实现数码时钟效果
2020/03/30 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
[03:04]DOTA2英雄基础教程 影魔
2013/12/11 DOTA
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
深入理解python中的select模块
2017/04/23 Python
Python实现随机创建电话号码的方法示例
2018/12/07 Python
详解Python self 参数
2019/08/30 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
python+opencv实现移动侦测(帧差法)
2020/03/20 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
大学生毕业自我鉴定范文
2013/09/19 职场文书
英文翻译的自我评价语句
2013/10/04 职场文书
工地门卫岗位职责
2013/12/30 职场文书
设计顾问服务计划书
2014/05/04 职场文书
公司开业庆典策划方案
2014/06/04 职场文书
创业计划书之餐饮
2019/09/02 职场文书