cocos creator主程入門教程（七）—— MVC架構

五邑隐俠，本名關健昌，10年遊戲生涯，現隐居五邑。本系列文章以TypeScript為介紹語言。

這一篇将介紹在遊戲用戶端常用的架構MVC架構。一個遊戲的MVC如下劃分：

M：1）單例全局的資料中心World，所有遊戲子產品的資料在World中有入口，2）各個子產品自己的資料結構。

V：1）通過creator預制體制作的UI界面、場景，2）各個界面顯示邏輯的ViewCtrl

C：1）全局的MainCtrl，2）各個子產品的業務邏輯類ModuleCtrl

先介紹M部分。由于一個子產品的資料，在其他子產品也有通路的需求，例如好友子產品，在聊天的時候也需要通路，在排行榜裡需要通路。資料應該有一個單例全局的資料中心類World，所有遊戲子產品的資料類在World中有入口。這些資料可以在玩家登入後從伺服器擷取并設定。

export class World {
    private static instance: World = null;

    private _test: TestData = null;

    /**
     * 單例模式
     */
    private constructor() {

    }

    /**
     * 擷取執行個體
     */
    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;
    }
}
      

　　

這樣子產品間可以獨立設計自己的資料結構，通過發送消息請求對應子產品的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;
    }
}
      

上一章介紹過消息分發。資料的更新時可以派發消息，界面可以監聽消息做重新整理。

下面介紹界面和腳本代碼的關聯。前面篇章中介紹過，cocos creator是基于元件模式。我将每個ui界面都做成一個預制體，每個預制體都可以添加一個腳本元件，用于控制這個界面的顯示邏輯。

在彈窗管理裡提到我設計了一個繼承cc.Component的類叫ViewCtrl，所有界面的顯示邏輯類都繼承ViewCtrl，并添加到對應的界面預制體。前面提到資料更新時會派發消息，ViewCtrl監聽資料更新消息，重新整理關聯的界面。

const {ccclass, property} = cc._decorator;

@ccclass
export default class TestViewCtrl extends ViewCtrl {
}
      

ViewCtrl隻處理界面的顯示邏輯，不處理資料業務邏輯，子產品的資料業務邏輯由該子產品的ModuleCtrl處理。ViewCtrl響應使用者操作，派發消息，ModuleCtrl監聽消息處理。大部分子產品的ModuleCtrl主要做網絡通信，和對本子產品緩存資料的修改。

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層還有一個全局單例的MainCtrl。該類主要負責子產品注冊、提供全局的操作接口（例如界面/場景的顯隐）、網絡通信處理。

MVC架構先說到這裡，下一篇我們将介紹代碼組織。