CCClass是Cocos Creator(以下簡(jiǎn)稱(chēng)CCC)中的基礎(chǔ)類(lèi)宣增,可以理解為CCC中的最小元數(shù)據(jù)才沧,只有聲明為CCClass才能被CCC所管理和使用娩脾。
CCClass是基于原型模式所創(chuàng)建籍琳,所以只需要在創(chuàng)建的時(shí)候傳入所需的類(lèi)型和參數(shù)即可
var Sprite = cc.Class({
name: "sprite"
});
CCClass的結(jié)構(gòu)為
cc.Class({
// 類(lèi)名辰妙,用于序列化
// 值類(lèi)型:String
name: "Character",
// 基類(lèi)压状,可以是任意創(chuàng)建好的 cc.Class
// 值類(lèi)型:Function
extends: cc.Component,
// 構(gòu)造函數(shù)
// 值類(lèi)型:Function
ctor: function () {},
// 屬性定義(方式一仆抵,直接定義)
properties: {
text: ""
},
// 屬性定義(方式二,使用 ES6 的箭頭函數(shù)种冬,詳見(jiàn)下文)
properties: () => ({
text: ""
}),
// 實(shí)例方法
print: function () {
cc.log(this.text);
},
// 靜態(tài)成員定義
// 值類(lèi)型:Object
statics: {
_count: 0,
getCount: function () {}
},
// 提供給 Component 的子類(lèi)專(zhuān)用的參數(shù)字段
// 值類(lèi)型:Object
editor: {
disallowMultiple: true
}
});
其中所有的參數(shù)都可以忽略镣丑,只需要按需傳入聲明即可。
構(gòu)造函數(shù)
CCClass中使用ctor來(lái)聲明構(gòu)造函數(shù)娱两,從編寫(xiě)習(xí)慣上來(lái)說(shuō)推薦在構(gòu)造函數(shù)中進(jìn)行所有的變量聲明(需要使用屬性檢查器傳入的組件不包括在內(nèi))莺匠,避免隨處聲明變量使代碼維護(hù)性和可讀性變差。
var Shape = cc.Class({
ctor: function () {
this.prop1 = "初始化一個(gè)屬性"
cc.log("Shape");
}
});
繼承
CCClass中使用extends來(lái)聲明繼承關(guān)系十兢,當(dāng)兩個(gè)CCClass屬于繼承關(guān)系時(shí)趣竣,CCClass會(huì)統(tǒng)一調(diào)用父構(gòu)造器并且逐級(jí)的調(diào)用到所有的子構(gòu)造器摇庙,因此不需要顯示的調(diào)用父構(gòu)造器來(lái)獲得一些繼承下來(lái)的屬性。
// 父類(lèi)
var Shape = cc.Class();
// 子類(lèi)
var Rect = cc.Class({
extends: Shape
});
var Shape = cc.Class({
ctor: function () {
cc.log("Shape"); // 實(shí)例化時(shí)遥缕,父構(gòu)造函數(shù)會(huì)自動(dòng)調(diào)用卫袒,
}
});
var Rect = cc.Class({
extends: Shape
});
var Square = cc.Class({
extends: Rect,
ctor: function () {
cc.log("Square"); // 再調(diào)用子構(gòu)造函數(shù)
}
});
var square = new Square();
//以上代碼將依次輸出 "Shape" 和 "Square"。
聲明屬性
CCC中提供一種可以在可視化開(kāi)發(fā)工具中快速調(diào)整的屬性聲明方式单匣,也就是屬性檢查器
夕凝;使用properties進(jìn)行聲明。
cc.Class({
extends: cc.Component,
properties: {
userID: 20,
userName: "Foobar"
}
});
這時(shí)候户秤,你可以在 屬性檢查器 中看到你剛剛定義的兩個(gè)屬性:
CCC中提供兩種聲明方式與Vue中的prop聲明類(lèi)似码秉,分別為簡(jiǎn)單聲明和完整聲明:
粗體
properties: {
height: 20, // number
type: "actor", // string
loaded: false, // boolean
target: null, // object
target: cc.Node, //聲明為CCClass類(lèi)型
pos: new cc.Vec2(10, 20), //聲明時(shí)直接實(shí)例化一個(gè)對(duì)象
any: [],//定義一個(gè)不限類(lèi)型的數(shù)組
bools: [cc.Boolean],//定義一個(gè)布爾類(lèi)型的數(shù)組
}
完整聲明
properties: {
score: {
default: 0,//默認(rèn)值
displayName: "Score (player)",//在可視化開(kāi)發(fā)界面中的名字
tooltip: "The score of player",//可視化界面的提示消息
visible:bool,//是否顯示在可視化界面中
serializable:bool,//是否序列化
type:type,//指定類(lèi)型
}
}
get/set聲明
properties: {
width: {
get: function () {
return this._width;
},
set: function (value) {
this._width = value;
}
}
}
屬性檢查器和構(gòu)造函數(shù)的區(qū)別在于,構(gòu)造函數(shù)聲明一定不會(huì)出現(xiàn)在可視化界面上鸡号,適用于完全不需要調(diào)試只會(huì)被代碼所影響的聲明转砖,屬性檢查器可以幫助快速的調(diào)試,并且提供了是否顯示在可視化界面的選項(xiàng)鲸伴。