国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

promise原理探究

Imfan / 2355人閱讀

摘要：直接修改狀態為指定值，然后接著執行回調嗚嗚嗚，有時候總會犯傻不是，上面第一種維護一個定時器，效率低下第二種把狀態變得很麻煩和復雜其實很多事情之所以復雜，是因為我們想的太多。根本沒那么復雜，就三個狀態，搞毛線定時器，狀態跟蹤。

前言

Promise是個什么玩意，大家都知道，度娘告訴我，以同步方式書寫異步，解決回調地獄。。。

狀態機

早聞Promise的大名，簡單介紹，根據狀態改變來執行相應處理函數。
Promise的狀態極其簡單，只有 "pending", "resolved", "rejected"三種狀態
然后就是如何實現的問題，最關鍵的當然是監聽到狀態的更新，然后才能做出回應，那么如何知道狀態變了呢？
最初單純的我開了一個腦洞,有以下想法：

寫一個定時器不斷查詢狀態值，如果有變化，那么執行回調

利用ES5的 Object.defineProperty(obj, prop, descriptor)來追蹤狀態變化。

直接修改狀態為指定值，然后接著執行回調

嗚嗚嗚，有時候總會犯傻不是，上面第一種維護一個定時器，效率低下；第二種把狀態變得很麻煩和復雜；
其實很多事情之所以復雜，是因為我們想的太多。
Promise根本沒那么復雜，就三個狀態，搞毛線定時器，狀態跟蹤。
利用觀察者模式，只需要通過特定書寫方式注冊對應狀態的事件處理函數，然后更新狀態，調用注冊過的處理函數即可。這個特定方式就是 then ,done ,fail, always...等方法；更新狀態觸發時機就是resolve, reject方法。

簡單實現

理論分析：

寫一個類對象，維護一個 state，值有3種："pending", "resolved", "rejected"

通過then done fail always方法注冊回調處理函數

通過resolve reject分別更新對應狀態，并且調用注冊函數

代碼如下:

/**
 * [3種狀態]
 * @type {String}
 */
var PENDING = "pending";
var RESOLVED = "resolved";
var REJECTED = "rejected";

/**
 * [Promise類實現]
 * 構造函數傳入一個fn，有兩個參數，resolve：成功回調; reject：失敗回調;
 * state: 狀態存儲
 * doneList: 成功處理函數列表
 * failList: 失敗處理函數列表
 * done: 注冊成功處理函數
 * fail: 注冊失敗處理函數
 * then: 同時注冊成功和失敗處理函數
 * always: 一個處理注冊到成功和失敗，都會調用
 * resolve: 更新state為：RESOLVED，并且執行成功處理隊列
 * reject: 更新state為：REJECTED，并且執行失敗處理隊列
 */
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下載使用

源碼下載

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/96318.html

相關文章

  • Async：簡潔優雅的異步之道

    摘要：前言在異步處理方案中，目前最為簡潔優雅的便是函數以下簡稱函數。聲明式表達式作為對象屬性作為對象屬性的簡寫式箭頭函數返回值執行函數，會固定的返回一個對象。如果該對象最終成功，則會返回成功的返回值，相當將替換成返回值。 前言 在異步處理方案中，目前最為簡潔優雅的便是async函數（以下簡稱A函數）。經過必要的分塊包裝后，A函數能使多個相關的異步操作如同同步操作一樣聚合起來，使其相互間的關系...

    leiyi 評論0 收藏0

  • 前端錯誤監控與收集探究

    摘要：這樣很容易造成大的損失，提前做好錯誤收集和處理，可以減少損失。 編寫代碼只是做好項目的一小部分，寫代碼難免會碰到錯誤。因此，在項目上線后，我們還需要主動對項目的錯誤進行收集，不能等用戶發現錯誤，再聯系我們，我們再去處理。這樣很容易造成大的損失，提前做好錯誤收集和處理，可以減少損失。 本人并沒有做過相關的工作，下面的文章只是我在學習中的一點思考和總結，可能有比較多不足和錯誤的地方，希望大...

    ZoomQuiet 評論0 收藏0

  • javascript知識點

    摘要：模塊化是隨著前端技術的發展，前端代碼爆炸式增長后，工程化所采取的必然措施。目前模塊化的思想分為和。特別指出，事件不等同于異步，回調也不等同于異步。將會討論安全的類型檢測惰性載入函數凍結對象定時器等話題。 Vue.js 前后端同構方案之準備篇——代碼優化 目前 Vue.js 的火爆不亞于當初的 React，本人對寫代碼有潔癖，代碼也是藝術。此篇是準備篇，工欲善其事，必先利其器。我們先在代...

    Karrdy 評論0 收藏0

  • 我們不背誦 API，只實現 API

    摘要：接下來，我們換一種思路，用一個相對較新的來實現方法。從這道題目看出，相比考察死記硬背，這樣的實現更有意義。對數組的操作我們不能陌生，其中方法更要做到駕輕就熟。最后，我們再看下社區上著名的和的實現。 有不少剛入行的同學跟我說：JavaScript 很多 API 記不清楚怎么辦？數組的這方法、那方法總是傻傻分不清楚，該如何是好？操作 DOM 的方式今天記，明天忘，真讓人奔潰！ 甚至有的開發...

    wudengzan 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<