項目分享三：頁面之間的傳值

1、回調函數的使用

咱們首先來看一下，頁面間傳值的一個經典例子，列表頁與明細頁之間的傳值，以下面二張圖所圖。在列表頁點擊評價曬單，進入評價曬單頁面，當用戶在該頁面完成操做後，列表頁對應的選項，相應地改成「已評價"。那麼這個是怎麼實現的呢？在這個案例裏面，使用的是 回調函數 ，咱們來看一下相關的代碼。

下面這段代碼，是列表頁的代碼，當用戶點擊」評價曬單「按鈕時，打開評價曬單詳細頁。關鍵點在於 evaluatePage['submited'] 這個回調函數。

 evaluate = (item) => {
        var evaluatePage = app.redirect('Shopping_ProductEvaluate', { orderDetailId: item.OrderDetailId, productImageUrl: item.ImageUrl });
        evaluatePage['submited'] = () => {
            item.Status('Evaluated');
        }
    }

 

下面這段代碼，是明細頁中的代碼，當用戶發表完評價，調用回函數。

submit = () => {
        var imageDatas = this.imageDatas().join(site.config.imageDataSpliter);
        var imageThumbs = this.imageThumbs().join(site.config.imageDataSpliter);
        var orderDetailId = this.orderDetailId();
        return account.evaluateProduct(orderDetailId, this.score(), this.evaluation(), this.anonymous(), imageDatas, imageThumbs)
            .done((data) => {
                if ((<any>this.page).submited)        //這裏就是調用列表頁設定的回調函數。
                    (<any>this.page).submited(data);

                app.back();
            });

    }

2、回調函數還全局變量？

回想咱們在上一篇文章《項目分享二：APP 小紅點中數字的處理》所說的，用的是全局變量，那麼何時應該用回調函數，而何時又該用全局變量呢？

回調函數：若是值只在兩個頁面之間發生關係，使用回調函數。

全局變量：若是值在多個頁面中用到，頁面傳遞的路徑是多層的，即 A頁面 -> B頁面 -> C頁面 -> D 頁面，而後在 D頁面修改。而且，還有可能在多個頁面中修改。這時候就要使用全局變量了。

例如：購物車中的商品數量，它在底部的工具欄，和產品頁面都有用到。

 

3、列表頁的刷新

從明細頁返回到列表頁，是否是還要把頁面再刷新一次呢？若是你這麼想，那就是傳 WEB 頁面的思考方式。這是一個 WEB APP，從列表頁到明細頁，其實列表頁並無關閉，只是隱藏而已已。所謂的返回到列表，是從新把頁面顯示出來。

把頁面從新顯示，數據總不能是舊的吧。可是，從新從服務端再獲取一次，確定不是個好辦法。因此就了上面咱們說的方案了。要理解這篇文章，仍是要有點 WEB APP 相關的知識。

 

整個項目源碼已託管在 GitHub 上，https://github.com/ansiboy/ChiTuStore，謝謝閱讀。

 

項目分享二：APP 小紅點中數字的處理

項目分享一：在項目中使用 IScroll 所碰到的那些坑