zeromvc

zeromvc 是一种轻量级mvc设计模式。是一种设计思路。不是全是一个框架。
主要意义在于分离视图表现代码、逻辑控制代码和数据处理代码。
解决在软件和游戏开发过程中，随着项目体量和参与人数的增加维护难度越来越难大的问题。

zeromvc 有以下特点

·使用TypeScript开发。
·仅仅只有两百多行代码。
·包含链表和事件。
·支持泛型，对已定义的事件进行智能提示。
·事件支持异步调用。
·说明比代码还要多。

View 视图

用于视图表现代码，
可以对引用到的模型数据进行绑定。
当视图在显示状态时，被绑定模型数据产出变化时会响应视图同名方法。
可以定义指命和指命参数类型。
可以发出已定义过的指命。
不能修改模型不能调用模型方法。

Control 控制器

用于逻辑控制代码。 可以接受来指定视图指命。 可以接受来指定控制器指命。 可以发出已定义过的指命。 引用模型并修改。

Model 模型

用于数据处理代码。 数据可被多个控制器和视图访问。 数据可被多个控制器修改。 数据被修改后变产生修改记录并在下次反应（16毫秒）通知视图。

设计方案

继承View、Control、Model的每一个类的实例都理解为一个节点。 每一个模块或逻辑都由一个或多个节点构成。 Model类的实例都以单例模式存在一个Zeromvc实例中。 Control类需要实例化 View类可多实例化 数据响应以同名法(可加前缀)进行调用。遵循协议大于配置 。 使用延迟反应让多次数据修改只产生一次事件通知。

响应关系

模型没有依赖关系 事件没有依赖关系 视图依赖模型和命令 控制器依赖模型和命令

响应流

视图 -> command -> 控制器 控制器 -> call -> 模型 模型 -> binding -> 视图

代码组织顺序

想要代码写的行云流水 代码组织顺序就很关键了 这很考验你是否遵守了限制 （模型 和 命令） ->视图->控制器

安装

yarn add zero-mvc 

或

npm i zero-mvc

起步

export class TestModel extends Model {
    MaxHp: number = 100
    hp: number = 100
}
export class TestView {
    view: View = new View()
    model = this.view.getModel(TestModel)
    constructor() {
        this.view.bind(this.model, this)
        this.view.show()
        this.view.emit("behurt", 5)
    }
    hp() {
        console.log(this.model.hp)
    }
}
export class TestControl extends Control {
    model = this.getModel(TestModel)
    constructor() {
        super()
        this.on("behurt", (value) => {
            console.log("TestView发生behurt事件,参数为" + value)
            this.model.hp -= value
        })
    }
}
new Zeromvc()
new TestControl()
new TestView()

视图

视图用new的方法来新建

export class TestView{
    view:View=new View()
    constructor(){
        this.view.show()
    }
}

发送命令

this.view.emit("behurt", 5)

控制器

控制器使用类的继承 先要新建一个控制器类

export class TestControl extends Control {
    constructor() {
        super()
    }
}

模型

export class TestModel extends Model {
    MaxHp: number = 100
    hp: number = 100
}

启动使用框架

new Zeromvc()

MVC框架限制

视图和视图不能互相引用调用 控制器和控制器不能互相引用调用 模型和模型不能互相引用调用 视图不能调用修改模型 视图不能引用控制器 控制器不能直接操作视图 建议控制器修改模型时通过调用模形的方法

这些限制你可能需要多写一些代码。 限制出规则，规则出秩序。秩序就是我们想要的

应用在CocosCreator 多场景

我们选择在第一个场景中初始化mvc

将包类文index.ts拷贝到Script/lib/下改命为Zeromvc.ts 新建模块文件Main.ts

    start() {
       new Zeromvc()
       new MainControl()
    }

MainUI.ts

const { ccclass, property } = cc._decorator;
@ccclass
export default class MainUI extends cc.Component {
    view: View=new View()
    start() {
    }
    btn() {
        this.view.emit("openBag")
    }
    protected onEnable(): void {
        this.view.show()
    }
    protected onDestroy(): void {
        this.view.hide()
    }
}

BagUI.ts

const { ccclass, property } = cc._decorator;
@ccclass
export default class BagUI extends cc.Component {

    @property(cc.Label)
    label: cc.Label = null;
    
    view = new View()
    mainModel: MainModel
    protected onLoad(): void {
        this.mainModel = this.view.getModel(MainModel)
        this.view.bind(this.mainModel, this)
        this.view.bind(this.mainModel, {
            money:()=>{
                this.label.string = this.mainModel.money.toString()
            }
        })
    }
    start() {
        console.log("________start_________")
    }
    btn() {
        this.view.emit(new AddMoney(20))
    }
    money() {
        this.label.string = this.mainModel.money.toString()
    }

    protected onEnable(): void {
        this.view.show()
    }
    protected onDestroy(): void {
        this.view.hide()
    }
}

需要两个场影分别挂两个脚本场景上

很多CocosCreator开发者更喜欢用单场景模式

应用在CocosCreator 单场景

等待更新

应用在CocosCreator+FairyGUI

等待更新