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

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

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

零、入口函數

一開始，我們需要加載ui到游戲中，然后我們訪問這個ui，在上面執行一系列操作，把結果對象返回出來。這個代碼的主干就是這個樣子。

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

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

一、改進子控件訪問方式

getChildByName 和 getChildById實在是很羅嗦的方式。因為UI控件本身就是個node，也是按照節點樹來組織的。所以，我們可以使用類似JSON的方式，首先遞歸把所有控件名字都綁定。然后逐個處理。偽代碼如下：

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

這樣就可以通過非常自然的"."方式訪問控件了，例如：

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

二、動態添加接口

動態添加接口，已經說過很多了，繼續偽碼：

首先，跟上面一樣，遞歸訪問所有子節點。

然后用分支代碼，判斷類型，為了嚴格包裝類型對應，我們使用JavaScript的構造器來判斷：

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

然后我在擴展函數里直接，對相應的child進行操作：

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

三、回調函數自動綁定

為了讓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也沒有問題。