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

成這樣子的：

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

但是我們寫(xiě)成了：

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

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

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

為了更好的異步體驗(yàn)

Javascript是無(wú)阻塞語(yǔ)言，所以他不是沒(méi)阻塞，而是不能阻塞，所以他需要通過(guò)事件來(lái)驅(qū)動(dòng)，異步來(lái)完成一些本需要阻塞進(jìn)程的操作。

?

但是異步編程是一種令人瘋狂的東西……運(yùn)行時(shí)候是分離的倒不要緊，但是編寫(xiě)代碼時(shí)候也是分離的就…… ?

常見(jiàn)的異步編程模型有哪些呢？

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

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

. 代碼如下:

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

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

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

?事件監(jiān)聽(tīng)

也就是采用事件驅(qū)動(dòng)，執(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高級(jí)程序設(shè)計(jì)》中的自定義事件實(shí)現(xiàn)。于是我們就可以通過(guò)addHandler來(lái)綁定事件處理函數(shù)，用fire來(lái)觸發(fā)事件，用removeHandler來(lái)刪除事件處理函數(shù)。

?

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

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

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

. 代碼如下:

(function(){var isReady=false; //判斷onDOMReady方法是否已經(jīng)被執(zhí)行過(guò)var readyList= [];//把需要執(zhí)行的方法先暫存在這個(gè)數(shù)組里var timer;//定時(shí)器句柄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ù)了這一想法，每一個(gè)異步任務(wù)返回一個(gè)Promise對(duì)象，該對(duì)象有一個(gè)then方法，允許指定回調(diào)函數(shù)。

所以我們可以這樣寫(xiě)：

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

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

?

與50位技術(shù)專(zhuān)家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

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

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