jquery的上帝視角(promise)

Terry_Tai 發布于2019-08-21 17:52 / 1949人閱讀

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

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

promise的出現是為了解決異步編程中最頭疼的事情 回調嵌套地域

動畫回調金字塔:

$("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);

看到這樣的代碼,其實強迫癥已經犯了. 以上就是從代碼的視角去看問題.

好了現在我們換個角度去看這個問題. 切換到上帝視角

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

是不是非常清晰流暢這就是 同步編寫異步執行 所帶來的魅力

這種模式被稱作promise模式我們可以理解為
現實世界里，時間這條線就是單線程的，不會出現兩條時間線，這種事是會出現在科幻故事里. 如果我們的人生 = 代碼
那么上帝已經在他的時間維度的一瞬間規劃好了你的一生（因為他有先知的能力）（他無需跟著經歷你的時間），雖然你自己依然感受到了時間，以及各種變數

更多詳細代碼哲學請看這篇文章
http://www.zhangxinxu.com/wor...

現實中的例子 :
你求別人辦事別人給了你句答復20分鐘后來拿結果這個答復就是 promise 在20分鐘內你可以去做別的事情 20分鐘后你拿這個promise 找到那個人兌現承諾.

promise 就是未來的值

在jq中提供的$.deferred對象就是實現promise的解決方案.，defer的意思是"延遲"，所以deferred對象的含義就是"延遲"到未來某個點再執行。

deferred對象有三種執行狀態

未完成(notify)

已完成(resolve)

已失敗(reject)

當deferred對象狀態發生變化比如

變成resolve deferred對象立刻調用done()方法指定的回調函數

變成reject調用fail()方法指定的回調函數；

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

這是不能直接返回deferred對象因為這個deferred對象可以隨意被修改狀態,因此我門需要返回一個不能修改狀態的promise
deferred.promise() : 返回一個新的deferred對象，該對象的運行狀態無法被改變

所以我們的promise規范的模版

//創建
var  fnxx = function(){

    var defer = $.Deferred();

    //業務代碼....

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


    return defer.promise();
}


//調用
fnxx()
    .done(function(success){

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

業務案例

有如下需求

登錄獲得token

根據token查詢用戶信息

根據userId查詢用戶積分

根據積分判斷用戶是否需要充值

代碼如下 :


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

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

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

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

業務邏輯清晰自然我們必須要學會站在上帝視角審視它們. 只有這樣才能輕松駕馭它們成為Dominate

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

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

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

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

終極蛇皮上帝視角之微信小程序之告別 setData

摘要：而小程序官方的是在中調用方法來改變數據，從而改變界面。為了寫測試讓咱們來重構一把，利用學習過的函數式編程中的高階函數把依賴注入。也就是說當中的某個數據更新的時候，我們并不知道它會影響哪個中的屬性，特別的還有依賴于的情況。眾所周知 Vue 是借助 ES5 的 Object.defineProperty 方法設置 getter、setter 達到數據驅動界面，當然其中還有模板編譯等等其他...

wuyumin 2019-08-23 10:58 評論0 收藏0
終極蛇皮上帝視角之微信小程序之告別“刀耕火種”

開門見山地說，小程序在日常開發中使用原生框架來開發還是挺不方便的，比如：不支持 npm 包不支持各種 CSS 預編譯器不支持配置 Babel 來轉換一些 JavaScript 新特性這樣一來和日常開發前端頁面的體驗相比來說，簡直就像在刀耕火種。那么為了解決這些問題，我們能不能將前端開發中常用的 webpack 移植到小程序開發中呢？當然可以！ showImg(https://seg...

TerryCai 2019-08-23 10:58 評論0 收藏0
阿里王剛談自動駕駛：從單車智能到車路協同智能的進化

摘要：在今年的云棲大會上，阿里巴巴人工智能實驗室除了發布服務機器人天貓精靈太空蛋太空梭天貓精靈車載版，還重點推出了車路協同智能自動駕駛車。秒看懂智慧物流車和感知基站各位嘉賓，上午好我是王剛，我要介紹的是自動駕駛從單車智能跨到協同智能的進化。在今年的云棲大會上，阿里巴巴人工智能實驗室除了發布AliGenie 3.0、服務機器人（天貓精靈太空蛋、太空梭）、天貓精靈車載版（TmallGenie ...

shery 2019-06-26 18:35 評論0 收藏0
阿里王剛談自動駕駛：從單車智能到車路協同智能的進化

摘要：在今年的云棲大會上，阿里巴巴人工智能實驗室除了發布服務機器人天貓精靈太空蛋太空梭天貓精靈車載版，還重點推出了車路協同智能自動駕駛車。秒看懂智慧物流車和感知基站各位嘉賓，上午好我是王剛，我要介紹的是自動駕駛從單車智能跨到協同智能的進化。在今年的云棲大會上，阿里巴巴人工智能實驗室除了發布AliGenie 3.0、服務機器人（天貓精靈太空蛋、太空梭）、天貓精靈車載版（TmallGenie ...

Dongjie_Liu 2019-06-21 16:49 評論0 收藏0
JavaScript 異步

摘要：從最開始的到封裝后的都在試圖解決異步編程過程中的問題。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。寫一個符合規范并可配合使用的寫一個符合規范并可配合使用的理解的工作原理采用回調函數來處理異步編程。 JavaScript怎么使用循環代替(異步)遞歸問題描述在開發過程中，遇到一個需求：在系統初始化時通過http獲取一個第三方服務器端的列表，第三方服務器提供了一個接口，可通過...

tuniutech 2019-08-21 18:34 評論0 收藏0