|
|
為此，我們需要設(shè)計一種新的操作方式來優(yōu)化代碼可讀性，讓順序異步操作代碼看起來和傳統(tǒng)的順序同步操作代碼一樣優(yōu)雅。
傳統(tǒng)做法
大多數(shù)程序員都能夠很好的理解順序執(zhí)行的代碼，例如這樣子的：
復(fù)制代碼 代碼如下:
var firstResult = firstOperation(initialArgument);
var secondResult = secondOperation(firstResult);
var finalResult = thirdOperation(secondResult);
alert(finalResult);
其中先執(zhí)行的函數(shù)為后執(zhí)行的函數(shù)提供所需的數(shù)據(jù)。然而使用我們的異步調(diào)用框架后，同樣的邏輯必須變成這樣子：
復(fù)制代碼 代碼如下:
firstAsyncOperation(initialArgument).addCallback(function(firstResult) {
secondAsyncOperation(firstResult).addCallback(function(secondResult) {
thirdAsyncOperation(secondResult).addCallback(function(finalResult) {
alert(finalResult);
});
});
});
鏈?zhǔn)綄懛?/STRONG>
我認(rèn)為上面的代碼實在是太不美觀了，并且希望能夠改造為jQuery風(fēng)格的鏈?zhǔn)綄懛ā榇耍覀兿葮?gòu)造一個用例：
復(fù)制代碼 代碼如下:
Async.go(initialArgument)
.next(firstAsyncOperation)
.next(secondAsyncOperation)
.next(thirdAsyncOperation)
.next(function(finalResult) { alert(finalResult); })
在這個用例當(dāng)中，我們在go傳入初始化數(shù)據(jù)，然后每一個next后面?zhèn)魅胍粋€數(shù)據(jù)處理函數(shù)，這些處理函數(shù)按順序?qū)?shù)據(jù)進(jìn)行處理。
同步并存
上面的用例調(diào)用到的全部都是異步函數(shù)，不過我們最好能夠兼容同步函數(shù)，讓使用者無需關(guān)心函數(shù)的具體實現(xiàn)，也能使用這項功能。為此我們再寫一個這樣的用例：
復(fù)制代碼 代碼如下:
Async.go(0)
.next(function(i) { alert(i); return i + 1; })
.next(function(i) {
alert(i);
var operation = new Async.Operation();
setTimeout(function() { operation.yield(i + 1); }, 1000);
return operation;
})
.next(function(i) { alert(i); return i + 1; })
.next(function(i) { alert(i); return i; });
在上述用例中，我們期待能夠看到0, 1, 2, 3的提示信息序列，并且1和2之間間隔為1000毫秒。
異步本質(zhì)
一個鏈?zhǔn)秸{(diào)用，本質(zhì)上也是一個異步調(diào)用，所以它返回的也是一個Operation實例。這個實例自然也有result、state和completed這幾個字段，并且當(dāng)整個鏈?zhǔn)秸{(diào)用完成時，result等于最后一個調(diào)用返回的結(jié)果，而completed自然是等于true。
我們可以擴展一下上一個用例，得到如下用例代碼：
復(fù)制代碼 代碼如下:
var chainOperation = Async.go(0)
.next(function(i) { alert(i); return i + 1; })
.next(function(i) {
alert(i);
var operation = new Async.Operation();
setTimeout(function() { operation.yield(i + 1); }, 1000);
return operation;
})
.next(function(i) { alert(i); return i + 1; })
.next(function(i) { alert(i); return i; });
setTiemout(function() { alert(chainOperation.result; }, 2000);
把鏈?zhǔn)秸{(diào)用的返回保存下來，在鏈?zhǔn)秸{(diào)用完成時，它的result應(yīng)該與最后一個操作的返回一致。在上述用例中，也就是3。
調(diào)用時機
盡管我們提供了一種鏈?zhǔn)秸{(diào)用方式，但是用戶不一定會按照這種固定的方式來調(diào)用，所以我們?nèi)匀灰紤]兼容用戶的各種可能用法，例如說異步地用next往調(diào)用鏈添加操作：
復(fù)制代碼 代碼如下:
var chainOperation = Async.go(0);
chainOperation.next(function(i) { alert(i); return i + 1; });
setTimeout(function() {
chainOperation.next(function(i) {
alert(i);
var operation = new Async.Operation();
setTimeout(function() { operation.yield(i + 1); }, 2000);
return operation;
})
}, 1000);
setTimeout(function() {
chainOperation.next(function(i) { alert(i); return i + 1; });
}, 2000);
在這個用例當(dāng)中，用戶每隔1000毫秒添加一個操作，而其中第二個操作耗時2000毫秒。也就是說，添加第三個操作時第二個操作還沒返回。作為一個健壯的框架，必須要能兼容這樣的使用方式。
此外我們還要考慮，用戶可能想要先構(gòu)造調(diào)用鏈，然后再執(zhí)行調(diào)用鏈。這時候用戶就會先使用next方法添加操作，再使用go方法執(zhí)行。
復(fù)制代碼 代碼如下:
var chainOperation = Async
.chain(function(i) { alert(i); return i + 1; })
.next(function(i) {
alert(i);
var operation = new Async.Operation();
setTimeout(function() { operation.yield(i + 1); }, 2000);
return operation;
})
.go(0)
setTimeout(function() {
chainOperation.next(function(i) { alert(i); return i + 1; })
}, 1000);
在上述用例中，用戶通過chain和next添加了頭同步操作和異步操作各一個，然后用go執(zhí)行調(diào)用鏈，在調(diào)用鏈執(zhí)行完畢之前又用next異步追加了一個操作。一個健壯的框架，在這樣的用例當(dāng)中應(yīng)該能夠如同用戶所期望的那樣提示0, 1, 2。
小結(jié)
針對鏈?zhǔn)秸{(diào)用的需求，我們設(shè)計了如此多的用例，包括各種奇怪的異步調(diào)用方式。最終如何實現(xiàn)這樣的功能呢？
JavaScript技術(shù)：JavaScript 異步調(diào)用框架 (Part 4 - 鏈?zhǔn)秸{(diào)用)，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
