注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

①嗰亽挺ぬ

莈亽噯,僦洎巳噯洎巳

 
 
 

日志

 
 
 
 

Js的callback机制使用总结  

2013-08-05 23:57:00|  分类: web开发~js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

Ps:最近为了面试,看了些东西,把一些东西整理了一下,贴出来分享,也希望大家提提意见吧

***************************

Js中的callback机制,即回调,可以这么形象的来理解,一个button存在这里,我们可以add一个action,那么如果这个button被触发的时候会调用这个action。这其实就是一个callback机制。button像一个事件监听器,也是一个事件源;而action则是一个动作。

总结到js在如下几个地方常常用到:

1、动态加载(外部)js的时候,在加载完成之后进行一些操作,可以使用callback,拓展阅读:如何判断脚本加载完成Javascript Callback的两种实现方案

2、类似的,在加载iframe时也可以通过callback执行一些操作,拓展阅读:判断 iframe 是否加载完成的完美方法

3ajax的使用,提交请求后得到的返回值用callback机制解析使用,貌似现在大部分框架都是用得这种方式。

3、链式调用的时候,在赋值器方法中(或者本身没有返回值的方法中)很容易实现链式调用,而取值器相对来说不好实现链式调用,因为你需要取值器返回你需要的数据而不是this指针,如果要实现链式方法,可以用回调函数来实现,大家可以看看文章后面举的例子

4settimeoutsetInterval的函数调用得到其返回值,由于两个函数都是异步的,即:他们的调用时序和程序的主流程是相对独立的,所以没有办法在主体里面等待它们的返回值,它们被打开的时候程序也不会停下来等待,否则也就失去了setTimeoutsetInterval的意义了,所以用return已经没有意义,只能使用callback

5settimeout的延迟时间为0,这个hack经常被用到,settimeout调用的函数其实就是一个callback的体现,至于想了解settimeout的这个hack,大家有兴趣可以看看realazy的文章:认识延迟时间为setTimeout

6、事件处理中经常需要用到callback机制,这个在前面的例子中(button)其实已经有所体现。

7、其他一些需要在处理后进行一些额外处理的(这个比较泛,O(_)O~

这些是我作的一个小小的总结,欢迎大家提意见和更多的想法!

 

附:设计一个简单的支持链式调用的类:

Js代码  收藏代码
  1. function Dog(name,color){  
  2.               this.name=name||"";  
  3.              this.color=color||"";  
  4. }  
  5. Dog.prototype.setName=function(name){  
  6.         this.name=name;  
  7.         return this;  
  8. };  
  9. Dog.prototype.setColor(color){  
  10.         this.color=color;  
  11.         return this;  
  12. };  
  13. Dog.prototype.yelp(){  
  14.         alert("我的名字叫:"+this.name+",我的颜色是:"+this.color);  
  15.         return this;  
  16. };  
 

使用方式:

Js代码  收藏代码
  1. var dog = new Dog();  
  2. dog.setName("旺财").setColor("白色").yelp();  
 

如果取值器你也想支持链式调用?那么就采用回调函数来实现,将本来应该返回的值直接传给回调函数,而return仍然返回this指针。接着上面的Dog类写一个方法:

Js代码  收藏代码
  1. Dog.prototype.getName(callback){  
  2.      callback.call(this,this.name);  
  3.         return this;  
  4. }  
 

使用方式:

Js代码  收藏代码
  1. function showName(name){  
  2.         alert(name);  
  3. }  
  4. dog.setName("旺财").getName(showName).setColor("白色");  
  评论这张
 
阅读(12)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017