JavaScript 中的异步方法行列链-JavaSript-爱易网页

JavaScript 中的异步方法行列链

日期：2014-05-16　浏览次数：20347 次

JavaScript 中的异步方法队列链

在JavaScript 中，方法的链式调用很流行，使用Jquery 的朋友对此一定深有体会。在《javascript设计模式》中对这种方法作了比较详细的描述，实现方法的链式调用，只须让在原型中定义的方法都返回调用这些方法的实例对象的引用即可，看看书中的这段代码：

(function() {
function _$(els) {
this.elements = [];
for (var i = 0, len = els.length; i < len; ++i) {
var element = els[i];
if (typeof element == 'string') {
element = document.getElementById(element);
}
this.elements.push(element);
}
};
_$.prototype = {
each: function(fn) {
for ( var i = 0, len = this.elements.length; i < len; ++i ) {
fn.call(this, this.elements[i]);
}
return this;
},
setStyle: function(prop, val) {
this.each(function(el) {
el.style[prop] = val;
});
return this;
},
show: function() {
var that = this;
this.each(function(el) {
that.setStyle('display', 'block');
});
return this;
},
addEvent: function(type, fn) {
var add = function(el) {
if (window.addEventListener) {
el.addEventListener(type, fn, false);
}
else if (window.attachEvent) {
el.attachEvent('on'+type, fn);
}
};
this.each(function(el) {
add(el);
});
return this;
}
};
window.$ = function() {
return new _$(arguments);
};
})();

可以看到，每个方法都以”return this”结束，这就会将调用方法的对象传递给链上的下一个方法。但是，如果我们要操作的数据是通过异步请求来获得的，如何保持方法的链式调用呢？Dustin Diaz 为我们提供了一种方法来保证方法的链式调用，他也是《JavaScript 设计模式》一书的作者之一。

他首先构建了一个Queue对象,

然后用它作为工具构建我们的异步方法队列链。有了这个工具，就可以很方便的构建一个从服务器端获取内容并将其附加到选择器中的Jquery plugin。

function Queue() {
// store your callbacks
this._methods = [];
// keep a reference to your response
this._response = null;
// all queues start off unflushed
this._flushed = false;
}
Queue.prototype = {
// adds callbacks to your queue
add: function(fn) {
// if the queue had been flushed, return immediately
if (this._flushed) {
fn(this._response);
// otherwise push it on the queue
} else {
this._methods.push(fn);
}
},
flush: function(resp) {
// note: flush only ever happens once
if (this._flushed) {
return;
}
// store your response for subsequent calls after flush()
this._response = resp;
// mark that it's been flushed
this._flushed = true;
// shift 'em out and call 'em back
while (this._methods[0]) {
this._methods.shift()(resp);
}
}
};

这样，我们就可以异步的获取内容，并继续我们的链式调用。

(function($) {
$.fn.fetch = function(url) {
var queue = new Queue;
this.each(function() {
var el = this;
queue.add(function(resp) {
$(el).html(resp);
});
});
$.ajax({
url: url,
dataType: 'html',
success: function(html) {
queue.flush(html);
}
});
return this;
};
})(jQuery);
?

查看demo页看看效果。

如果一个队列中有很多项等待对服务器端的响应进行操作，该如何处置？作者构建了这样一个方法，值得参考：

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

JavaScript 中的异步方法行列链

相关资料更多>

推荐阅读更多>