使用過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;