JavaScript 异步方法队列链实现代码分析
发布时间:2024-04-22 13:26:14
标签:异步方法,队列链
在《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对象,即:
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);
}
}
};
然后用它作为工具构建我们的异步方法队列链。有了这个工具,就可以很方便的构建一个从服务器端获取内容并将其附加到选择器中的jQuery plugin。
(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);
这样,我们就可以异步的获取内容,并继续我们的链式调用。
$("<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);
不知你作如何感想?
0
投稿
猜你喜欢
- one: declare @s varchar(20) declare @i varchar(20) set @i='' s
- 1. 字符编码简介1.1. ASCIIASCII(American Standard Code for Information Interc
- 一. 字符串生活中我们经常坐大巴车,每个座位一个编号,一个位置对应一个下标。 字符串中也有下标,要取出字符串中的部分数据,可以用下标取。py
- pandas是什么?是它吗?。。。。很显然pandas没有这个家伙那么可爱。。。。我们来看看pandas的官网是怎么来定义自己的:panda
- 1. 使用 easy_installeasy_install 这应该是最古老的包安装方式了,目前基本没有人使用了。下面是 easy_inst
- CentOS7默认数据库是mariadb, 但是 好多用的都是mysql ,但是CentOS7的yum源中默认好像是没有mysql的。上一篇
- 在外部程序访问数据库时(例如 PHP),要组织很多 SQL 语句。 特别是业务逻辑复杂的时候,一大堆的 SQL 和条件夹杂在 PHP 代码中
- 1.什么是labelpandas处理数据时,我们会经常看到dataframe结构使用loc, iloc, ix等方法。那么这些方法到底有啥区
- 概述最近在跑一篇图像修复论文的代码,配置好环境之后开始运行,发现数据一直加载不进去。害,还是得看人家代码咋写的,一句一句看逻辑,准能找出问题
- 这篇文章主要介绍了python误差棒图errorbar()函数实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学
- 概述很多人接触Python,都是从爬虫开始,其实很多语言都可以做爬虫,只是Python相对其他语言来说,更加简单而已。但是Python并不止
- 对文本类文件(*.txt;*.html;*.doc;等等),图片类文件(*.jpg;*.gif等等)直接点击链接时会在浏览器打开,而无法出现
- 目录楔子上传模块至pypi编写模块编译上传楔子我们在安装第三方包的时候,直接一个pip install xxx命令就搞定了,然后pip会去p
- 本文实例为大家分享了python实现学生信息管理系统的具体代码,含代码注释、增删改查、排序、统计显示学生信息,供大家参考,具体内容如下运行如
- gob是Golang包自带的一个数据结构序列化的编码/解码工具。编码使用Encoder,解码使用Decoder。一种典型的应用场景就是RPC
- 1.进入mysql/bin目录下输入mysqladmin processlist; 2.启动mysql,输入show processlist
- 1、创建存储过程 create or replace procedure test(var_name_1 in type,var_name_
- 在Python 2.7中,一个float的repr返回最接近十七位数的十进制数;这足以精确地识别每个可能的IEEE浮点值.浮点数的str类似
- 在本章中,我们将详细讨论对称和非对称密码术.对称密码术在此类型中,加密和解密进程使用相同的密钥.它也被称为秘密密钥加密.对称加密的主要特征如
- 我们知道在超级链接的title属性中,是不支持html代码的,我们只能使用文本来处理提示信息。当然借助js可以做出很好的效果。这里讲一下如何