手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表2009年08月4日的文章

JavaScript链式调用的设计

链式调用,在PHP中使用的时候往往被人称作:连贯操作。

如果经常用ZF的人,会在Select类中很明显的看到这一点。目前连贯操作已经几乎被各大框架所引用(无非是以前不返回值,现在返回$this。哈哈)

以下是cssrain网站联盟中的karryplaygoogle)写的JS的连贯操作(链式调用),其实在jQuery中,这样的操作太常见了。

以下为全文内容:

 用过jQuery的朋友一定对jQuery中方法的链式调用印象深刻,最近发布的YUI3也支持了方法的链式调用。这是一个非常不错的语法特性, 能让代码更加简洁、易读。很多时候链式调用可以避免多次重复使用一个对象变量,从而减少代码,而js是一种客户端执行的脚本语言,减少代码就减少了js文 件的大小,减少了服务器的压力。链式调用这么多优点,它是如何实现的呢?这篇文章就是想探讨一下这个问题。

链式调用例子如:$("p").append("test").fadeIn("fast");

看一段jQuery的源码:

append: function() {
        return this.domManip(arguments, true, function(elem){
            if (this.nodeType == 1)
                this.appendChild( elem );
        });
    }

以上是jQuery中append方法的实现。append方法是向每个匹配的元素内部追加内容的方法,很明显,属于赋值操作,但是却有返回值,返回的是当前操作的dom(通常返回this指针)。这是链式调用的关键,你会发现这不过是个语法小技巧而已。

很明显,在赋值器方法中(或者本身没有返回值的方法中)很容易实现链式调用,而取值器相对来说不好实现链式调用,因为你需要取值器返回你需要的数据而不是this指针(当然,如果你坚持要实现链式方法,也可以用回调函数来实现)。

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

JavaScript代码
  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. };  

使用方式:

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

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

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

使用方式:

JavaScript代码
  1. function showName(name){  
  2.         alert(name);  
  3. }  
  4. dog.setName("旺财").getName(showName).setColor("白色");  

Tags: 链式, 连贯操作

最近一些琐事杂记

有些事情能够让人怀念,有些事总带着些许遗憾,有些小事 或许能带来快乐。
所以,偶尔记一下,也能够把心情传递出来

1、魔方
    买了一个魔方,还是那种质量不错的,可惜,N年不玩,只能玩出一层来。当然以前读书的时候也没有把整个六面都玩出来,证明本人智商还是有限。傻笑

2、生日
    忘记了一个兄弟的生日,直到人家电话过来邀请吃饭才想起,却又没空。唉。下次回请吧。遗憾

3、吃饭
    小东西吃饭现在会挑食了,对于那些胡萝卜面之类的不再有太大兴趣,非要吃和我们一样的东西。看来是看大了。欣慰

4、爸爸
    爸爸,这是小家伙唯一能够正确、准确、清晰的发音,其他的发音都仍然模糊,老婆很郁闷,随便怎么让他叫,都是叫爸爸。狂笑

5、相册
    picasaweb相册的图片都显示不了了。实在让人心烦。郁闷

6、手机
    G1观望中,又有人在做小白鼠了。等她用几天问问感受,我再考虑。目前想买的原因有:1.与google服务整合2.linux系统3.可以装amp服务4.也属于多点触摸5.可能开发起来会比较方便6.键盘空间大。缺点当然也有:不能聊天、不能看股票、软件肯定没有WM,SB系统上多,滑盖容易松动。但不失为一个不错的手机。偷笑

最近可能会发生的事。
1、水月小孩应该快生了吧
2、未来同事本周应该可以跳槽结束来我们单位了吧
3、国庆前要经常加班了吧
乱猜测一下。呵呵