谈谈angularjs中的异步问题(一)
2015-11-20 00:00
597 查看
摘要: angularJs javaScript 异步
因为上次遇到的那个问题,所以这里我就把angularjs的异步问题刨根问底的查一查
再说angularjs的异步之前,我们先说说关于JavaScript中的异步的问题吧。
我们都知道JavaScript是一个单线程的玩意儿,所谓的单线程,就是你要执行这个代码,就必须等前面的全都搞定了才能轮到你(有一种厕所里就一个坑的感觉有木有),这种模式下,实现起来非常的简单。秩序好!但是当然,显而易见到问题是,这里执行效率很低。所以JavaScript就出现了另一个模式,异步模式!
所谓的异步模式就是每一个任务有一个或者多个回调函数,前一个任务执行完成以后不是执行后一个任务,而是执行回调函数,而后一个任务也不需要等待前一个任务执行完就去执行。
关于异步和同步这里我想大家可能都非常的清楚明白的,我这里也不赘述了,下面简单说下异步模式下编程的四种方法吧:
一、 回调函数
这个是实现异步的最简单的方法
假设有两个函数
f1执行完了以后再去执行f2,这里我们就可以用毁掉函数去解决
具体的使用如下:
所以我们的代码就可以变成:
f1(f2);
采用这种方法我们就把同步的变成了异步的了
回调函数的优点是简单、容易理解和部署,缺点是不利于代码的阅读和维护,各个部分之间高度耦合(Coupling),流程会很混乱,而且每个任务只能指定一个回调函数。
二、 事件监听
另一种思路是采用事件驱动模式。任务的执行不取决于代码的顺序,而取决于某个事件是否发生。
还是以f1和f2为例。首先,为f1绑定一个事件(这里采用的jQuery的写法)。
f1.on('done', f2);
上面这行代码的意思是,当f1发生done事件,就执行f2。然后,对f1进行改写
f1.trigger('done')表示,执行完成后,立即触发done事件,从而开始执行f2
这种方法的优点是比较容易理解,可以绑定多个事件,每个事件可以指定多个回调函数,而且可以"去耦合"(Decoupling),有利于实现模块化。缺点是整个程序都要变成事件驱动型,运行流程会变得很不清晰。
三、 发布/订阅
我们假定,存在一个"信号中心",某个任务执行完成,就向信号中心"发布"(publish)一个信号,其他任务可以向信号中心"订阅"(subscribe)这个信号,从而知道什么时候自己可以开始执行。这就叫做"发布/订阅模式"(publish-subscribe pattern),又称"观察者模式"(observer pattern)
这个模式有多种实现,下面采用的是Ben Alman的Tiny Pub/Sub,这是jQuery的一个插件
首先,f2向"信号中心"jQuery订阅"done"信号。
jQuery.subscribe("done", f2);
然后,f1进行如下改写:
jQuery.publish("done")的意思是,f1执行完成后,向"信号中心"jQuery发布"done"信号,从而引发f2的执行。
此外,f2完成执行后,也可以取消订阅(unsubscribe)。
jQuery.unsubscribe("done", f2);
这种方法的性质与"事件监听"类似,但是明显优于后者。因为我们可以通过查看"消息中心",了解存在多少信号、每个信号有多少订阅者,从而监控程序的运行。
四、 Promises对象(个人比较推荐这个的)
这个是很重要的,后面的angularjs处理异步也是常用的这个方法
简单说,它的思想是,每一个异步任务返回一个Promise对象,该对象有一个then方法,允许指定回调函数。比如,f1的回调函数f2,可以写成:
f1().then(f2);
f1要进行如下改写(这里使用的是jQuery的实现):
这样写的优点在于,回调函数变成了链式写法,程序的流程可以看得很清楚,而且有一整套的配套方法,可以实现许多强大的功能。
比如,指定多个回调函数:
f1().then(f2).then(f3);
再比如,指定发生错误时的回调函数:
f1().then(f2).fail(f3);
而且,它还有一个前面三种方法都没有的好处:如果一个任务已经完成,再添加回调函数,该回调函数会立即执行。所以,你不用担心是否错过了某个事件或信号。这种方法的缺点就是编写和理解,都相对比较难。
在angularjs中promise也是我们常用的处理异步的方法,后面会对angularjs中的异步和处理的方法进行整理归纳。
因为上次遇到的那个问题,所以这里我就把angularjs的异步问题刨根问底的查一查
再说angularjs的异步之前,我们先说说关于JavaScript中的异步的问题吧。
我们都知道JavaScript是一个单线程的玩意儿,所谓的单线程,就是你要执行这个代码,就必须等前面的全都搞定了才能轮到你(有一种厕所里就一个坑的感觉有木有),这种模式下,实现起来非常的简单。秩序好!但是当然,显而易见到问题是,这里执行效率很低。所以JavaScript就出现了另一个模式,异步模式!
所谓的异步模式就是每一个任务有一个或者多个回调函数,前一个任务执行完成以后不是执行后一个任务,而是执行回调函数,而后一个任务也不需要等待前一个任务执行完就去执行。
关于异步和同步这里我想大家可能都非常的清楚明白的,我这里也不赘述了,下面简单说下异步模式下编程的四种方法吧:
一、 回调函数
这个是实现异步的最简单的方法
假设有两个函数
f1(); f2();
f1执行完了以后再去执行f2,这里我们就可以用毁掉函数去解决
具体的使用如下:
function f1(callback){ setTimeout(function () { // f1的任务代码 callback(); }, 1000); }
所以我们的代码就可以变成:
f1(f2);
采用这种方法我们就把同步的变成了异步的了
回调函数的优点是简单、容易理解和部署,缺点是不利于代码的阅读和维护,各个部分之间高度耦合(Coupling),流程会很混乱,而且每个任务只能指定一个回调函数。
二、 事件监听
另一种思路是采用事件驱动模式。任务的执行不取决于代码的顺序,而取决于某个事件是否发生。
还是以f1和f2为例。首先,为f1绑定一个事件(这里采用的jQuery的写法)。
f1.on('done', f2);
上面这行代码的意思是,当f1发生done事件,就执行f2。然后,对f1进行改写
function f1(){ setTimeout(function () { // f1的任务代码 f1.trigger('done'); }, 1000); }
f1.trigger('done')表示,执行完成后,立即触发done事件,从而开始执行f2
这种方法的优点是比较容易理解,可以绑定多个事件,每个事件可以指定多个回调函数,而且可以"去耦合"(Decoupling),有利于实现模块化。缺点是整个程序都要变成事件驱动型,运行流程会变得很不清晰。
三、 发布/订阅
我们假定,存在一个"信号中心",某个任务执行完成,就向信号中心"发布"(publish)一个信号,其他任务可以向信号中心"订阅"(subscribe)这个信号,从而知道什么时候自己可以开始执行。这就叫做"发布/订阅模式"(publish-subscribe pattern),又称"观察者模式"(observer pattern)
这个模式有多种实现,下面采用的是Ben Alman的Tiny Pub/Sub,这是jQuery的一个插件
首先,f2向"信号中心"jQuery订阅"done"信号。
jQuery.subscribe("done", f2);
然后,f1进行如下改写:
function f1(){ setTimeout(function () { // f1的任务代码 jQuery.publish("done"); }, 1000); }
jQuery.publish("done")的意思是,f1执行完成后,向"信号中心"jQuery发布"done"信号,从而引发f2的执行。
此外,f2完成执行后,也可以取消订阅(unsubscribe)。
jQuery.unsubscribe("done", f2);
这种方法的性质与"事件监听"类似,但是明显优于后者。因为我们可以通过查看"消息中心",了解存在多少信号、每个信号有多少订阅者,从而监控程序的运行。
四、 Promises对象(个人比较推荐这个的)
这个是很重要的,后面的angularjs处理异步也是常用的这个方法
简单说,它的思想是,每一个异步任务返回一个Promise对象,该对象有一个then方法,允许指定回调函数。比如,f1的回调函数f2,可以写成:
f1().then(f2);
f1要进行如下改写(这里使用的是jQuery的实现):
function f1(){ var dfd = $.Deferred(); setTimeout(function () { // f1的任务代码 dfd.resolve(); }, 500); return dfd.promise; }
这样写的优点在于,回调函数变成了链式写法,程序的流程可以看得很清楚,而且有一整套的配套方法,可以实现许多强大的功能。
比如,指定多个回调函数:
f1().then(f2).then(f3);
再比如,指定发生错误时的回调函数:
f1().then(f2).fail(f3);
而且,它还有一个前面三种方法都没有的好处:如果一个任务已经完成,再添加回调函数,该回调函数会立即执行。所以,你不用担心是否错过了某个事件或信号。这种方法的缺点就是编写和理解,都相对比较难。
在angularjs中promise也是我们常用的处理异步的方法,后面会对angularjs中的异步和处理的方法进行整理归纳。
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享
- 如何创建对象以及jQuery中创建对象的方式
- IE8开发人员工具教程(二)
- 在flex中执行一个javascript方法的简单方式