【cocos2d-x從c++到js】22：使用非侵入方式擴展UI系統接口的舉例

如何較好的運用腳本語言，使用他的動態性是關鍵。使用動態性來擴展代碼，能夠保證非侵入方式。這種方式，把原先的引擎代碼和當前本身的二次開發代碼隔離開了，便於後續的升級維護。並且，又不像繼承那麼重量級。

下面就如何用動態添加的擴展方式，使用非侵入來完善和加強CocoStudio的UI功能，作一舉例：

零、入口函數

一開始，咱們須要加載ui到遊戲中，而後咱們訪問這個ui，在上面執行一系列操做，把結果對象返回出來。這個代碼的主幹就是這個樣子。

var loadUI = function(filepath,owner){
    ui = ccs.GUIReader.getInstance().widgetFromJsonFile(filepath)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
    //一系列操做
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
    return ui;
}

在每次加載控件的時候，要使用這個額外擴展的函數，而不是那個引擎裏的自帶函數。這樣在ui加載完成以後，裏面全部的東西都已經自動處理好了，直接拿來用就好了。

1、改進子控件訪問方式

getChildByName 和 getChildById實在是很羅嗦的方式。由於UI控件自己就是個node，也是按照節點樹來組織的。因此，咱們可使用相似JSON的方式，首先遞歸把全部控件名字都綁定。而後逐個處理。僞代碼以下：

綁定名字(node,owner){
  子節點數組 = node.getChildren()
  遍歷子節點數組：｛
     名字key = childNode.getName()
     node[名字key]=childNode
     綁定名字(childNode)
  ｝
}

這樣就能夠經過很是天然的"."方式訪問控件了，例如：

曾祖父控件.祖父控件.父控件.子控件.xxxxx函數()

2、動態添加接口

動態添加接口，已經說過不少了，繼續僞碼：

首先，跟上面同樣，遞歸訪問全部子節點。

而後用分支代碼，判斷類型，爲了嚴格包裝類型對應，咱們使用JavaScript的構造器來判斷：

if（child.constructor == 按鈕）
    按鈕節點的擴展函數(child)
else if(child.constructor == 文本框)
    文本框節點的擴展函數(child)
//……其餘節點類型

而後我在擴展函數裏直接，對相應的child進行操做：

按鈕節點的擴展函數(child){
    child.log=function(){
        log("調用log函數成功")
    }
}

3、回調函數自動綁定

爲了讓UI系統支持自動綁定回調函數，咱們可使用一種特殊的方法。還記得CocosBuilder裏面的owner麼。

咱們在owner上預製幾個方法，而後根據節點名字和回調函數類型，直接拼出來。以按鈕舉例：

owner.touchEventListener_按鈕名字 = function(sender, type){
    switch(type){
        case ccui.Widget.TOUCH_BAGAN:
            log("按鈕名字 TOUCH_BAGAN")
        case ccui.Widget.TOUCH_MOVED:
            log("按鈕名字 TOUCH_MOVED")
        case ccui.Widget.TOUCH_ENDED:
            log("按鈕名字 TOUCH_ENDED")
        case ccui.Widget.TOUCH_CANCELED:
            log("按鈕名字 TOUCH_CANCELED")
    }
}

由於JavaScript的缺陷，不能拿到當前控件的類型名。還好CocoStudio提供了一個getDescription()接口，裏面可以返回一個可用的類型名。而後咱們使用拼接方式綁定他：

按鈕名字 = child.getName()
fnName = "touchEventListener_" + 按鈕名字
child["addEventListener"+child.getDescription()](owner[fnName],owner)

另外，owner最好使用代碼生成器作出來，這樣能夠作到全自動化了。

最後

上面這些寫法，適用於任何腳本語言，JS能用，lua也沒有問題。