短小強(qiáng)悍的JavaScript異步調(diào)用庫(kù)

昵稱10504424 2014-04-03

展開全文

對(duì)于博文 20行完成一個(gè)JavaScript模板引擎的備受好評(píng)我感到很驚訝,并決定用此文章介紹使用我經(jīng)常使用的另一個(gè)小巧實(shí)用的工具.我們知道,在瀏覽器中的 JavaScript 絕大部分的操作都是異步的(asynchronous),所以我們一直都需要使用回調(diào)方法,而有時(shí)不免陷入回調(diào)的泥淖而欲死欲仙。

　　假設(shè)我們有兩個(gè) functions ,我們順序地在一個(gè)后面執(zhí)行完后調(diào)用另一個(gè)。他們都操作同一個(gè)變量。第一個(gè)設(shè)置它的值,第二個(gè)使用它的值。

var value; 
var A = function() { 
setTimeout(function() { 
value = 10; 
}, 200); 
} 
var B = function() { 
console.log(value); 
}

　　那么,現(xiàn)在如果我們運(yùn)行 A();B(); 我們將在控制臺(tái)看到輸出為 undefined . 之所以會(huì)這樣是因?yàn)?A 函數(shù)使用了異步方式設(shè)置 value 。我們能做的就是傳一個(gè)回調(diào)函數(shù)給A,并讓函數(shù)A在執(zhí)行完后執(zhí)行回調(diào)函數(shù)。

　　這樣確實(shí)有用,但想象一下加入我們需要運(yùn)行5個(gè)或更多方法時(shí)將會(huì)發(fā)生什么。一直傳遞回調(diào)函數(shù)將會(huì)導(dǎo)致混亂和非常不雅觀的代碼。
好的解決辦法是寫一個(gè)工具函數(shù),接受我們的程序并控制整個(gè)過(guò)程。讓我們先從最簡(jiǎn)單的開始:

var queue = function(funcs) { 
// 接下來(lái)請(qǐng)看,董卿??? 
}

　　接著，我們要做的是通過(guò)傳遞A和B來(lái)運(yùn)行該函數(shù) - queue([A, B])。我們需要取得第一個(gè)函數(shù)并執(zhí)行它。

var queue = function(funcs) { 
var f = funcs.shift(); 
f(); 
}

　　如果執(zhí)行這段代碼,您將看到一個(gè) TypeError: undefined is not a function。這是因?yàn)?A函數(shù)沒收到回調(diào)參數(shù)但卻試圖運(yùn)行它。讓我們換一種調(diào)用方法。

var queue = function(funcs) { 
var next = function() { 
// ... 
}; 
var f = funcs.shift(); 
f(next); 
};

　　在 A執(zhí)行完后會(huì)調(diào)用 next 方法。將下一步操作放在 next 函數(shù)列表中是個(gè)很好的做法。我們可以將代碼歸攏在一起,而且我們能夠傳遞整個(gè)數(shù)組(即便數(shù)組中有很多函數(shù)等待執(zhí)行)。

var queue = function(funcs) { 
var next = function() { 
var f = funcs.shift(); 
f(next); 
}; 
next(); 
};

　　到了這一步,我們基本上達(dá)到了我們的目標(biāo)。即函數(shù)A 執(zhí)行后,接著會(huì)調(diào)用 B,打印出變量的正確值。這里的關(guān)鍵是 shift 方法的使用。它刪除數(shù)組的第一個(gè)元素并返回該元素。一步一步執(zhí)行下去, funcs數(shù)組就會(huì)變成 empty(空的)。所以,這可能會(huì)導(dǎo)致另一個(gè)錯(cuò)誤。為了證明這一觀點(diǎn),讓我們假設(shè)我們?nèi)匀恍枰\(yùn)行這兩個(gè)功能,但我們不知道他們的順序。在這種情況下,兩個(gè)函數(shù)都應(yīng)該接受回調(diào)參數(shù)(callback )并執(zhí)行它。

var A = function(callback) { 
setTimeout(function() { 
value = 10; 
callback(); 
}, 200); 
}; 
var B = function(callback) { 
console.log(value); 
callback(); 
};

　　當(dāng)然，我們會(huì)得到 TypeError: undefined is not a function.
要阻止這一點(diǎn),我們應(yīng)該檢查funcs數(shù)組是否為空。

var queue = function(funcs) { 
(function next() { 
if(funcs.length > 0) { 
var f = funcs.shift(); 
f(next); 
} 
})(); 
};

　　我們所做的就是定義 next 函數(shù)并調(diào)用它。這種寫法減少了一點(diǎn)代碼。

　　讓我們?cè)囍胂蟊M可能多的情況。比如當(dāng)前執(zhí)行功能的 scope 。函數(shù)內(nèi)的 this 關(guān)鍵字可能指向了全球的 window 對(duì)象。,如果我們可以設(shè)置自己的scope 當(dāng)然是件很酷的事情。

var queue = function(funcs, scope) { 
(function next() { 
if(funcs.length > 0) { 
var f = funcs.shift(); 
f.apply(scope, [next]); 
} 
})(); 
};

　　我們?yōu)檫@個(gè)tiny 類庫(kù)增加了一個(gè)參數(shù)。接著我們使用 apply 函數(shù),而不是直接調(diào)用 f(next),來(lái)設(shè)置scope 并將參數(shù) next 傳遞進(jìn)去。同樣的功能,但漂亮多了。

　　我們需要的最后一個(gè)特性,就是是函數(shù)間傳遞參數(shù)的能力。當(dāng)然我們不知道具體會(huì)有多少參數(shù)將被使用。這就是為什么我們需要使用 arguments 變量的原因。你可能知道,該變量在每個(gè) JavaScript函數(shù)中都是可用的,代表了傳進(jìn)來(lái)的參數(shù)。它就和一個(gè)數(shù)組差不多,但不完全是。因?yàn)樵?apply 方法中我們需要使用真正的數(shù)組,使用一個(gè)小竅門來(lái)進(jìn)行轉(zhuǎn)換。

var queue = function(funcs, scope) { 
(function next() { 
if(funcs.length > 0) { 
var f = funcs.shift(); 
f.apply(scope, [next].concat(Array.prototype.slice.call(arguments, 0))); 
} 
})(); 
};

　　下面是測(cè)試的代碼:

　　執(zhí)行后的輸出為:

1 2	`30` `10`

　　為了代碼的可讀性和美觀，我們將部分相關(guān)的代碼移到一行內(nèi):

var queue = function(funcs, scope) { 
(function next() { 
if(funcs.length > 0) { 
funcs.shift().apply(scope || {}, [next].concat(Array.prototype.slice.call(arguments, 0))); 
} 
})(); 
};

　　你可以點(diǎn)擊這里查看并調(diào)試相關(guān)代碼 ,完整的測(cè)試代碼如下:

　　原文出處： krasimirtsonev

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自：昵稱10504424 > 《工作》

舉報(bào)/認(rèn)領(lǐng)