对ajax的hack的分析

先上原文链接:对jQuery ajax请求成功(失败)回调执行前的统一处理(兼容较老版本jQuery)

原文中已经提到了使用场景了,我觉得这非常适合单页面应用,还有backbone应用中。毕竟ajax回调成功了之后,不代表得到了正确的数据,比如没有登录,或者登录超时,这个时候应该跳转到登录页面。这种集中处理避免了在每个地方都要添加判断。

原文中主要有两处hack,一个是success回调;另一个是done回调;

对于success的hack我理解起来还比较轻松:

  1. 提供一个默认的success空函数。
  2. 如果有提供success回调,则覆盖那个空函数,也就是临时保存真正的回调函数。
  3. 利用$.extend方法覆盖opt中的success函数,在这个函数中首先做条件判断,其实就是自己的业务逻辑代码。在这里我们有控制权决定是否调用真实的success回调函数。
  4. 总结起来就是利用一个新的success函数代替真实的success函数,而新的success函数里面又会调用真实的success函数。

对于done的hack我一开始理解起来很吃力,感觉摸不着北。后来才想通了,这里其实最后hack的目标并不是done本身这个函数,而是hack了done的参数,也就是done的回调函数。

  1. 保存真实的done方法。
  2. 重新定义done函数,但是在这个函数中只有一行代码最重要:done.call(def, _done);
  3. 可以发现虽然我们重新定义了done方法,但是实际上内部代码只是简单的调用一下真实的done方法,只不过传递了一个函数参数_done
  4. 这个函数参数_done就变成了我们最终的回调函数了。其内部会调用到实际提供的回调函数func
  5. 内部还有我们的业务代码,这样我们就有控制权决定是否调用真实的回调函数func
  6. 一开始我就理解错了,我以为我们hack的目标是done函数,我们的业务代码也应该是写在新定义的done函数中,但是发现代码不是这样我就蒙圈里。
  7. 后来才明白实际hack的目标应该是回调函数本身,就像success一样。

下面附上我对setTimeout函数的hack代码:

var realTimeout = window.setTimeout;
window.setTimeout = function(func, time) {
  console.log("timeout start");
  realTimeout(func, time);
  console.log("timeout end"); //这个地方不知道怎么处理了?
}

你可能感兴趣的:(Ajax)