zero-mvc/README.md

zeromvc是一种mvc设计模式。主要意义在于分离视图代码、逻辑代码和数据处理代码。

# 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
等待更新