jquery链式写法 java_jQuery链式操作
兩個問題
1.jQuery的鏈?zhǔn)讲僮魇侨绾螌?shí)現(xiàn)的？
2.為什么要用鏈?zhǔn)讲僮?#xff1f;
大家認(rèn)為這兩個問題哪個好回答一點(diǎn)呢？
鏈?zhǔn)讲僮?/p>
原理相信百度一下一大把，實(shí)際上鏈?zhǔn)讲僮鲀H僅是通過對象上的方法最后
return this
把對象再返回回來，對象當(dāng)然可以繼續(xù)調(diào)用方法啦，所以就可以鏈?zhǔn)讲僮髁恕Ｄ敲?#xff0c;簡單實(shí)現(xiàn)一個：
//定義一個JS類
functionDemo() {
}//擴(kuò)展它的prototype
Demo.prototype ={
setName:function(name) {this.name = name;return this;
},
getName:function() {return this.name;
},
setAge:function(age) {this.age = age;return this;
}
};工廠函數(shù)
functionD() {return newDemo();
}//去實(shí)現(xiàn)可鏈?zhǔn)降恼{(diào)用
D().setName("CJ").setAge(18).setName();
但……為什么要用呢？
一般的解釋：
節(jié)省代碼量，代碼看起來更優(yōu)雅。
例如如果沒有鏈?zhǔn)?#xff0c;那么你可能需要這樣寫代碼：
document.getElementById("ele").dosomething();
document.getElementById("ele").dootherthing();
這個代碼中調(diào)用了兩次document.getElementById來獲取DOM樹的元素，這樣消耗比較大，而且要寫兩行，而鏈?zhǔn)街灰獙懸恍?#xff0c;節(jié)省了代碼……
但我們也可以用緩存元素啊。比如：
var ele = document.getElementById("ele");
ele.dosomething();
ele.dootherthing();
而且兩行并沒有比一行多多少代碼，甚至相應(yīng)的封裝反而使得代碼更多了。
最糟糕的是所有對象的方法返回的都是對象本身，也就是說沒有返回值，這不一定在任何環(huán)境下都適合。
舉個例子，我們想弄一個超大整數(shù)BigInteger(意思是如果用Javascript的Number保存可能會溢出的整數(shù))，順便擴(kuò)展他的運(yùn)算方法，會適合用鏈?zhǔn)讲僮髅?#xff1f;
例如運(yùn)算31415926535 * 4 -?271828182，如果設(shè)計(jì)成鏈?zhǔn)斤L(fēng)格的方法可能會是這樣的：
var result = (new BigInteger("31415926535")).multiply(new BigInteger("4")).subtract(new BigInteger("271828182")).val();
console.log("result == " + result);
這看起來似乎也很優(yōu)雅，但是如果我們想要中間的結(jié)果怎么辦呢？或許會寫成這樣：
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);
這似乎一點(diǎn)也不優(yōu)雅了，和不用鏈?zhǔn)讲僮鳑]啥不同嘛！
那么如果要求是原來的BigInteger不能改變呢？好吧，鏈?zhǔn)讲僮魉坪醪荒軡M足這個需求了。
jQuery專注于DOM對象操作，而DOM的操作會在頁面上體現(xiàn)，不需要在Javascript中通過返回值來表示，但計(jì)算操作卻不一樣，我們很可能需要通過Javascript返回中間過程值另作他用。
在設(shè)計(jì)的時候，我們需要考慮鏈?zhǔn)綆淼暮锰幒蛪奶?#xff0c;因?yàn)閯e人用了鏈?zhǔn)?#xff0c;所以就用鏈?zhǔn)?#xff0c;可能并不是一個很好的方案。
那么到底為什么要用鏈?zhǔn)讲僮髂?#xff1f;
為了更好的異步體驗(yàn)
Javascript是無阻塞語言，所以他不是沒阻塞，而是不能阻塞，所以他需要通過事件來驅(qū)動，異步來完成一些本需要阻塞進(jìn)程的操作。
但是異步編程是一種令人瘋狂的東西……運(yùn)行時候是分離的倒不要緊，但是編寫代碼時候也是分離的就……
常見的異步編程模型有哪些呢？
回調(diào)函數(shù)
所謂的回調(diào)函數(shù)，意指先在系統(tǒng)的某個地方對函數(shù)進(jìn)行注冊，讓系統(tǒng)知道這個函數(shù)的存在，然后在以后，當(dāng)某個事件發(fā)生時，再調(diào)用這個函數(shù)對事件進(jìn)行響應(yīng)。
functionf(num, callback){if(num<0) {
alert("調(diào)用低層函數(shù)處理!");
alert("分?jǐn)?shù)不能為負(fù),輸入錯誤!");
}else if(num==0){
alert("調(diào)用低層函數(shù)處理!");
alert("該學(xué)生可能未參加考試！");
}else{
alert("調(diào)用高層函數(shù)處理!");
setTimeout(function(){callback();}, 1000);
}
}
這里callback則是回調(diào)函數(shù)。可以發(fā)現(xiàn)只有當(dāng)num為非負(fù)數(shù)時候callback才會調(diào)用。
但是問題，如果我們不看函數(shù)內(nèi)部，我們并不知道callback會幾時調(diào)用，在什么情況下調(diào)用，代碼間產(chǎn)生了一定耦合，流程上也會產(chǎn)生一定的混亂。
雖然回調(diào)函數(shù)是一種簡單而易于部署的實(shí)現(xiàn)異步的方法，但從編程體驗(yàn)來說它卻不夠好。
事件監(jiān)聽
也就是采用事件驅(qū)動，執(zhí)行順序取決于事件順序。
functionEventTarget(){this.handlers ={};
}
EventTarget.prototype={
constructor: EventTarget,
addHandler:function(type, handler){this.handlers[type] =[];
},
fire:function(){if(!event.target){
event.target= this;
}if(this.handlers[event.type instanceofArray]){var handlers = this.handlers[event.type];for(var i = 0, len = handlers.length, i < len; i++){
handlers[i](event);
}
}
},
removeHandler:function(type, handler){if(this.handlers[type] instanceofArray){var handlers = this.handlers[type];for(var i = 0, le = handlers.length; i < len; i++){if(handlers[i] ===handler){break;
}
}
handlers.splice(i,1);
}
}
};
上面是《JavaScript高級程序設(shè)計(jì)》中的自定義事件實(shí)現(xiàn)。于是我們就可以通過addHandler來綁定事件處理函數(shù)，用fire來觸發(fā)事件，用removeHandler來刪除事件處理函數(shù)。
雖然通過事件解耦了，但流程順序更加混亂了。
鏈?zhǔn)疆惒?/p>
個人覺得鏈?zhǔn)讲僮髯钪档梅Q贊的還是其解決了異步編程模型的執(zhí)行流程不清晰的問題。jQuery中$(document).ready就非常好的闡釋了這一理念。DOMCotentLoaded是一個事件，在DOM并未加載前，jQuery的大部分操作都不會奏效，但jQuery的設(shè)計(jì)者并沒有把他當(dāng)成事件一樣來處理，而是轉(zhuǎn)成一種“選其對象，對其操作”的思路。$選擇了document對象，ready是其方法進(jìn)行操作。這樣子流程問題就非常清晰了，在鏈條越后位置的方法就越后執(zhí)行。
(function(){var isReady=false; //判斷onDOMReady方法是否已經(jīng)被執(zhí)行過
var readyList= [];//把需要執(zhí)行的方法先暫存在這個數(shù)組里
var timer;//定時器句柄
ready=function(fn) {if(isReady )
fn.call( document);elsereadyList.push(function() { return fn.call(this);});return this;
}var onDOMReady=function(){for(var i=0;i
readyList[i].apply(document);
}
readyList= null;
}var bindReady = function(evt){if(isReady) return;
isReady=true;
onDOMReady.call(window);if(document.removeEventListener){
document.removeEventListener("DOMContentLoaded", bindReady, false);
}else if(document.attachEvent){
document.detachEvent("onreadystatechange", bindReady);if(window ==window.top){
clearInterval(timer);
timer= null;
}
}
};if(document.addEventListener){
document.addEventListener("DOMContentLoaded", bindReady, false);
}else if(document.attachEvent){
document.attachEvent("onreadystatechange", function(){if((/loaded|complete/).test(document.readyState))
bindReady();
});if(window ==window.top){
timer= setInterval(function(){try{
isReady||document.documentElement.doScroll('left');//在IE下用能否執(zhí)行doScroll判斷dom是否加載完畢
}catch(e){return;
}
bindReady();
},5);
}
}
})();
上面的代碼不能用$(document).ready，而應(yīng)該是window.ready。
Deferred & Promise
CommonJS中的異步編程模型也延續(xù)了這一想法，
每一個異步任務(wù)返回一個Promise對象，該對象有一個then方法，允許指定回調(diào)函數(shù)。
所以我們可以這樣寫：
f1().then(f2).then(f3);
這種方法我們無需太過關(guān)注實(shí)現(xiàn)，也不太需要理解異步，只要懂得通過函數(shù)選對象，通過then進(jìn)行操作，就能進(jìn)行異步編程。
參考資料
與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的jquery链式写法 java_jQuery链式操作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java中长方体的类是什么_编写java
- 下一篇： jsforeach异步的问题_js中fo