什么是鏈?zhǔn)讲僮髂?#xff1f;我們來看看，本來應(yīng)該寫

成這樣子的：

$(".stripe tr").mouseover(function(){$(this).addClass("over"); })$(".stripe tr").mouseout(function(){$(this).removeClass("over"); })

但是我們寫成了：

$(".stripe tr").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");})

在jQuery中，執(zhí)行完mouseover或者mouseout等方法之后，都會返回當(dāng)前的對象，所以可以進行鏈?zhǔn)讲僮?#xff08;注意語法）

什么要用鏈?zhǔn)讲僮髂?#xff1f;

為了更好的異步體驗

Javascript是無阻塞語言，所以他不是沒阻塞，而是不能阻塞，所以他需要通過事件來驅(qū)動，異步來完成一些本需要阻塞進程的操作。

?

但是異步編程是一種令人瘋狂的東西……運行時候是分離的倒不要緊，但是編寫代碼時候也是分離的就…… ?

常見的異步編程模型有哪些呢？

?回調(diào)函數(shù)

所謂的回調(diào)函數(shù)，意指先在系統(tǒng)的某個地方對函數(shù)進行注冊，讓系統(tǒng)知道這個函數(shù)的存在，然后在以后，當(dāng)某個事件發(fā)生時，再調(diào)用這個函數(shù)對事件進行響應(yīng)。

. 代碼如下:

function f(num, callback){if(num<0) {alert("調(diào)用低層函數(shù)處理!");alert("分?jǐn)?shù)不能為負,輸入錯誤!");}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為非負數(shù)時候callback才會調(diào)用。

但是問題，如果我們不看函數(shù)內(nèi)部，我們并不知道callback會幾時調(diào)用，在什么情況下調(diào)用，代碼間產(chǎn)生了一定耦合，流程上也會產(chǎn)生一定的混亂。?

雖然回調(diào)函數(shù)是一種簡單而易于部署的實現(xiàn)異步的方法，但從編程體驗來說它卻不夠好。 ?

?事件監(jiān)聽

也就是采用事件驅(qū)動，執(zhí)行順序取決于事件順序。

. 代碼如下:

function EventTarget(){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 instanceof Array]){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] instanceof Array){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è)計》中的自定義事件實現(xiàn)。于是我們就可以通過addHandler來綁定事件處理函數(shù)，用fire來觸發(fā)事件，用removeHandler來刪除事件處理函數(shù)。

?

雖然通過事件解耦了，但流程順序更加混亂了。

?鏈?zhǔn)疆惒?/p>

個 人覺得鏈?zhǔn)讲僮髯钪档梅Q贊的還是其解決了異步編程模型的執(zhí)行流程不清晰的問題。jQuery中$(document).ready就非常好的闡釋了這一理 念。DOMCotentLoaded是一個事件，在DOM并未加載前，jQuery的大部分操作都不會奏效，但jQuery的設(shè)計者并沒有把他當(dāng)成事件一 樣來處理，而是轉(zhuǎn)成一種“選其對象，對其操作”的思路。$選擇了document對象，ready是其方法進行操作。這樣子流程問題就非常清晰了，在鏈條 越后位置的方法就越后執(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.length;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。

?Promise

CommonJS中的異步編程模型也延續(xù)了這一想法，每一個異步任務(wù)返回一個Promise對象，該對象有一個then方法，允許指定回調(diào)函數(shù)。

所以我們可以這樣寫：

f1().then(f2).then(f3);

這種方法我們無需太過關(guān)注實現(xiàn)，也不太需要理解異步，只要懂得通過函數(shù)選對象，通過then進行操作，就能進行異步編程。 ?

?

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的jQuery的链式操作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。