資訊專欄INFORMATION COLUMN
摘要：直接修改狀態(tài)為指定值，然后接著執(zhí)行回調(diào)嗚嗚嗚，有時候總會犯傻不是，上面第一種維護一個定時器，效率低下第二種把狀態(tài)變得很麻煩和復雜其實很多事情之所以復雜，是因為我們想的太多。根本沒那么復雜，就三個狀態(tài)，搞毛線定時器，狀態(tài)跟蹤。
前言
Promise是個什么玩意，大家都知道，度娘告訴我，以同步方式書寫異步，解決回調(diào)地獄。。。
狀態(tài)機早聞Promise的大名，簡單介紹，根據(jù)狀態(tài)改變來執(zhí)行相應(yīng)處理函數(shù)。
Promise的狀態(tài)極其簡單，只有 "pending", "resolved", "rejected"三種狀態(tài)
然后就是如何實現(xiàn)的問題，最關(guān)鍵的當然是監(jiān)聽到狀態(tài)的更新，然后才能做出回應(yīng)，那么如何知道狀態(tài)變了呢？
最初單純的我開了一個腦洞,有以下想法：
寫一個定時器不斷查詢狀態(tài)值，如果有變化，那么執(zhí)行回調(diào)
利用ES5的 Object.defineProperty(obj, prop, descriptor)來追蹤狀態(tài)變化。
直接修改狀態(tài)為指定值，然后接著執(zhí)行回調(diào)
嗚嗚嗚，有時候總會犯傻不是，上面第一種維護一個定時器，效率低下；第二種把狀態(tài)變得很麻煩和復雜；
其實很多事情之所以復雜，是因為我們想的太多。
Promise根本沒那么復雜，就三個狀態(tài)，搞毛線定時器，狀態(tài)跟蹤。
利用觀察者模式，只需要通過特定書寫方式注冊對應(yīng)狀態(tài)的事件處理函數(shù)，然后更新狀態(tài)，調(diào)用注冊過的處理函數(shù)即可。這個特定方式就是 then ,done ,fail, always...等方法；更新狀態(tài)觸發(fā)時機就是resolve, reject方法。
理論分析：
寫一個類對象，維護一個 state，值有3種："pending", "resolved", "rejected"
通過then done fail always方法注冊回調(diào)處理函數(shù)
通過resolve reject分別更新對應(yīng)狀態(tài)，并且調(diào)用注冊函數(shù)
代碼如下:
/**
* [3種狀態(tài)]
* @type {String}
*/
var PENDING = "pending";
var RESOLVED = "resolved";
var REJECTED = "rejected";
/**
* [Promise類實現(xiàn)]
* 構(gòu)造函數(shù)傳入一個fn，有兩個參數(shù)，resolve：成功回調(diào); reject：失敗回調(diào);
* state: 狀態(tài)存儲
* doneList: 成功處理函數(shù)列表
* failList: 失敗處理函數(shù)列表
* done: 注冊成功處理函數(shù)
* fail: 注冊失敗處理函數(shù)
* then: 同時注冊成功和失敗處理函數(shù)
* always: 一個處理注冊到成功和失敗，都會調(diào)用
* resolve: 更新state為：RESOLVED，并且執(zhí)行成功處理隊列
* reject: 更新state為：REJECTED，并且執(zhí)行失敗處理隊列
*/
var Promise = (function (){
function Promise(fn){
this.state = PENDING;
this.doneList = [];
this.failList = [];
this.fn = fn;
this.fn(this.resolve.bind(this), this.reject.bind(this))
}
var p = {
done: function (cb){
if(typeof cb == "function")
this.doneList.push(cb)
return this;
},
fail: function(cb){
if(typeof cb == "function")
this.failList.push(cb);
return this;
},
then: function(success, fail){
this.done(success || noop).fail(fail || noop)
return this;
},
always: function(cb){
this.done(cb).fail(cb)
return this;
},
resolve: function(){
this.state = RESOLVED;
var lists = this.doneList;
for(var i = 0, len = lists.length; i
使用方式，請到https://github.com/donglegend/MyPromise下載使用
源碼下載
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96318.html
摘要：前言在異步處理方案中，目前最為簡潔優(yōu)雅的便是函數(shù)以下簡稱函數(shù)。聲明式表達式作為對象屬性作為對象屬性的簡寫式箭頭函數(shù)返回值執(zhí)行函數(shù)，會固定的返回一個對象。如果該對象最終成功，則會返回成功的返回值，相當將替換成返回值。 前言 在異步處理方案中，目前最為簡潔優(yōu)雅的便是async函數(shù)（以下簡稱A函數(shù)）。經(jīng)過必要的分塊包裝后，A函數(shù)能使多個相關(guān)的異步操作如同同步操作一樣聚合起來，使其相互間的關(guān)系...
摘要：這樣很容易造成大的損失，提前做好錯誤收集和處理，可以減少損失。 編寫代碼只是做好項目的一小部分，寫代碼難免會碰到錯誤。因此，在項目上線后，我們還需要主動對項目的錯誤進行收集，不能等用戶發(fā)現(xiàn)錯誤，再聯(lián)系我們，我們再去處理。這樣很容易造成大的損失，提前做好錯誤收集和處理，可以減少損失。 本人并沒有做過相關(guān)的工作，下面的文章只是我在學習中的一點思考和總結(jié)，可能有比較多不足和錯誤的地方，希望大...
摘要：模塊化是隨著前端技術(shù)的發(fā)展，前端代碼爆炸式增長后，工程化所采取的必然措施。目前模塊化的思想分為和。特別指出，事件不等同于異步，回調(diào)也不等同于異步。將會討論安全的類型檢測惰性載入函數(shù)凍結(jié)對象定時器等話題。 Vue.js 前后端同構(gòu)方案之準備篇——代碼優(yōu)化 目前 Vue.js 的火爆不亞于當初的 React，本人對寫代碼有潔癖，代碼也是藝術(shù)。此篇是準備篇，工欲善其事，必先利其器。我們先在代...
摘要：接下來，我們換一種思路，用一個相對較新的來實現(xiàn)方法。從這道題目看出，相比考察死記硬背，這樣的實現(xiàn)更有意義。對數(shù)組的操作我們不能陌生，其中方法更要做到駕輕就熟。最后，我們再看下社區(qū)上著名的和的實現(xiàn)。 有不少剛?cè)胄械耐瑢W跟我說：JavaScript 很多 API 記不清楚怎么辦？數(shù)組的這方法、那方法總是傻傻分不清楚，該如何是好？操作 DOM 的方式今天記，明天忘，真讓人奔潰！ 甚至有的開發(fā)...
閱讀 2386·2021-11-15 11:37
閱讀 2638·2021-09-23 11:21
閱讀 2967·2021-09-07 10:11
閱讀 3175·2019-08-30 15:53
閱讀 2835·2019-08-29 15:13
閱讀 1618·2019-08-26 13:57
閱讀 1112·2019-08-26 12:23
閱讀 2451·2019-08-26 11:51
