从零开始学习Cocos Creator（一）：CCClass

CCClass是Cocos Creator（以下简称CCC）中的基础类，可以理解为CCC中的最小元数据，只有声明为CCClass才能被CCC所管理和使用。
CCClass是基于原型模式所创建，所以只需要在创建的时候传入所需的类型和参数即可

var Sprite = cc.Class({
    name: "sprite"
});

CCClass的结构为

cc.Class({

    // 类名，用于序列化
    // 值类型：String
    name: "Character",

    // 基类，可以是任意创建好的 cc.Class
    // 值类型：Function
    extends: cc.Component,

    // 构造函数
    // 值类型：Function
    ctor: function () {},

    // 属性定义（方式一，直接定义）
    properties: {
        text: ""
    },

    // 属性定义（方式二，使用 ES6 的箭头函数，详见下文）
    properties: () => ({
        text: ""
    }),

    // 实例方法
    print: function () {
        cc.log(this.text);
    },

    // 静态成员定义
    // 值类型：Object
    statics: {
        _count: 0,
        getCount: function () {}
    },

    // 提供给 Component 的子类专用的参数字段
    // 值类型：Object
    editor: {
        disallowMultiple: true
    }
});

其中所有的参数都可以忽略，只需要按需传入声明即可。

构造函数

CCClass中使用ctor来声明构造函数，从编写习惯上来说推荐在构造函数中进行所有的变量声明（需要使用属性检查器传入的组件不包括在内），避免随处声明变量使代码维护性和可读性变差。

var Shape = cc.Class({
    ctor: function () {
        this.prop1 = "初始化一个属性"
        cc.log("Shape"); 
    }
});

继承

CCClass中使用extends来声明继承关系，当两个CCClass属于继承关系时，CCClass会统一调用父构造器并且逐级的调用到所有的子构造器，因此不需要显示的调用父构造器来获得一些继承下来的属性。

// 父类
var Shape = cc.Class();

// 子类
var Rect = cc.Class({
    extends: Shape
});

var Shape = cc.Class({
    ctor: function () {
        cc.log("Shape");    // 实例化时，父构造函数会自动调用，
    }
});

var Rect = cc.Class({
    extends: Shape
});

var Square = cc.Class({
    extends: Rect,
    ctor: function () {
        cc.log("Square");   // 再调用子构造函数
    }
});

var square = new Square();

//以上代码将依次输出 "Shape" 和 "Square"。

声明属性

CCC中提供一种可以在可视化开发工具中快速调整的属性声明方式，也就是属性检查器；使用properties进行声明。

cc.Class({
    extends: cc.Component,
    properties: {
        userID: 20,
        userName: "Foobar"
    }
});

这时候，你可以在 属性检查器 中看到你刚刚定义的两个属性：

image

CCC中提供两种声明方式与Vue中的prop声明类似，分别为简单声明和完整声明：
粗体

 properties: {
      height: 20,       // number
      type: "actor",    // string
      loaded: false,    // boolean                
      target: null,     // object
      target: cc.Node, //声明为CCClass类型
      pos: new cc.Vec2(10, 20), //声明时直接实例化一个对象
      any: [],//定义一个不限类型的数组
      bools: [cc.Boolean],//定义一个布尔类型的数组
  }

完整声明
properties: {
score: {
default: 0,//默认值
displayName: "Score (player)",//在可视化开发界面中的名字
tooltip: "The score of player",//可视化界面的提示消息
visible:bool,//是否显示在可视化界面中
serializable:bool,//是否序列化
type:type,//指定类型
}
}
get/set声明

properties: {
width: {
get: function () {
return this._width;
},
set: function (value) {
this._width = value;
}
}
}

属性检查器和构造函数的区别在于，构造函数声明一定不会出现在可视化界面上，适用于完全不需要调试只会被代码所影响的声明，属性检查器可以帮助快速的调试，并且提供了是否显示在可视化界面的选项。