前言

昨天写了一篇关于MVVM模式的文章，从理论层面解释了一些名词的含义和用法。有些人看了觉得不够直观，所以今天我继续上一篇的内容，从代码层面说明一下具体的用法。其实在游戏开发的过程中。很多东西都不是绝对的，在不同的情况下需要使用不同的方式。灵活多变。所以我这里也只是展示一种比较普通的用法。如果存在复杂的UI，controller可能会有多个，也可能不是单例。这个还需要开发者在开发的过程中自己灵活运用了。

目录说明

这里只放了两个模块，一个登陆，一个大厅。还有一个是用户数据

微信截图_20200526231557.png

1.Model。

/**
 * 这个类就是model的角色，负责数据的存档
 */
export default class PlayerModel extends EventDispatcher {

    private static ins: PlayerModel;

    static instance() {
        if (!this.ins) {
            this.ins = new PlayerModel()
        }
        return this.ins;
    }
    protected name: LocalValue;



    init(acount: string) {
        this.name = new LocalValue(acount + 'name', 'test')
    }

    setName(name: string) {
        this.name.setValue(name)
        //这里也可以做通知。需要的模块可以监听。
    }

    getName() {
        return this.name.getValue()
    }

}

登陆模块

1.控制器

/**
 * controller 
 */
export default class LoginController extends BaseController {

    private static ins: LoginController;

    static instance() {
        if (!this.ins) {
            this.ins = new LoginController()
        }
        return this.ins;
    }

    intoLayer() {
        this.pushView('prefabs/LoginView', 'LoginView', LoginManager.instance(), new ResLoader(), UIIndex.ROOT)
    }

    selectServerName(itemModel: LoginItemModel){
        LoginManager.instance().setServerName(itemModel)
    }

    gotoLobby() {
        LobbyController.instance().intoLayer()
    }

}

collection model

//这里相当于配置数据
let NAME_LIST: string[] = ['text1', 'test2', 'test3']
/**
 * collection model
 */
export default class LoginManager extends BaseModel {

    private static ins: LoginManager;

    static instance() {
        if (!this.ins) {
            this.ins = new LoginManager()
        }
        return this.ins;
    }

    constructor() {
        super();
        this.init()
    }

    protected items: LoginItemModel[] = []

    init() {
        for (let index = 0; index < NAME_LIST.length; index++) {
            const element = NAME_LIST[index];
            let item = new LoginItemModel()//使用二段构造可以放到对象池中重复利用。
            item.init(element)
            this.items.push(item)
        }
    }

    getItems() {
        return this.items;
    }

    getName() {
        return PlayerModel.instance().getName()
    }

    setServerName(itemModel: LoginItemModel) {
        PlayerModel.instance().setName(itemModel.getName())
        this.emit(LoginEventName.UPDATE_NAME)
    }
}

3 item model

/**
 * item model
 */
export default class LoginItemModel extends BaseItemModel {

    protected serverName: string;

    init(sName: string) {

        this.serverName = sName
    }

    getName() {
        return this.serverName;
    }

}

collection view

export default class LoginView extends BaseView {

    @property(cc.Prefab)
    itemView: cc.Prefab = null;

    @property(cc.ScrollView)
    scrollView: cc.ScrollView = null;

    @property(cc.Label)
    label: cc.Label = null;
    protected model: LoginManager;
    protected controller: LoginController;


    start() {
        let items = this.model.getItems()
        for (let index = 0; index < items.length; index++) {
            const itemModel = items[index];
            let node: cc.Node = cc.instantiate(this.itemView)
            
            // let comp:LoginItemView = this.controller.initView(node,'LoginItemView',itemModel) as LoginItemView;
            let comp: LoginItemView = node.getComponent(LoginItemView)
            if (comp) {
                comp.setModel(itemModel)
                comp.setController(this.controller)
                this.scrollView.content.addChild(node)
            }
        }
        //这里可以用eventProxy形式，框架已经封装，为了代码更直白，所以没有使用。
        this.model.on(LoginEventName.UPDATE_NAME, this.updateName, this)
    }

    onDestroy() {
        this.model.off(LoginEventName.UPDATE_NAME, this.updateName, this)
    }

    updateName() {
        this.label.string = this.model.getName()
    }

    onButtonEnterLobbyClick() {
        this.controller.gotoLobby()
    }

}

5 item view

export default class LoginItemView extends BaseView {

    @property(cc.Label)
    label: cc.Label = null;

    protected model: LoginItemModel
    protected controller: LoginController;

    start() {
        this.label.string = this.model.getName()
    }

    onButtonSelectClick() {
        this.controller.selectServerName(this.model)
    }


}

大厅模块

大厅模块并没有什么内容，只是为了配个跳转而制作的简单界面。
1.控制器

export default class LobbyController extends BaseController {

    private static ins: LobbyController;

    static instance() {
        if (!this.ins) {
            this.ins = new LobbyController()
        }
        return this.ins;
    }

    intoLayer() {
        this.pushView('prefabs/LobbyView', 'LobbyView', LobbyManager.instance(), new ResLoader(), UIIndex.ROOT)
    }

    gotoLogin() {
        LoginController.instance().intoLayer()
    }
}

2.collection view

export default class LobbyView extends BaseView {

    @property(cc.Label)
    label: cc.Label = null;

    //如果这是一个重复利用的类，model和controller最好声明为接口。
    protected model: LobbyManager
    protected controller: LobbyController;

    start() {
       
        this.label.string = this.model.getName()
    }

    onButtonBackClick() {
        this.controller.gotoLogin();
    }
}

collection model

/**
 * auth 游子陈
 */
export default class LobbyManager extends BaseModel {

    private static ins: LobbyManager;

    static instance() {
        if (!this.ins) {
            this.ins = new LobbyManager()
        }
        return this.ins;
    }

    getName() {
        return PlayerModel.instance().getName()
    }

}

结语

1.代码中用到的其他类在我的框架代码中，进入公众号，回复mvc即可获得。
2.希望有疑问或者有不同意见的同学给我留言，一起进步。
3.如果您对此类内容感兴趣，可以扫描下方二维码进入公众号阅读更多精彩内容。

qrcode_for_gh_a21947f7f8e0_258.jpg

MVVM的代码实现(附demo)

MVVM的代码实现(附demo)

前言

目录说明

登陆模块

大厅模块

结语