使用过jQuery框架的读者,都会对jQuery简洁的语法、灵巧的用法赞叹不已,其中一个最大亮点就是jQuery的链式语法。在JavaScript中,很多方法没有返回值,一些设置或修改对象的某个状态却不返回任何值的方法就是典型的例子。如果让这些方法返回this,而不是undefined,那么就要启用级联功能,即所谓的链式语法。在一个级联中,单独一条语句可以连续调用同一个对象的很多方法。
getElement('box').
move(350,150).
width(100).height(100).
color('red').
border('10px outset').
padding('4px').
appendText("使用链式语法")
在上面代码中,getElement函数获取id='box'的DOM元素,然后通过链式语法分别调用DOM元素的扩展方法来移动元素、修改尺寸和样式,以及添加行为。由于每一个扩展方法都返回参数对象,所以调用返回的结果可以为下一次调用所用。链式语法可以产生具备很强表现力的接口,以产生出试图一次做很多事情的接口的趋势。
在下面示例中,分别为String扩展了3个方法:trim、writeln和alert,其中writeln和alert方法返回值都为this,而trim方法返回值为修剪后的字符串。这样用户就可以利用链式语法在一行语句中快速调用这3个方法。
Function.prototype.method=function(name,func){
if(!this.prototype[name]){
this.prototype[name]=func;
return this;
}
};
String.method('trim',function{
return this.replace(/^/s+|/s+$/g,'');
});
String.method('writeln',function{
document.writeln(this);
return this;
});
String.method('alert',function{
window.alert(this);
return this;
});
var str="abc";
str.trim.writeln.alert;