你所必须掌握的三种异步编程方法callbacks,listeners,promise

本文主要是介绍你所必须掌握的三种异步编程方法callbacks,listeners,promise,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录:

前言

Callbacks

Listeners

Promise

前言

coder都知道,javascript语言运行环境是单线程的,这意味着任何两行代码都不能同时运行。多任务同时进行时,实质上形成了一个队列,当队列中前一个事件结束时,才执行下一个事件。 如果队列中任何一个事务费时太长,则会造成浏览器假死,阻塞其他事务正常进行,影响用户体验。

js中将任务执行分为同步模式和异步模式,上面一种即为同步模式,任何比较花时间的代码最好设计成异步模式。通过异步编程方式,即可以达到伪多进程。常见的异步模式主要有callbaks,listeners(一种观察者模式),promise,下面我将会详细描述三者各自的优劣。

Callbacks

这是再常见不过的异步编程方式了,任何前端都写过这样的代码吧:

1
2
3
4
function callback(){
       console.log( 'do callbacks' );
};
setTimeout(callback,300);

通过这种方式,你可以简单的实现异步编程。这里需要注意,这里的300ms只是理想时间,实际中各浏览器略有差异,主要取决于线程中其他任务所用的时间。这个不具体讨论,其中还涉及requestAnimationFrame等。自己可以google。

此方法缺点是什么想必我不说你也知道,如:

复制代码
function fn1(f){alert(1);f();
};
function fn2(f){alert(2);f();
};
function fn3(){alert(3);};fn1(function(){ fn2(fn3); });
复制代码

如果逻辑在复杂一点呢?恐怖看代码的人会一头雾水吧。而promise则可以把这种复杂的嵌套写的一看就明白,下面会讲到。

Listeners

这也是一种常见的异步编程方式,如:

$elem.on('click',doClick);
function doClick(){//do something
};

设计模式中将这种方式称之为命令模式。这种方式的好处是你可以注册多个事件,待事件触发时调用注册的函数。

当然这里不仅仅是这种简单的监听方式,我需要将的是一种更抽象的异步编程方式——listeners。通过观察者模式,我们用一个数组来保存事件名称以及事件绑定的函数方法,当需要触发该事件时,我们从数组中取出之前的注册的函数。而EventProxy就是这种方式实现的,通过on,all注册,emit触发。如:

复制代码
var ep = EventProxy.create("template", "data", "l10n", function (template, data, l10n) {_.template(template, data, l10n);
});$.get("template", function (template) {// somethingep.emit("template", template);
});
$.get("data", function (data) {// somethingep.emit("data", data);
});
$.get("l10n", function (l10n) {// somethingep.emit("l10n", l10n);
});
复制代码

下面我用自己的代码简单的实现这种方式

View Code

这种模式在于跨模块异步编程中显得尤为重要。具体的实现逻辑刚才已经讲过,就不具体展开,看代码注释即可。

Promise

最后一种方法隆重登场,也是现在讨论最多的异步编程方式。

代码其实是现实的归纳总结并以另外一种方式展现,我们有时候看不懂,是因为写代码方式跟现实有差异。假如代码逻辑这么写:

复制代码
img1.callThisIfLoadedOrWhenLoaded(function() {// 加载完成
}).orIfFailedCallThis(function() {// 加载失败
});
// 以及……
whenAllTheseHaveLoaded([img1, img2]).callThis(function(){
    // 全部加载完成
}).orIfSomeFailedCallThis(function(){
    // 一个或多个加载失败
});
复制代码

我相信非程序员也能看懂吧。这就是我们要介绍的Promise异步编程方法。现有一些插件库Q.js,  when.js  ,wind.js  ,rsvp.js都是类似实现的,遵守一个通用的、标准化的规范:Promises/A+,jQuery 有个类似的方法叫 Deferred,但不兼容 Promises/A+ 规范,于是会有点小问题,使用需谨慎。jQuery 还有一个 Promise 类型,它其实是 Deferred 的缩减版,所以也有同样问题。jQuery相关的后续我会分章节逐一讲述,这里不做展开。

Promise异步编程总结起来就是实现了thenable,说的更直白的一点就是我跟你是好朋友,我可能有事需要你帮忙,你随时候着吧,有需要我会第一时间通知你。你跟小王也是好哥们,并同样告诉你需要他帮忙,并第一时间通知他。当然你通知他是在我通知你以后。用伪代码表示:

复制代码
myself(function(){callXiaoLi();}).then(function(){//我是小李,你喊我了,我就去喊小王
         callXiaowang();}).then(function(){ console.log('我是小王');  });
复制代码

同样,下面我们会用简单的代码实现以上逻辑。

View Code

then实现比较绕,需要解释一下,如:.then(xx).then()

