【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也没有问题。