第三十课:JSDeferred详解1

本课难度非常大,看一遍,蛋会疼,第二遍蛋不舒服,第三遍应该貌似懂了。初学者莫来,没必要,这完全就是一个研究。

JSDeferred是日本高手cho45搞出来的,其易用性远胜于Mochikit Deferred,它的实现形态基本上奠定了后来称为Promise/A的范式,是js在异步编程上的一个里程碑作品。

JSDeferred不像Mochikit Deferred那样用数组保存回调,而是用Deferred对象自身作为载体来保存回调。司徒正美说:看懂这个库的代码,对你的能力提升很大,如是我去看了。

Deferred.define();

next(function(){});

上面代码的意思是:创建一个匿名的Deferred实例,并且绑定一个成功时执行的回调方法。它使用next而不是addCallback来添加回调方法。

当然上面的这种方式,会污染全局作用域,比如:next方法就是在全局作用域下。它还有两种无侵入(不污染全局作用域)的写法:

var o = {};   //定义一个对象

Deferred.define(o);   //把Deferred的方法全部赋到o对象上,因为第一个next方法是Deferred上的静态方法,所以o对象上也有next方法了

o.next(function(){})    //然后就可以调用o对象的next方法添加回调函数。

或者直接使用Deferred:

Deferred.next(function(){})    //它会在内部创建一个Deferred实例,然后调用这个实例的next方法,以及你调用其他的方法时,直接就可以用链式方式进行调用,就跟jQuery的链式操作一样。

上面的这三种方式,无论哪个,第一次调用的next方法,其实是一个静态方法,它的作用是提供一个JSDeferred实例,并执行第一个异步操作。

异步操作在JSDeferred中有很多实现方式,如setTimeout,image.onerror,script.onreadystatechange等,那么当调用第一个next时,它的异步操作是执行那种方式实现的异步操作呢?其实它会根据不同的浏览器,选择在这个浏览器中最快的API来执行。我们先来看一个最简单的实现方式,用setTimeout实现第一个next的异步操作。由于第一个next方法是静态方法,所以它的定义是:第一个next方法就是在Deferred构造函数中的next_default方法(有很多方式来实现它的异步操作,这里我们只讲setTimeout是如何实现的)。

Deferred.next_default = function(fun){

  var d = new Deferred();

  var id = setTimeout(function(){

    clearTimeout(id);

    d.call()

  },0);

  d.canceller = function(){

    try{

      clearTimeout(id);

    }catch(e){}

  };

  if(fun){

    d.callback.on = fun;

  }

  return d;

};

我们来看第一次调用next方法时,它所做的操作。首先,new一个新的Deferred,赋给局部变量d。然后弄一个0秒定时器(它的意思是0秒后执行回调方法,但是由于浏览器有最小时钟间隔,因此这个定时器后面的代码会先执行)。这时,给新建的Deferred对象定义canceller属性,如果有传入fun参数(成功时执行的回调函数),就把这个函数加载到新建的Deferred对象的callback.ok(new 出来的Deferred会默认有callback属性,它的值是一个对象,对象里面有ok,ng属性,这里是重写了它的ok属性值)属性上,返回新建的Deferred对象。最后等过了浏览器的最小时钟间隔后,就会立即执行setTimeout里面的回调方法,代码开始时首先清除这个定时器(这时setTimeout就失效了,但是这里无法阻止回调方法里面的代码执行),然后调用新建的Deferred对象的call方法(此方法就会执行next方法中添加的函数)。

第二个调用的next方法,以及后面调用的next方法都是实例方法,也就是Deferred.prototype原型对象中的方法,因为第一次调用next方法时,执行的是Deferred的静态方法next_default,它会返回一个Deferred的实例对象,所以后面的链式调用next方法,其实调用的都是Deferred实例对象的next方法。因此第二个以及后面的next方法跟第一个next的方法完全不同。举个例子:

Deferred.define();

next(function fun1(){alert(1)}).next(function fun2(){alert(2)});   //第一个next方法是Deferred的静态方法next_default,返回一个new出来的Deferred实例对象,然后调用第二个next方法时,其实就是d.next(function fun2(){ alert(2)}),这时第二个next方法就是Deferred的实例方法(Deferred.prototype对象中的方法)。

alert(3);

上面的结果:3,1,2。因为第一个next中添加的函数,会延迟执行(里面有个定时器),所以3先打印出来。第二个next方法,是实例方法,它会新建一个Deferred对象,把它赋给当前Deferred对象的._next属性,它里面没有定时器。所以2不会弹出,只有等定时器结束,弹出1后,当前的Deferred对象会通过._next属性找到新建的Deferred对象,然后执行它的回调函数,弹出2。

我们来看下Deferred构造函数的源码:

function Deferred(){

  return (this instanceof Deferred) ? this.init() : new Deferred();  //new Deferred时,执行上下文必须是Deferred对象,才能初始化,不然就new一个新的Deferred对象再初始化

}

Deferred.ok = function(x) { return x};

Deferred.ng = function(x) { return x};

Deferred.prototype = {

  init:function(){   //new Deferred时,调用的就是init方法,来对Deferred对象进行初始化

    this._next = null;

    this.callback = {   //new出来的Deferred对象,会有默认的callback属性,它的值是一个json对象,json对象中有ok属性和ng属性,ok属性其实就是成功时,回调的方法,ng是失败时,回调的方法。当你在next方法中添加回调函数时,会覆盖这ok,ng这两个属性值。

      ok:Deferred.ok,

      ng:Deferred.ng

    };

    return this;

  },

  call:function(val){

    return this._fire("ok",val);   //这就是上面的d.call方法,也就是定时器中的回调方法执行时,调用的方法。定时器一结束,就立即执行。call方法,会调用next中添加的函数。

  },

  _fire:function(okng,value){

    var next = "ok";

    try{

      value = this.callback[okng].call(this,value);   //执行next中添加的函数,如果此函数抛出错误,就会执行catch中的代码,上面的例子,其实就是弹出1,不会执行catch中的代码。(这里的意思是,如果这个next中添加的函数抛出错误,那么它之后的那个next中的异步操作会调用ng的函数,也就是失败时执行的函数)

    }catch(e){

      next = "ng";

      value = e;

    }

    if(value instanceof Deferred){   //如果next添加的函数返回值是Deferred对象d1,就把当前Deferred对象的_next属性值赋给d1的next属性。

      value._next = this._next;

    }else{   //如果返回值不是Deferred,就是上面例子的结果

      if(this._next){     //判断当前的Deferred对象是否有._next属性(第二个next方法创建的Deferred实例对象),如果有,就调用它的_fire方法,上面的例子是有的,所以会调用第二个next方法添加的回调函数。

        this._next._fire(next,value);     //如果当前Deferred对象的ok回调函数报错(next="ng"),那么下一个Deferred对象(下一个next新建的Deferred对象)调用的是名为ng的回调函数。而且当前回调函数返回的值可以作为下一个next的回调函数中的参数值。

      }

    }

    return this;

  },

  next:function(fun){    //这就是第二次以及之后调用next的执行方法,是Deferred对象的实例方法,在Deferred的原型上

    return this._post("ok",fun);

  },

  _post:function(okng,fun){    //第二次调用next以及之后调用next,都会返回一个新的Deferred实例对象,而且next中添加的方法,会赋给新创建的Deferred实例对象的callback.ok属性。而且新创建的Deferred实例对象会是当前Deferred对象的._next属性值

    this._next = new Deferred();

    this._next.callback[okng] = fun;

    return this._next;

  },

  error : function(fun){   //next中的回调方法抛出错误时,就会执行下一个error中的回调方法。比如:next(function(){  抛出错误  }).error(function(){ 抛出错误的方法执行后,就会执行这里 })

    return this._post("ng",fun);

  }

}

上面代码最好是放在window.onload中进行执行,因为它的next静态方法(异步操作),如果是用image.onerror实现时,会调用document.body.appendChild(image),如果这时DOM树还没建好,那就会出错。

上面的例子中,我们可以知道,fun1和fun2是同时被添加到执行队列的,也就是说fun1执行完,马上就执行fun2,而如果我们需要延迟执行fun2,就可以这样操作:

Deferred.next(function fun1(){alert(1)}).wait(1000).next(function fun2(){alert(2)});  这样fun2会在fun1执行结束一秒后,才会添加到执行队列进行执行。

观看JSDeferred的源码,Deferred原型对象中没有wait方法,只有一个同名的静态方法,那么它是怎么被加载到Deferred原型上的呢?

wait静态方法是通过register方法进行函数转换,并绑定到原型上的,下一课将进行讲解。

加油!

时间: 2024-10-12 04:51:12

第三十课:JSDeferred详解1的相关文章

C#GDI+基础(三)画刷详解

SolidBrush:一般的画刷,通常只用一种颜色去填充GDI+图形 创建一般画刷: SolidBrush sbBrush1 = new SolidBrush(Color.Green); HatchBrush:阴影画刷,有两种颜色:前景色和背景色创建阴影画刷: HatchBrush(HatchStyle,Color);//前景 HatchBrush(HatchStyle,Color,Color)://前景.背景 HatchStyle对应阴影方案列表. 名称 说明 BackwardDiagonal

【SSH三大框架】Hibernate基础第三篇:实体对象的三种状态以及get、load、persist三个方法的详解

一.Hibernate中实体对象分为三种状态:瞬态.持久.脱管 瞬态(transient):这种状态下的实体对象,数据库中没有数据与之对应,超过作用域会被JVM垃圾回收器回收,一般是new出来的并且与Session没有任何关系的对象. 持久(persistent):数据库中有数据与之对应,当前与Session有关联,并且相关联的Session并没有关闭,事务没有提交.PS:持久对象发生改变的时候,在事务提交的时候会影响到数据库中. 脱管(detached):数据库中有数据与之对应,但当前没有Se

Hibernate系列(三):实体对象的三种状态以及get、load、persist三个方法的详解

一.Hibernate中实体对象分为三种状态:瞬态.持久.脱管 瞬态(transient):这种状态下的实体对象,数据库中没有数据与之对应,超过作用域会被JVM垃圾回收器回收,一般是new出来的并且与Session没有任何关系的对象. 持久(persistent):数据库中有数据与之对应,当前与Session有关联,并且相关联的Session并没有关闭,事务没有提交.PS:持久对象发生改变的时候,在事务提交的时候会影响到数据库中. 脱管(detached):数据库中有数据与之对应,但当前没有Se

“全栈2019”Java第三十章:数组详解(下篇)

难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第三十章:数组详解(下篇) 下一章 "全栈2019"Java第三十一章:二维数组和多维数组详解 学习小组 加入同步学习小组,共同交流与进步. 方式一:关注头条号Gorhaf,私信"Java学习小组". 方式二:关注公众号Gorhaf,回复"Java学习小组&qu

过滤ASCII码中的不可见字符, ASCII三部分, 各控制字符详解

今天产品部同事报告了一个BUG,经过调试发现,由于用户输入的字符串中,包含字符0x1E, 也就是”记录分隔符”(Record Separator, Notepad++ 显示为[RS]),导致JavaScript XML解析遭遇错误.于是就想在字符串中过滤掉这些没多大用途的字符,同时又要保留部分常用的字符,例如换行,回车和水平制表符.于是写了下面一个 PHP 函数: /** * 清理字符串中的部分不可见控制字符 * * @param string $string 待处理字符串 * @return

(十)Maven依赖详解

1.何为依赖? 比如你是个男的,你要生孩子,呸呸呸...男的怎么生孩子,所以你得依赖你老婆,不过也不一定咯,你也可以依赖其她妹子. 我们在平时的项目开发中也是同理,你需要依赖一些东西才能实现相应的功能,但相应的功能或许也可以依赖其它的东西实现,比如数据库操作吧,你可以依赖hibernate,但你也可以通过mybatis来做. 这就是所谓的依赖关系咯. 以前我们需要手动的去找hibernate或者mybatis的jar包,系统抛异常我们还不知哪里报错,通过琢磨才明白没有引入相应的jar包,然后就去

vmware虚拟机三种网络模式详解_转

原文来自http://note.youdao.com/share/web/file.html?id=236896997b6ffbaa8e0d92eacd13abbf&type=note 由于Linux目前很热门,越来越多的人在学习linux,但是买一台服务放家里来学习,实在是很浪费.那么如何解决这个问题?虚拟机软件是很好的选择,常用的虚拟机软件有vmware workstations和virtual box等.在使用虚拟机软件的时候,很多初学者都会遇到很多问题,而vmware的网络连接问题是大家

VMware虚拟机三种网络模式详解

Bridged(桥接模式) 由于Linux目前很热门,越来越多的人在学习Linux,但是买一台服务放家里来学习,实在是很浪费.那么如何解决这个问题?虚拟机软件是很好的选择,常用的虚拟机软件有VMware Workstations和VirtualBox等.在使用虚拟机软件的时候,很多初学者都会遇到很多问题,而VMware的网络连接问题是大家遇到最多问题之一.在学习交流群里面,几乎每天都会有同学问到这些问题,写这篇详解也是因为群里童鞋网络出故障,然后在帮他解决的过程中,对自己的理解也做一个总结.接下

nginx学习三 nginx配置项解析详解及代码实现

nginx配置项解析详解及代码实现 0回顾 在上一节,用nginx简单实现了一个hello world程序:当我们在浏览器中输入lochost/hello ,浏览器就返回:hello world.为什么会这样呢,简单一点说就是当我们请求访问hello这个服务,nginx就会看配置文件中是否有,如果有,根据具体的handler处理后把处理的结果返回给用户,没有就返回not found. location /hello { test_hello ;//无参数的配置 这其实是一个简单的配置.这节我们来

Docker(三):Dockerfile 命令详解

上一篇文章Docker(二):Dockerfile 使用介绍介绍了 Dockerfile 的使用,这篇文章我们来继续了解 Dockerfile ,学习 Dockerfile 各种命令的使用. Dockerfile 指令详解 1 FROM 指定基础镜像 FROM 指令用于指定其后构建新镜像所使用的基础镜像.FROM 指令必是 Dockerfile 文件中的首条命令,启动构建流程后,Docker 将会基于该镜像构建新镜像,FROM 后的命令也会基于这个基础镜像. FROM语法格式为: FROM <i