每次.then时会生成一个新的promise对象, 就是说后一个then是注册给上一个promise对象的,其出发条件依赖于上一个.then时生成的promise。

如果上一个.then 最后返回结果是非promise对象(即没有then方法),则直接 resolve

如果上一个.then最后返回的结果是promise对象,那.then生成的promise必须依赖返回结果中的promise,及内层的 promise.then( ".then时生成的promise".resolve)

可能我这么解释还是没能解释很清楚,自己去理解吧。

另外,谷歌浏览器已经实现了Promise API。我使用的式chrome 版本 31.0.1650.63。不行你可以在控制台输入以下代码测试:

复制代码
var p = new Promise(function(resolve,reject){    setTimeout(resolve,100);setTimeout(reject,300); 
}); 
p.then(function(){ alert('resolve'); 
},function(){ alert('reject');});
复制代码

好了,异步编程的方式就讲这么多,我这里只不过是抛砖引玉,并没有详细阐述其api,而是以自己的代码简单实现其原来。这些异步编程方式不仅仅限于浏览器环境,服务器环境如nodejs也可使用。比如EventProxy本来就是在nodejs中发展而来的。

希望通过我的简单讲述能给大家提供帮忙。如果有错,请帮忙指出,谢谢。

 参考:

1.http://www.html5rocks.com/en/tutorials/es6/promises/

2.http://sporto.github.io/blog/2012/12/09/callbacks-listeners-promises/

3.http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html

4.http://javascript.info/tutorial/events-and-timing-depth

这篇关于你所必须掌握的三种异步编程方法callbacks,listeners,promise的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1133944

相关文章

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)

Java中Switch Case多个条件处理方法举例

《Java中SwitchCase多个条件处理方法举例》Java中switch语句用于根据变量值执行不同代码块,适用于多个条件的处理,:本文主要介绍Java中SwitchCase多个条件处理的相... 目录前言基本语法处理多个条件示例1:合并相同代码的多个case示例2:通过字符串合并多个case进阶用法使用

Redis消息队列实现异步秒杀功能

《Redis消息队列实现异步秒杀功能》在高并发场景下,为了提高秒杀业务的性能,可将部分工作交给Redis处理,并通过异步方式执行,Redis提供了多种数据结构来实现消息队列,总结三种,本文详细介绍Re... 目录1 Redis消息队列1.1 List 结构1.2 Pub/Sub 模式1.3 Stream 结

Python中__init__方法使用的深度解析

《Python中__init__方法使用的深度解析》在Python的面向对象编程(OOP)体系中,__init__方法如同建造房屋时的奠基仪式——它定义了对象诞生时的初始状态,下面我们就来深入了解下_... 目录一、__init__的基因图谱二、初始化过程的魔法时刻继承链中的初始化顺序self参数的奥秘默认

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

Spring 基于XML配置 bean管理 Bean-IOC的方法

《Spring基于XML配置bean管理Bean-IOC的方法》:本文主要介绍Spring基于XML配置bean管理Bean-IOC的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一... 目录一. spring学习的核心内容二. 基于 XML 配置 bean1. 通过类型来获取 bean2. 通过

使用Python实现一个优雅的异步定时器

《使用Python实现一个优雅的异步定时器》在Python中实现定时器功能是一个常见需求,尤其是在需要周期性执行任务的场景下,本文给大家介绍了基于asyncio和threading模块,可扩展的异步定... 目录需求背景代码1. 单例事件循环的实现2. 事件循环的运行与关闭3. 定时器核心逻辑4. 启动与停

基于Python实现读取嵌套压缩包下文件的方法

《基于Python实现读取嵌套压缩包下文件的方法》工作中遇到的问题,需要用Python实现嵌套压缩包下文件读取,本文给大家介绍了详细的解决方法,并有相关的代码示例供大家参考,需要的朋友可以参考下... 目录思路完整代码代码优化思路打开外层zip压缩包并遍历文件:使用with zipfile.ZipFil

Python处理函数调用超时的四种方法

《Python处理函数调用超时的四种方法》在实际开发过程中,我们可能会遇到一些场景,需要对函数的执行时间进行限制,例如,当一个函数执行时间过长时,可能会导致程序卡顿、资源占用过高,因此,在某些情况下,... 目录前言func-timeout1. 安装 func-timeout2. 基本用法自定义进程subp

Python列表去重的4种核心方法与实战指南详解

《Python列表去重的4种核心方法与实战指南详解》在Python开发中,处理列表数据时经常需要去除重复元素,本文将详细介绍4种最实用的列表去重方法,有需要的小伙伴可以根据自己的需要进行选择... 目录方法1:集合(set)去重法(最快速)方法2:顺序遍历法(保持顺序)方法3:副本删除法(原地修改)方法4: