【Cocos2d-Js基礎教學（7）界面UI更新方法（會用到第三方類庫）】

我們游戲中會遇到很多UI更新的時候，大部分時候我們會remove該節點，再重新繪制的方法來進行UI更新。

但是這種更新效率並不高，這里我推薦大家一個第三方的庫，來通過注冊更新的方式來對UI進行更新管理；

它的大名其實很響亮，就是“js-signals”。官方地址：http://www.bootcdn.cn/js-signals/

官方的定義是：Custom Event/Messaging system for JavaScript.（JavaScript自定義事件的消息傳遞系統。）

有興趣的同學可以繼續更深入的研究！

下面我們來使用這個第三方庫：

1，首先我們得下載這個最新的第三方庫（js-signals.js）然后拷貝到我們上節課的工程中的 BaseUtil文件夾中；

2，然后我們需要在創建一個UI刷新處理類，叫UpDataUIManager.js。

UpDataUIManager.js：

/** * Created by yangshengjiepro on 15/4/23. */
//全局事件名稱
var EVENT_UI_MAINTOP="maintop"; var EVENT_UI_MAIN_LISTVIEW="listview"; var UpdateUIManager=cc.Class.extend({ _pageManagers:null, init:function(){ this._pageManagers={}; }, /** * 添加事件監聽 * @param pageStr 標識在哪個page上(自定義的，不同page的pageStr不同) * @param func */ addPageUpdateListeners :function(pageStr,func,targetObj, multiple){ multiple = multiple || 0; if(!this._pageManagers[pageStr]){ this._pageManagers[pageStr]=new signals.Signal(); } if(!multiple){ this._pageManagers[pageStr].removeAll(); } this._pageManagers[pageStr].add(func,targetObj); }, removeListeners:function(pageStr){ if(this._pageManagers&&this._pageManagers[pageStr]) this._pageManagers[pageStr].removeAll(); }, /** * 根據pageStr分發pageStr指定的頁面的事件 * @param pageStr * @param params type json */ dispatch:function(pageStr,params){ if(this._pageManagers[pageStr]){ this._pageManagers[pageStr].dispatch(params); } } }); UpdateUIManager.s_SharedPageManager = null; UpdateUIManager.getInstance = function () { if (!UpdateUIManager.s_SharedPageManager) { UpdateUIManager.s_SharedPageManager = new UpdateUIManager(); UpdateUIManager.s_SharedPageManager.init(); } return UpdateUIManager.s_SharedPageManager; }; /////例子 // var TestLayer=cc.Layer.extend({ // init:function(){ // return true; // }, // refreshUI:function(data){

// }, // onEnter:function(){ // this._super(); // UpdateUIManager.getInstance().addPageUpdateListeners(EVENT_PAGE_MAINTOP,this.refreshUI,this);//綁定事件方法 // }, // onExit:function(){ // this._super(); // UpdateUIManager.getInstance().removeListeners(EVENT_PAGE_MAINTOP);//刪除事件方法 // } // });

// var TestLayer2=cc.Layer.extend({ // init:function(){ // var data; // UpdatePageManager.getInstance().dispatch(EVENT_PAGE_MAINTOP,data);//觸發事件方法 // return true; // } // });

分析一下我們這個類里面的4個方法：

1，addPageUpdateListeners :function(pageStr,func,targetObj, multiple)

這個是我們注冊監聽的方法，需要填寫我們的、刷新UI標識、具體刷新方法、一個Obj對象

2，removeListeners:function(pageStr)

直接可以移除該事件

3，dispatch:function(pageStr,params)

調用該事件，傳入標識，和需要傳遞使用的參數

 

在我們上節課中的MainLayer.js類里面繼續添加如下方法：

 

updataUI:function(public_mun){ if(this.lv_100!=null) { this.lv_100.setString("等級:"+public_mun); } if(this.lv_200!=null) { this.lv_200.setString("lv:999"); } }, onEnter:function(){ this._super(); UpdateUIManager.getInstance().addPageUpdateListeners(UPDATA_UI_BG,this.updataUI,this);//綁定事件方法
 }, onExit:function(){ this._super(); UpdateUIManager.getInstance().removeListeners(UPDATA_UI_BG);//刪除事件方法
    },

 

在onEnter，和onExit回調函數中分別去處理，注冊事件，和退出是移除事件的方法

 

我們通過按鈕事件，來觸發調用dispatch方法，來執行我們的UpDataUI刷新方法，並且傳遞

一個public_num變量整數；

 

touchEvent_MainButton:function(sender,type){ switch (type){ case ccui.Widget.TOUCH_ENDED: var tagnum = sender.getTag(); Mlog.c("touchEvent_MainButton tagnum >"+tagnum); UpdateUIManager.getInstance().dispatch(UPDATA_UI_BG,public_mun);//觸發事件方法
                break; default : break; } }

代碼寫完之后，我們還需要在project.json里面添加我們的兩個類UpDataUIManager.js和signals.js；

OK，我們整個刷新的業務邏輯已經書寫完畢了；Run起來看一下效果：

點擊音樂按鈕后

我們的等級變為，傳進來的2，Lv:變成了999,那么證明我們的UI異步刷新調用執行成功了！

OK本節知識點就到這里；

本節課源碼下載：

下載地址（百度雲盤）

源碼使用方法：

自己創建新工程，解壓下載的文件，將所有文件拷貝到你新工程的目錄下全部覆蓋既可以運行！