一页面多XMLHttpRequest对象
所属分类:
网络编程 / JavaScript
阅读数:
1902
收藏 0赞 0分享
刚在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);
}
ES6中Array.find()和findIndex()函数的用法详解
ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined,而findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。下面通过实例详解,需要的朋友参考下吧
收藏 0赞 0分享
JS闭包的几种常见形式实例详解
本文通过实例代码给大家详细介绍了js闭包的几种常见形式,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下
收藏 0赞 0分享
Javascript 严格模式use strict详解
严格模式:由ECMA-262规范定义的JavaScript标准,对javascrip的限制更强。这篇文章主要介绍了Javascript 严格模式use strict详解 ,需要的朋友可以参考下
收藏 0赞 0分享
引入JavaScript时alert弹出框显示中文乱码问题
今天在HTML中引入JavaScript文件运行时,alert弹出的提示框中文显示为乱码,怎么解决此问题呢?下面小编给大家带来了引入JavaScript时alert弹出框显示中文乱码问题的解决方法,一起看看吧
收藏 0赞 0分享
Angularjs自定义指令实现分页插件(DEMO)
由于最近的一个项目使用的是angularjs1.0的版本,涉及到分页查询数据的功能,后来自己就用自定义指令实现了该功能,下面小编把实例demo分享到脚本之家平台,需要的朋友参考下
收藏 0赞 0分享
查看更多