jquery的上帝視角(promise)

Terry_Tai 發(fā)布于2019-08-21 17:52 / 1954人閱讀

摘要：是一種異步編程規(guī)范音譯來(lái)理解普羅米修斯。普羅米修斯是希臘神話故事中的英雄，名字的意思是先知。最初的命名是未來(lái)，可見(jiàn)含義不是字面的誓言承諾之類，而是先知未來(lái)的意思。

promise 是一種異步編程規(guī)范,音譯來(lái)理解——“普羅米修斯”。普羅米修斯是希臘神話故事中的英雄，名字的意思是“先知”。Promise最初的命名是Futures, “未來(lái)”，可見(jiàn)Promise含義不是字面的“誓言”“承諾”之類，而是“先知”“未來(lái)”的意思。

promise的出現(xiàn)是為了解決異步編程中最頭疼的事情 回調(diào)嵌套地域

動(dòng)畫回調(diào)金字塔:

$("xx").animate({}, function(){
    //do something
    $("xx").animate({},function(){
        //do something
        $("xx").animate({},function(){
            //do something
            $("xx").animate({},function(){
                //do something
                $("xx").animate({},function(){
                    //do something
                },1000);
            },1000);
        },1000);
    },1000);
},1000);

看到這樣的代碼,其實(shí)強(qiáng)迫癥已經(jīng)犯了. 以上就是從代碼的視角去看問(wèn)題.

好了現(xiàn)在我們換個(gè)角度去看這個(gè)問(wèn)題. 切換到上帝視角

$("xx").animate({})
    //動(dòng)畫1 之后
    .then(function(){
        return $("xx").animate({});
    })
    //動(dòng)畫2 之后
    .then(function(){
        return  $("xx").animate({});
    })
    //動(dòng)畫3 之后
    .then(function(){
        return  $("xx").animate({});
    })
    //動(dòng)畫4 之后
    .then(function(){
        return  $("xx").animate({});
    })
    //動(dòng)畫完成
    .done(function(){
        console.log("動(dòng)畫完成...")
    })
    //動(dòng)畫失敗
    .fail(function(){
        console.log("動(dòng)畫出錯(cuò)...")
    });

是不是非常清晰流暢這就是 同步編寫異步執(zhí)行 所帶來(lái)的魅力

這種模式被稱作promise模式  我們可以理解為 
現(xiàn)實(shí)世界里，時(shí)間這條線就是單線程的，不會(huì)出現(xiàn)兩條時(shí)間線，這種事是會(huì)出現(xiàn)在科幻故事里.  如果我們的 人生 = 代碼
那么上帝已經(jīng)在他的時(shí)間維度的一瞬間規(guī)劃好了你的一生（因?yàn)樗邢戎哪芰Γㄋ麩o(wú)需跟著經(jīng)歷你的時(shí)間），雖然你自己依然感受到了時(shí)間，以及各種變數(shù)

更多詳細(xì)代碼哲學(xué) 請(qǐng)看這篇文章
http://www.zhangxinxu.com/wor...

現(xiàn)實(shí)中的例子 :
你求別人辦事別人給了你句答復(fù)20分鐘后來(lái)拿結(jié)果這個(gè)答復(fù) 就是 promise 在20分鐘內(nèi) 你可以去做別的事情 20分鐘后你拿這個(gè)promise 找到那個(gè)人兌現(xiàn)承諾.

promise 就是未來(lái)的值

在jq中提供的$.deferred對(duì)象就是實(shí)現(xiàn)promise的解決方案.，defer的意思是"延遲"，所以deferred對(duì)象的含義就是"延遲"到未來(lái)某個(gè)點(diǎn)再執(zhí)行。

deferred對(duì)象有三種執(zhí)行狀態(tài)

未完成(notify)

已完成(resolve)

已失敗(reject)

當(dāng)deferred對(duì)象狀態(tài)發(fā)生變化比如

變成resolve deferred對(duì)象立刻調(diào)用done()方法指定的回調(diào)函數(shù)

變成reject調(diào)用fail()方法指定的回調(diào)函數(shù)；

變成 notify 則繼續(xù)等待，或者調(diào)用progress()方法指定的回調(diào)函數(shù)

這是不能直接返回deferred對(duì)象因?yàn)檫@個(gè)deferred對(duì)象可以隨意被修改狀態(tài),因此我門需要返回一個(gè) 不能修改狀態(tài)的promise
deferred.promise() : 返回一個(gè)新的deferred對(duì)象，該對(duì)象的運(yùn)行狀態(tài)無(wú)法被改變

所以我們的promise規(guī)范的模版

//創(chuàng)建
var  fnxx = function(){

    var defer = $.Deferred();

    //業(yè)務(wù)代碼....

    //條件
    if(xxxx)
        //成功
        defer.resolve(//成功返回值);
    else
        //失敗
        defer.reject(//失敗返回error);


    return defer.promise();
}


//調(diào)用
fnxx()
    .done(function(success){

    })
    .fail(function(error){
        
    });

業(yè)務(wù)案例

有如下需求

登錄獲得token

根據(jù)token查詢用戶信息

根據(jù)userId查詢用戶積分

根據(jù)積分判斷用戶是否需要充值

代碼如下 :


            //登錄獲得token
            login(userName,passWord)

                    //獲得用戶信息(根據(jù)token)
                    .then(function(loginUser){
                        return getUserInfo(loginUser.token);
                    })

                      //獲得積分(根據(jù)用戶id)
                    .then(function(userInfo){
                        return getCredit(userInfo.userId);
                    })

                    //是否需要充值
                    .then(function(credit){
                        return isRecharge(credit);
                    })
                     //最后結(jié)果
                    .done(function(isRe){
                        console.log(isRe);
                        if(isRe == 0){
                            alert("不需要充值!");
                        }
                        else if(isRe == 1){
                            alert("請(qǐng)充值");
                        }
                        else{
                            console.log("錯(cuò)誤!");
                        }
                    })
                    //任意一步 出現(xiàn)錯(cuò)誤
                    .fail(function(ob,name,error){
                        console.error(error.stack);
                    });

業(yè)務(wù)邏輯清晰自然我們必須要學(xué)會(huì) 站在上帝視角審視它們. 只有這樣才能輕松駕馭它們成為Dominate

源代碼git https://github.com/sherlock22...

參考
http://www.ruanyifeng.com/blo...
http://www.zhangxinxu.com/wor...