cocos creator中使用PureMvc框架(二)

cocos creator中使用PureMvc框架(二)

项目最终效果 https://github.com/kirikayakazuto/PureMvcDemo

继续我们上节的内容.

上节我们已经搭建好了环境配置, 这一节我们开始编写代码

首先带大家先了解一下PureMvc的三层结构对应的脚本

1, 层级管理视图

点击addNum按钮, 改变Label中的数值, 十分简单的案例

2, 资源管理视图

1. ApplicationFacade.ts 属于Facede类  继承Facade类的实现
2. DataCommand.ts    属于控制层  继承了puremvc.SimpleCommand类
3. DataMediator.ts 属于视图层 继承了puremvc.Mediator类

4. DataProxy.ts 属于模型层 继承了puremvc.Proxy类   MyData是数据对象(保存实际数据), 带DataProxy是数据的代理类(操作MyData中的值)

5. StartGame.ts 启动脚本 挂载在项目的跟节点下, 

好的, 正式进入编写

首先创建以上的6个脚本

Mydata.ts

/**
 * 模型层
 * 数据实体类
 */
export default class MyData {
    public Level: number = 0;
}

DataProxy.ts

import MyData from "./MyData"
/**
 * 模型层
 * 数据代理类
 */
export default class DataProxy extends puremvc.Proxy {
    public proxyName = "DataProxy";
    private MyData: MyData = null;
    private static instance: DataProxy = null;

    public static getInstance() {
        if(!this.instance) {
            this.instance = new DataProxy();
        }
        return this.instance;
    }

    constructor() {
        super();
        puremvc.Proxy.NAME = "DataProxy";
        this.MyData = new MyData();
    }

    public AddLevel(addNumber: number) {
        this.MyData.Level += addNumber;
        this.sendNotification("Msg_AddLevel", this.MyData);
    }
}

DataMediator.ts

import MyData from "./MyData"
export default class DataMediator extends puremvc.Mediator {
    public mediatorName = "DataMediator";
    private text: cc.Label;
    private btn : cc.Button;

    constructor(root: cc.Node) {
        super();
        this.text = root.getChildByName("label").getComponent(cc.Label);
        this.btn  = root.getChildByName("addNum").getComponent(cc.Button);

        this.btn.node.on('click', this.clickCallBack, this);
        
    }

    clickCallBack() {
        this.sendNotification("Reg_StartDataCommand");
    }

    public listNotificationInterests() {
        let list: Array<string> = [];
        list.push("Msg_AddLevel");
        return list;
    }

    public handleNotification(notification: puremvc.INotification) {
        switch(notification.getName()) {
            case "Msg_AddLevel": 
                let data: MyData = notification.getBody();
                this.text.string = "" + data.Level;
            break;
        }
    }

    
}

DataCommand.ts

import DataProxy from "./DataProxy"

/**
 * 控制层
 * 接收玩家的输入 或者 视图层发来的数据
 */
export default class DataCommand extends puremvc.SimpleCommand {
    
    public execute(notification: puremvc.INotification) {
        let dataPro = puremvc.Facade.getInstance().retrieveProxy(DataProxy.NAME) as DataProxy;
        dataPro.AddLevel(10);
    }
}

ApplicationFacade.ts

import DataCommand from "./DataCommand"
import DataMediator from "./DataMediator";
import DataProxy from "./DataProxy";
/**
 * pureMVC 框架Demo
 * facade 全局控制类
 */
export default class ApplicationFacade extends puremvc.Facade {
    public constructor(gameRoot: cc.Node) {
        super();
        this.registerCommand("Reg_StartDataCommand", DataCommand);
        this.registerMediator(new DataMediator(gameRoot));
        this.registerProxy(DataProxy.getInstance());
    } 
}

StartGame.ts

import ApplicationFacade from "./ApplicationFacade"
const {ccclass, property} = cc._decorator;

@ccclass
export class GameRoot extends cc.Component {


    start () {
        new ApplicationFacade(this.node); 
    }
}

最后将StartGame挂载到Canvas上

运行看看是否可以实现预期效果