cocos creator 组件封装

cocos creator 组件封装

第一次写原创，从零开始吧

• 使用cocos creator + redux 实现组件化开发
• 组件封装要求，组件内的功能封装到组件脚本中，暴露接口给外部场景使用
• 通常封装步骤
  :1，制作预制体，即UI
  :2，编写组件脚本
  :3, 暴露接口给外部场景使用

---

预制体

1
路径对应场景中数据；
次组件是一个header头，选项卡功能，item为子项，content为子项父节点

脚本代码片段

1， 初始化，设置图集，持有节点，定义外接口暴露
定义路径为场景中数据路径

properties: {
        //图集
        sprAtlas :{
            type: cc.SpriteAtlas,
            default: null
        },
        //节点
        item: {
            type: cc.Node,
            default: null
        },
        content: {
            type: cc.Node,
            default: null
        },
        // 外部持有 回调方法
        onSelectCb: null,

        _listItems: {
            type:[cc.Node],
            default:[],
        }
    },

2， 在周期函数中进行数据渲染，方法绑定，
shouldStateUpdate为定义的周期函数，inState之前数据状态,inNextState更新数据状态，
isEqual()对比状态是否改变，做出相应操作

shouldStateUpdate(inState,inNextState) {
        if(_.isEqual(inState, inNextState)) {
            return false;
        } else {
            var self = this;
            var count = (inNextState.tabs?inNextState.tabs.length: 0) - (inState.tabs?inState.tabs.length:0);
            if(count < 0) {
                for(var i = 0; i < -count; i++){
                    var tItem = this._listItems.pop();
                    tItem.destroy();
                }
            }else if(count > 0) {
                for(var i=0; i// 创建空节点 把整个list创建完成，再跟新数据
                    var tItem = cc.instantiate(this.item);
                    this._listItems.push(tItem);
                    tItem.parent = this.content;
                    tItem.active = true; 
                }
            }
            for(var i = 0; i < this._listItems.length; i++){
                var tItem = this._listItems[i];
                if(inNextState.index == i) {
                    // 设置选中效果
                    tItem.getComponent(cc.Sprite).spriteFrame = self.sprAtlas.getSpriteFrame('xuanzhong-biaoqianye');
                    tItem.getChildByName("name").color = new cc.Color(255,255,255);
                } else{
                    tItem.getComponent(cc.Sprite).spriteFrame = self.sprAtlas.getSpriteFrame('weixuanzhong-biaoqianye');
                    tItem.getChildByName("name").color = new cc.Color(102,204,255);
                }
                //绑定相应操作
                (function(inI){
                    tItem.off('click'); //清空所有绑定
                    tItem.on("click",function(){
                        self.onSelect(inI);
                    },self);
                })(i)
                var tName = tItem.getChildByName("name").getComponent(cc.Label);
                tName.string = inNextState.tabs[i].name;
                tItem.active = true;
                tItem.parent = self.content;
            }
        }
        return true;
    },

外部回调

在组件内定义的onSelectCb外部场景可持有他
预制体设置为场景节点的子节点,可通过childrenNode获取到，并定义内部函数，对应操作

var tTab = this.childrenNode[0].node.getComponent("headerTab");
        tTab.onSelectCb = function(i){
            cc.log(i)
        }

效果图 (选项卡可拖动，数据少，暂不演示)

总结

组件封装遵循 高内聚低耦合 内部操作封装到组建内，只给出相应的回调供外部使用，

第一次写，考虑不周，
错误的地方请指出，
邮箱[email protected]