cocosjs自动化绑定UI布局

Cocosjs自动化绑定UI布局

1. 非自动化绑定UI布局的代码使用方式
2. 自动化绑定的思想
3. 自动化绑定的规则约定
4. 自动化绑定功能的代码实现
5. 自动化绑定功能的使用

1. 非自动化绑定UI布局的代码使用方式

使用cocos2dx开发游戏的朋友（我们这里只说cocosjs），大部分都会使用到cocostudio进行UI界面的布局，负责UI界面模块的成员则在代码里使用ccs.load()把布局加载进来，再用ccui.helper.seekWidgetByName()将对应名称的控件实例取出来，再进行添加点击事件，设置属性等等操作，于是在代码中就可以看到大量的ccui.helper.seekWidgetByName()的代码。

这是常规的做法，有些朋友也可能将ccui.helper.seekWidgetByName()封装成一个简短的函数，这样代码看起来清爽一点，当然，这也是一个方法，不过同样避免不了诸如addTouchListener等等操作，同时，如果在cocostudio编辑器中增删控件，那么在代码中也得将对应的取控件的那行代码删掉，界面布局简单还好，如果是复杂的界面，那简直就是噩梦。

1. 自动化绑定的思想

2.1.自动绑定对象

根据动态语言的特性，我们可以从UI根节点遍历整棵节点树，取出节点并绑定到我们要绑定的对象上，如var house = {};var man = {}; man[“_house”] = house;这样就把house对象绑定到man对象中。

2.2自动绑定事件

通过遍历节点树我们可以得到所有的节点对象，但是cocos提供的控件中，注册事件的接口不一样，有的是addTouchListener，有的是addEventListener，没关系，我们通过instanceof区分出对象类型，根据不同的类型调用不同的接口就行了。

1. 自动化绑定的规则约定

3.1.控件的规则约定

大部分的情况下我们并不需要在代码中操作布局中的所有控件，我们无需将所有控件实例绑定到对象中，当然你也可以这么做，那么我们可以约定一个规则，将符合这个规则的控件实例绑定到对象中，最简单也最清晰的是约定控件命名，在cocostudio中将需要在代码中操作的控件的命名前加上下划线，如一个确定按钮的命名是_confirmButton，在自动化绑定的过程中，只要发现控件名称前面带下划线的就将该控件绑定到对象中。

3.2.事件的规则约定

控件需不需要绑定事件的前提该控件是否绑定到对象中，只有符合控件规则约定的控件才会绑定的对象中，我们以下划线+控件名（首字母大写）+onTouched做为事件的规则约定，如控件名为_confirmButton的事件名为_onConfirmButtonTouched，如果对象中有命名为_onConfirmButtonTouched的函数，我们就为_confirmButton注册事件。

1. 自动化绑定功能的代码实现

以下是基本思路，具体的代码和demo会更新到我的github上，需要的朋友可以看一下。

Github地址：https://github.com/malloyz/autoBindUI

（另外，多语言自适应布局可查看：https://github.com/malloyz/sortViewGroupTest）

加载UI布局得到根节点

使用一个函数递归遍历所有节点

如果节点命名是以下划线开头的，则绑定到对象中

如果节点命名是以下划线开头的，

将首字母变换为大写，检查对象中是否有符合事件规则约定的函数，

如果有，则判断控件的类型，调用对应的接口注册事件

1. 自动化绑定功能的使用

我将自动化绑定功能代码放在UIHelper.js中，

不使用自动化绑定UI布局，代码是这样的：

var rootJson = ccs.load(res.test);

var rootNode = rootJson.node;

this.addChild(rootNode);

this._confirmButton = ccui.helper.seekWidgetByName(“confirmButton”);

this._confirmButton.addTouchListener(this._onConfrimButtonTouched, this);

this._nameText = ccui.helper.seekWidgetByName(“nameText”);

......

使用自动化绑定UI布局，代码是这样的：

var rootNode = UIHelper.bindWidget(this, res.test);

this.addChild(rootNode);

绑定后可以直接对绑定的成员进行操作，如this._confirmButton.setVisiable(false);等等