Cocos Creator之MVC架構(gòu)
這一篇將介紹在游戲客戶端常用的架構(gòu)MVC架構(gòu)。一個(gè)游戲的MVC如下劃分：
M：1）單例全局的數(shù)據(jù)中心World，所有游戲模塊的數(shù)據(jù)在World中有入口，2）各個(gè)模塊自己的數(shù)據(jù)結(jié)構(gòu)。
V：1）通過creator預(yù)制體制作的UI界面、場景，2）各個(gè)界面顯示邏輯的ViewCtrl
C：1）全局的MainCtrl，2）各個(gè)模塊的業(yè)務(wù)邏輯類ModuleCtrl
先介紹M部分。由于一個(gè)模塊的數(shù)據(jù)，在其他模塊也有訪問的需求，例如好友模塊，在聊天的時(shí)候也需要訪問，在排行榜里需要訪問。數(shù)據(jù)應(yīng)該有一個(gè)單例全局的數(shù)據(jù)中心類World，所有游戲模塊的數(shù)據(jù)類在World中有入口。這些數(shù)據(jù)可以在玩家登錄后從服務(wù)器獲取并設(shè)置。
export class World {
private static instance: World = null;
private _test: TestData = null;
/**
* 單例模式
*/
private constructor() {
}
/**
* 獲取實(shí)例
*/
public static get inst(): World {
if (!World.instance) {
World.instance = new World();
}
return World.instance;
}
// FOR TEST
public set test(val: TestData) {
this._test = val;
}
public get test(): TestData {
return this._test;
}
}
這樣模塊間可以獨(dú)立設(shè)計(jì)自己的數(shù)據(jù)結(jié)構(gòu)，通過發(fā)送消息請求對應(yīng)模塊的ModuleCtrl更改，通過World讀取。
export class TestData {
private _text: string = null;
public constructor() {
}
public set text(val: string) {
this._text = val;
}
public get text(): string {
return this._text;
}
}
上一章介紹過消息分發(fā)。數(shù)據(jù)的更新時(shí)可以派發(fā)消息，界面可以監(jiān)聽消息做刷新。
下面介紹界面和腳本代碼的關(guān)聯(lián)。前面篇章中介紹過，cocos creator是基于組件模式。我將每個(gè)ui界面都做成一個(gè)預(yù)制體，每個(gè)預(yù)制體都可以添加一個(gè)腳本組件，用于控制這個(gè)界面的顯示邏輯。
在彈窗管理里提到我設(shè)計(jì)了一個(gè)繼承cc.Component的類叫ViewCtrl，所有界面的顯示邏輯類都繼承ViewCtrl，并添加到對應(yīng)的界面預(yù)制體。前面提到數(shù)據(jù)更新時(shí)會(huì)派發(fā)消息，ViewCtrl監(jiān)聽數(shù)據(jù)更新消息，刷新關(guān)聯(lián)的界面。
const {ccclass, property} = cc._decorator;
@ccclass
export default class TestViewCtrl extends ViewCtrl {
}
ViewCtrl只處理界面的顯示邏輯，不處理數(shù)據(jù)業(yè)務(wù)邏輯，模塊的數(shù)據(jù)業(yè)務(wù)邏輯由該模塊的ModuleCtrl處理。ViewCtrl響應(yīng)用戶操作，派發(fā)消息，ModuleCtrl監(jiān)聽消息處理。大部分模塊的ModuleCtrl主要做網(wǎng)絡(luò)通信，和對本模塊緩存數(shù)據(jù)的修改。
export class TestCtrl {
public constructor() {
}
public init(): void {}
public start(): void {
NotifyCenter.addListener(MSG_TEST_HTTP, (src: any, data: any) => {
this.testHttp();
}, this);
}
public testHttp(): void {
let data = {
mod: 1, // 模塊
cmd: 1, // 命令
}
let params: HttpReq = {
path: "",
method: HTTP_METHOD_GET
}
MainCtrl.inst.http.sendData(data, params, (data: NetData) => {
World.inst.test = new TestData();
World.inst.test.text = "123";
}, (code: number, reason: string) => {});
}
}
前面提到，C層還有一個(gè)全局單例的MainCtrl。該類主要負(fù)責(zé)模塊注冊、提供全局的操作接口（例如界面/場景的顯隱）、網(wǎng)絡(luò)通信處理。
更多資源請點(diǎn)擊：https://bycwedu.vipwan.cn/promotion_channels/630597732
