jQuery鏈式操作如何實現以及為什么要用鏈式操作
2024-05-06 14:19:53
供稿：網友
兩個問題
1.jQuery的鏈式操作是如何實現的？
2.為什么要用鏈式操作？
大家認為這兩個問題哪個好回答一點呢？
鏈式操作
原理相信百度一下一大把，實際上鏈式操作僅僅是通過對象上的方法最后
return this
把對象再返回回來，對象當然可以繼續調用方法啦，所以就可以鏈式操作了。那么，簡單實現一個：
代碼如下:
//定義一個JS類
function Demo() {
}
//擴展它的prototype
Demo.prototype ={
setName:function (name) {
this.name = name;
return this;
},
getName:function () {
return this.name;
},
setAge:function (age) {
this.age = age;
return this;
}
};
////工廠函數
function D() {
return new Demo();
}
//去實現可鏈式的調用
D().setName("CJ").setAge(18).setName();
但……為什么要用呢？
一般的解釋：
節省代碼量，代碼看起來更優雅。
例如如果沒有鏈式，那么你可能需要這樣寫代碼：
代碼如下:
document.getElementById("ele").dosomething();
document.getElementById("ele").dootherthing();
這個代碼中調用了兩次document.getElementById來獲取DOM樹的元素，這樣消耗比較大，而且要寫兩行，而鏈式只要寫一行，節省了代碼……
但我們也可以用緩存元素啊。比如：
代碼如下:
var ele = document.getElementById("ele");
ele.dosomething();
ele.dootherthing();
而且兩行并沒有比一行多多少代碼，甚至相應的封裝反而使得代碼更多了。
最糟糕的是所有對象的方法返回的都是對象本身，也就是說沒有返回值，這不一定在任何環境下都適合。
舉個例子，我們想弄一個超大整數BigInteger（意思是如果用Javascript的Number保存可能會溢出的整數），順便擴展他的運算方法，會適合用鏈式操作么？
例如運算31415926535 * 4 - 271828182，如果設計成鏈式風格的方法可能會是這樣的：
代碼如下:
var result = (new BigInteger("31415926535")).multiply(new BigInteger("4")).subtract(new BigInteger("271828182")).val();
console.log("result == " + result);
這看起來似乎也很優雅，但是如果我們想要中間的結果怎么辦呢？或許會寫成這樣：
代碼如下:
var bigInteger = new BigInteger("31415926535");
var result1 = bigInteger.multiply(new BigInteger("4")).val();
var result2 = bigInteger.subtract(new BigInteger("271828182")).val();
console.log("result1 == " + result1 + ", result2 == " + result2);
這似乎一點也不優雅了，和不用鏈式操作沒啥不同嘛！
那么如果要求是原來的BigInteger不能改變呢？好吧，鏈式操作似乎不能滿足這個需求了。
那么到底為什么要用鏈式操作呢？
為了更好的異步體驗
Javascript是無阻塞語言，所以他不是沒阻塞，而是不能阻塞，所以他需要通過事件來驅動，異步來完成一些本需要阻塞進程的操作。
