JavaScript 异步方法队列链实现代码分析

$(el).html(resp);
});
});
$.ajax({
url: url,
dataType: 'html',
success: function(html) {
queue.flush(html);
}
});
return this;
};
})(jQuery);

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

$("<div/>")
.fetch('/server/navigation.html')
.addClass('column')
.appendTo('#side');

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

function fetchTweet(url) {
this.queue = new Queue;
this.tweet = "";
var self = this;
ajax(url, function(resp) {
self.tweet = resp;
self.queue.flush(this);
});
}
fetchTweet.prototype = {
linkify: function() {
this.queue.add(function(self) {
self.tweet = self.tweet.replace(/b@(w{1,20}b/g, '$1');
});
return this;
},
filterBadWords: function() {
this.queue.add(function(self) {
self.tweet = self.tweet.replace(/b(fuck|shit|piss)b/g, "");
});
return this;
},
appendTo: function(selector) {
this.queue.add(function(self) {
$(self.tweet).appendTo(selector);
});
return this;
}
};

这样，我们就可以用下面的方式来调用：

fetchTweet(url).linkify().filterBadWords().appendTo('#status');

到此，我们已经知道了如何实现异步方法链式调用，但在《Asynchronous method queue chaining in JavaScript》底部的一些评论提出的一些问题，值得思考一下。插件$.fn.fetch中仅仅只需将返回的内容附加到元素之中，Queue是否必要？而且，jQuery中的$.fn.load完全可以实现，如果Queue中只用一个回调函数，完全可以这样来写：
(function($) {
$.fn.fetch = function(url) {
var queue = new Queue;
this.each(function() {
var el = this;
$.ajax({
url: url,
type: 'get',
dataType: 'json',
success: function(resp) {
$(el).html(resp['text1']);
}
});
});
return this;
};
})(jQuery);

不知你作如何感想？