繼
jQuery的Callbacks
及 jQuery之Deferred的原理(參看源碼) 兩篇文後，
今天想以自己的想法參考兩篇文來自製一個簡單的、API
介面仿照
Javascript 原生 Promise 物件的 MyPromise 物件，
主要是希望能在自己實作的過程中，能夠更理解對程式的邏輯及設計思路。
在實作之前，首先要來簡單的介紹 Javascript 原生的 Promise：
Promise
的功能及性質類似 JQuery 的 $.Deferred() 及 Angularjs 的 $q 等，
在早期瀏覽器還沒有實作
Promise 物件時，JQuery 就已經自己實作了 Deferred ，
可以用來方便地管理非同步異步操作。
建立 Promise 物件的方法是 new 關鍵字，例如：
var promise = new Promise(function(resolve, reject){
setTimeout(function(){
var resolvedData = 1;
resolve(resolvedData);
}, 1000);
});
Promise 的建構式 (constructor) 接受一個函式，函式可以得到兩個各叫做 resolve 和 reject 的函式，
當異步操作完成後，可以執行 resolve(resolvedData) 函式，並可以送入一個想要傳遞給下一個異步操作的 resovledData 資料作參數。
當 resolve() 被執行後，可以以串接的方式用 then() 函式來串接下一個想要執行的異步操作，
例如：
var promise = new Promise(function(resolve, reject){
setTimeout(function(){
console.log(1);
resolve(2);
}, 3000);
})
.then(function(resolvedData){
setTimeout(function(){
console.log(resolvedData);
resolve(3);
}, 2000);
})
.then(function(resolvedData){
setTimeout(function(){
console.log(resolvedData);
resolve();
}, 1000);
});
上面的例子會在 3 秒後在 console 印出 1，之後再 2 秒印出2，再 1 秒印出3
原生的 Promise 實際上瀏覽器是如何實作它們的我並不清楚，
不過在這篇文中我嘗試試著以自己的想法模擬實現部份的介面功能來作為練習，
主要實現的部份有：
- 自己實作的 Class 名稱名命為 MyPromise
-
能夠以
new Promise(function xxxFunction(resolve){ //do somthing resolve(resolvedData); }).then(function(resolvedData){ //do somthing return new Promise(function(resolve){ //do somthing }); }).then(function(resolvedData){ //do somthing return new Promise(function(resolve){ //do somthing }); })的方式建立 Promise 的物件，並以傳入 xxxFunction(resolve) 的 resolve 函式來 resolve Promise，其中可以傳入 resolvedData 資料到下一個 Promise 中，下一個 Promise 用 then(fujction (rsolvedData)) 來接收 resolvedDatat 並可以繼續回傳新的 Promise 來以同樣的方式用 resolve 串接到下個 Promise。 - 只實現 resolve 相關的部分，忽略了 reject 的部份，也省略了一些如 Promise.all, Promise.race 等的函式實作。
- 實現方式參考了 JQuery 的 Deferred 物件實作思路，使用一個佇列列隊 (queue) 的方式來實現，其中：
resolve(resolvedData) 相當於是執行佇列中的所有函式，並且之後有函式被添加至佇列時也會馬上被執行，resovledData 會被儲存起來供要執行佇列中的函式時作為輸入用。
then() 被執行時會回傳一個 Promise，這裡暫且稱為 Promise2 ，
Promise2 可以繼續地用 then() 往下串接。
then() 的行為是把要執行的函式添加至佇列中，
這裡暫稱要執行的函式為 thenFun()，
thenFunc() 被執行後會回傳另一個 Promise，這裡暫且稱為 Promise3，
我們會把 Promise2 的 resolve() 函式加進 Promise3 的佇列中，
這樣在 Promise3 在 thenFunc() 被執行 reolsve() 後，就會執行被放在 Promise3 佇列中的 Promise2 的 resolve()，
進而讓設定在 Promise2 佇列中的函式被執行。
下面是實現的程式碼和使用的範例：
function MyPromise(callbackFunc){
var promise = this;
promise.status = "pending"; //pending, resolved
promise.callbackQueue = [];
promise.resolvedData = null;
promise.addCallbackFuncToQueue = function(callbackFunc){
promise.callbackQueue.push(callbackFunc);
if (promise.status == "resolved"){
promise.fireCallbackFuncInQueue();
}
}
promise.resolve = function(resolvedData){
if (promise.status != "resolved"){
promise.resolvedData = resolvedData;
promise.status = "resolved";
promise.fireCallbackFuncInQueue();
}
}
promise.fireCallbackFuncInQueue = function(){
while(promise.callbackQueue.length > 0){
var callbackFuncToFire = promise.callbackQueue.shift();
callbackFuncToFire.call(promise, promise.resolvedData);
}
}
promise.then = function(thenCallbackFunc){
return new MyPromise(function(resolve){
promise.addCallbackFuncToQueue(function(data){
var returnedPromiseFromThenCallbackFunc = thenCallbackFunc.call(promise, data);
returnedPromiseFromThenCallbackFunc.addCallbackFuncToQueue(resolve);
});
});
}
callbackFunc.call(promise, this.resolve);
}
/////////////////////////////////////////////////
new MyPromise(function(resolve){
console.log(1);
setTimeout(function(){
resolve(2);
}, 2000);
})
.then(function(data){
return new MyPromise(function(resolve){
console.log(data);
setTimeout(function(){
resolve(3);
}, 1000);
});
})
.then(function(data){
return new MyPromise(function(resolve){
console.log(data);
resolve();
});
});
JSFiddle 的線上範例：
參考資料：
沒有留言 :
張貼留言