JavaScript链式调用的设计
作者:karry 来源:cssrain 发布时间:2009-12-04 12:46:00
用过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指针(当然,如果你坚持要实现链式方法,也可以用回调函数来实现)。
设计一个简单的支持链式调用的类:
function Dog(name,color){
this.name=name||"";
this.color=color||"";
}
Dog.prototype.setName=function(name){
this.name=name;
return this;
};
Dog.prototype.setColor(color){
this.color=color;
return this;
};
Dog.prototype.yelp(){
alert("我的名字叫:"+this.name+",我的颜色是:"+this.color);
return this;
};
使用方式:
var dog = new Dog();
dog.setName("旺财").setColor("白色").yelp();
取值器你也想支持链式调用?
那就用回调函数来实现,将本来应该返回的值直接传给回调函数,而return仍然返回this指针。接着上面的Dog类写一个方法:
Dog.prototype.getName(callback){
callback.call(this,this.name);
return this;
}
使用方式:
function showName(name){
alert(name);
}
dog.setName("旺财").getName(showName).setColor("白色");
猜你喜欢
- 权限级别划分如下:①、院长和财务科长:不能输入,可以无限制查询、统计;②、副院长:不能输入,可以查询、统计其分管部门的帐务;③、部门领导:不
- 将近两个多月没有敲linux命令,手指头不听话了。该再次温习卖油翁的故事了。曾为oracle如何启动多个实例运行纠结过,不服输心理。当时在一
- 此代码适合你做网站用,普通朋友可以不用理这个东西!ASP:<%dim objXMLHTTP, qq, pwd qq = &
- sql代码如下:CREATE PROCEDURE Proname //使用CREATE PROCED
- 五一在家写的,和大家分享,支持所有浏览器,添加了左侧菜单点击变色效果<!DOCTYPE html PUBLIC "-//W3
- 基本上快被这个问题搞疯了,症状如下症状描述:在ie下(6或7,8没有试过)当出现中英文混排,都采用默认字体时,并使用 li 列表做float
- 作用:用ASP程序将页面中的电话号码生成图片格式。 代码如下:<% Call Com_CreatValidCode
- 去掉html中的table代码 Function OutTable(str) dim a,re&nb
- 有的时候,我们为了保持网页的美观,需要将较长的文字在一定长度时截断。比如我们希望在列表中显示文章标题的前15个字,那么一个这样的标题:“rs
- 当你使用Lumigent log Explorer连接服务器后,选择具体的数据库实例时报错,提示 &nbs
- 农业银行总行1998年以来正式推广了新版网络版综合业务统计信息系统,该系统是基于WindowsNT4.0平台,采用客户/服务器模式,以Mic
- 如何在网页打开时显示“正在加载”之类的信息?代码及说明见下: <% Response.Buffer =
- 模式库在模式库里,我将列出所有电子商务网站需要的模式.以下将罗列出经典常用的模式案例,我也试图让这些模式看起来更有趣味性与实用性。(Yaho
- 刚才要说的是这几天亲身体验了一下ebay的AIR感觉挺不错的,无论从界面,交互,功能上都感觉挺好的。关于topic中的“剑走偏锋”是因为我认
- 栅格就是你对页面版式的规划你日常所见的许多页面都有栅格存在。你可能注意不到,但它确实存在,并且支撑着设计内容,建立整体的架构,引导着页面的元
- 今天在论坛上面看到有些兄弟不知道HTC是什么东西。小生在这里稍微说一下。从5.5版本开始,Internet Explorer(IE)开始支持
- 这里列出了13种实现图片或网页内容 lightbox 效果的方法,大部分是链接到各种lightbox作者的英文页面,里面都有源代码下载。Th
- 你有没有觉得你的CSS样式表文件过于臃肿?其实如果你注意并培养一些比较好的CSS书写习惯,我想你的CSS样式表过于”肥胖”的问题会得到很好的
- 人们很容易忽视图像img标签的alt属性。然而,它的重要性也无法体现出来,它是有利于网页的accessibility and&nb
- 代码如下:USE TestDB declare @conversation uniqueidentifier while exists (s