原来是全局碰撞惹的祸

This commit is contained in:
pan@work
2024-07-31 10:48:42 +08:00
parent df8b52264e
commit 9aa9806b62
38 changed files with 1640 additions and 313 deletions

51
doc/mvvm/MvvmInfo.md Normal file
View File

@@ -0,0 +1,51 @@
### 原创作者上有2.x的DEMO
Github 地址: https://github.com/wsssheep/cocos_creator_mvvm_tools
### 项目结构
核心脚本文件存放在 assets\Script\modelView 路径,要使用必须全部引入
- **JsonOb.ts** - 实现基础的 观察者模式, 改变绑定的数据会自动调用回调函数。你可以随时替换成自己写的观察者。
- **ViewModel.ts** - VM的核心模块动态管理ViewModel使用 cc.director.emit 通知 游戏内的节点组件改变状态。
- **VMBase.ts** - VM监听核心组件用于接收ViewModel 的数值变动消息。VMCustom /VMEvent 之类的衍生组件都是继承自VMBase
- **VMParent.ts** - VM父组件适合 多实例的 prefab 弹窗使用, 它将数据绑定在继承 VMparent 的组件上,只属于此次创建的实例。 需要以特殊方式继承使用。
****
### 组件简介
- `VMCustom` — 挂载VMCustom然后会自动识别当前节点的组件(也可以自行设置)。填上你的数值路径,大功告成。
- `VMLabel` — 挂在VMLabel ,不用担心你的数值是整是零,使用模板语法 {{0:int}}自动格式化,解决文本数据显示的问题
- `VMState` — 解决节点状态的切换问题
- `VMProgress` — 解决进度条显示问题
- `VMEvent `—挂载VMEventCall, 触发事件。在值变化时调用其他组件方法(结合其他组件使用事半功倍)
- `VMParent` — 定义局部范围使用 的 ViewModel数据
定义数据模型: `VM.add(data,"tag")`
一直被 cc.find、getChildByNamegetComponent 所以一直想要整理个好的方案。部分参考了Vue(OS:假装参考了) 以适合 Creator 组件化的方式引入 MVVM。你甚至可以不写一行代码就完成大部分的复杂的UI逻辑非常适合高强度的细节修改 (os:让策划自己改去)。
这套工具核心在于提供的组件集合而不是Mvvm本身。使用的是低耦合度的组件脚本来控制数值监听的绑定侵入性较低。
****
### 用法说明
- **导入框架** - 导入 assets\Script\modelView 中的所有脚本
- **建立数据模型** - 任意位置新建一个数据脚本,定义自己的数据模型,使用`VM.add(data,'tag')` 添加viewModel。 可以通过VM直接管理该数据或者自己全局管理 data 数据模型。
- **挂脚本** - 编辑器中直接添加组件 VMCustom 它会自动识别绑定到需要设置值的组件和组件的属性比如cc.Label、cc.Progress等。 你只要填写对应的watchPath, 就会自动赋值到组件的属性上。比如填写 global.play.hp ,就会在游戏运行时赋值给绑定的组件属性。
- **改数据** - 在游戏中任意改变 global.play.hp的值对应的label 就会自动改变数值。
- **全局注册VM**: (全局自由使用路径) VM.add(data,'tag'); //
- **局部组件使用VM**: (只在组件内使用的相对路径)
1.继承VMParent 组件
2.在组件内设置 data 数据data属性
3.相对路径 使用 *.name 的方式设置 watchPath,VMParent 会在 onLoad 的时候自动将 * 替换成 实际的 ViewModel 标签,以便监听数据变化。
****

39
doc/mvvm/VMBase.md Normal file
View File

@@ -0,0 +1,39 @@
## VM Base
### 介绍
VM基础组件只实现了数据绑定, 需要被继承使用。你可以通过继承VM Base来实现自己的VM组件。当然一般情况下使用这个工具所提供的其他组件脚本就够用了。
### 脚本属性
- `watchPath` - 需要监听的路径,你在VM怎么定义的结构就在这里写上取值的路径。
比如global 标签的 viewModel 要取值player.atk, 就是gloabl.player.atk。
- `watchPathArr` - 需要监听的多路径 数组, 和上面一样,不过需要监听的是一个路径的数组。
- `templateMode` - 模板模式(多路径模式),启用后才能监听 watchPathArr 数组中的所有路径
- `templateValueArr` - 缓存监听路径的值,当监听某个路径的值发生变动时,会自动更新该数组中缓存的值。一般不需要考虑使用。
- `VM` - VMManager 对象的引用参考ViewModel 的说明
- `onLoad()` - 提前拆分、并且解析 监听的路径,可以捕获一些错误
**如果需要重写onLoad 方法**,请根据顺序调用 **super.onLoad()**,执行默认方法。直接覆盖将会导致函数的功能丢失。
- `onEnable()` - 激活节点时,更新对象初始值,同时开启对 watchPath 的监听。
**可重写**,重写时需要调用 super.onEnable() 处理父方法
- `onDisable()`- 关闭节点时,关闭对 watchPath 的监听。
**可重写**,重写时需要调用 super.onDisable() 处理父方法
- `onValueInit()`- 初始化值时调用函数
虚方法,可以直接被重写。
- `onValueChanged(newValue,oldValue,pathArray)` - 当值改变时调用函数
虚方法,可以直接被重写。

31
doc/mvvm/VMCompsEdit.md Normal file
View File

@@ -0,0 +1,31 @@
## VM Component Edit
### 介绍
VM组件编辑提供一些基础的功能。可以搜索当前节点下的 组件内容,便于查询出被绑定的节点,方便调试信息。
### 编辑器属性
- `Find List` - 需要查询的组件名称
- `Action Type` - 操作行为
`SEARCH_COMPONENT` - 查询组件
`ENABLE_COMPONENT` - 激活关闭组件
`REPLACE_WATCH_PATH` - 替换组件路径
`DELETE_COMPONENT` - 删除所有匹配组件
- `Trigger` - 勾选框就会立刻执行对应的命令, 不同模式下Trigger名称不同
- `Can Collect Nodes` - 将节点收集起来 放在 Collect Nodes 中Action Type 为 SEARCH_COMPONENT 类型时 才能使用
- `Target Path` - 准备搜索的目标路径Action Type 为 REPLACE_WATCH_PATH 时可用
- `Replace Path` - 准备替换的路径值Action Type 为 REPLACE_WATCH_PATH 时可用
### 手动编辑器
在层级管理器中 搜索 t:VMBase 也可以查询到所有VM组件的节点然后你可以进行手动的管理操作

17
doc/mvvm/VMCustom.md Normal file
View File

@@ -0,0 +1,17 @@
## VM Custom
### 介绍
VM组件自定义, 可以设置需要监听的 组件名称和组件属性,并且挂载时还能自动识别组件名。比较泛用。适合任意的自制组件。(如果想自动识别自己写的组件名,可以修改脚本配置内容)。
### 编辑器属性
- `Controller` - 激活controller,以开启双向绑定,否则只能接收消息
- `Watch Path` - 绑定数值监听路径
- `Component Name` - 绑定组件的名字 (会根据脚本配置自动识别)
- `Component Property` - 绑定组件上需要监听的属性 (会根据脚本配置自动识别)
- `refreshRate` - 刷新间隔频率 (只影响脏检查的频率) controller开启后生效

22
doc/mvvm/VMEvent.md Normal file
View File

@@ -0,0 +1,22 @@
## VM Event
### 介绍
VM组件事件监听watchPath 路径 数值的变动情况调用回调函数。可以同时监听复数路径的值。适合需要自己处理数值变化行为的场合。比如获得1金币想让数字闪烁一下有了VMEvent ,你就不用手动去让数字闪烁了。可以在编辑器中直接设置回调,来触发别的组件的函数。
### 编辑器属性
- `Template Mode` - 多路径模板模式,开启后可以监听多路径
- `Watch Path ` - 绑定数值监听路径
- `Watch PathArr` - 绑定数值监听的路径数组 (多路径模板模式开启后出现)
- `Component Name` - 绑定组件的名字 (会根据脚本配置自动识别)
- `Component Property` - 绑定组件上需要监听的属性 (会根据脚本配置自动识别)
- `Trigger Once` - 事件通知只传递一次,然后自动 disabled 该组件
- `Filter Mode` - 根据条件过滤通知事件,比如 当值>=30 才会通知事件去调用 Change Events
- `Change Events` - 值路径改变事件,和按钮回调事件类似 在编辑器里绑定对应要执行的节点函数

34
doc/mvvm/VMLabel.md Normal file
View File

@@ -0,0 +1,34 @@
## VM Label
### 介绍
VM组件文本监听用于处理 Label 的监听问题。监听watchPath 路径 数值的变动情况变动Label文本内容。使用模板模式还可以将输入的字符串格式化。可以监听多路径来同时在一个label上显示多个数据源的信息。
### 编辑器属性
- `Template Mode` - 多路径模板模式,开启后可以监听多路径,并且可以设置文本模板
- `Watch Path ` - 绑定数值监听路径
- `Watch PathArr` - 绑定数值监听的路径数组 (多路径模板模式开启后出现)
- `Label Type` - 只读属性自动绑定cc.Label 或者 cc.RichText你可以在脚本修改自己定义的Label
### 关于模板解析
使用 {{0}} {{1}} {{2}} 方式设置模板内容设置label 的 String 默认值。在运行时会动态的获取多路径监听的值按数组内index 顺序替换掉 {{index}}。你可以额外添加修饰符号来格式化信息源,比如 {{0:int}} 会将数字内容以整数显示,{{0:time}} 以时间格式显示时间戳 等。
以下是目前支持的格式化内容:
- `int` - 只显示整数部分
- `fix(n)` -显示小数位数
- `kmbt` - 以 K M B T 单位 缩短数字长度
- `per ` - 显示百分比
- `sep` - 以千位分号分割数字
- `limit(n)` - 限制文本字符长度
### 自定义模板格式
所有 文本格式处理 都放在 StringFormat 类中,你可以根据自定义需要修改其中的函数。

29
doc/mvvm/VMModify.md Normal file
View File

@@ -0,0 +1,29 @@
## VM Modify
### 介绍
VM组件 修改数据,修改指定 路径 watchPath 的 数据。一般配合 cc.Button 组件使用,可以点击按钮后直接修改指定路径的值。
### 编辑器属性
- `Watch Path ` - 绑定数值监听路径
- `Value Clamp` - 是否限制数字的修改范围
- `Value Min` - 限制最小值不低于
- `Value Min` - 限制最大值不高于
### 使用方式
类似 Click Events 的设置调用节点上组件的方法, 去调用VMModify 组件上的对应函数,就可以修改 watch Path 监听的 路径的值。
- `vAddInt` - 增加整数
- `vSubInt` - 减少整数
- `vMulInt` - 乘以整数
- `vDivInt` - 除以整数
- `vAdd` - 增加浮点数
- `vSub` - 减少浮点数
- `vMul` - 乘以浮点数
- `vDiv` - 除以浮点数
- `vString` - 设置字符串
- `vNumberInt` - 设置 整数
- `vNumber` - 设置 浮点数

23
doc/mvvm/VMParent.md Normal file
View File

@@ -0,0 +1,23 @@
## VM Parent
### 介绍
如果你想要让你的组件具有 动态监听数据的能力,需要继承 VMParent 使用。监听的数据类型为组件实例自身所有,是局部的数据而非全局数据。
### 属性
`data` - 定义需要绑定的数据类型,只在该组件内有效。定义后,这些数据就会被自动绑定。
`onBind()` - 数据绑定完成后调用该方法
`onUnBind()` - 数据绑定解除之前调用该方法
`tag` - 绑定的标签可以通过这个tag 获取 当前的 vm 实例
`VM` - VM 管理对象,可以使用该对象获取值路径
### 注意事项
- 如果你不清楚继承机制,不要随意覆盖 onLoad() 事件,请使用 onBind() 函数代替 onLoad() 函数, onUnBind() 函数代替 onDestroy() 函数。如果你熟悉可以使用super.onLoad() 的方式 调用父方法
- 不要过多的嵌套使用VMParent, 在绑定时可能会影响一点性能

14
doc/mvvm/VMProgress.md Normal file
View File

@@ -0,0 +1,14 @@
## VM Progress
### 介绍
VM组件 进度条设置,适合任意的进度条组件,比如 ProgressBarcc.Slider 等。接受两个watchPath 的值,最后会将变动结果反映在 progress 属性上。使用方式和 VM Custom 组件一致。
### 编辑器属性
- `Controller` - 激活controller,以开启双向绑定,否则只能接收消息
- `Watch Path Arr` - 绑定数值监听路径数组,注意你必须设置一个 长度为 2 的数组,第一个值是最小值,第二个值是最大值,这样才会正确的计算出 progres 属性
- `Component Name` - 绑定组件的名字 (会根据脚本配置自动识别)
- `Component Property` - 绑定组件上需要监听的属性 (会根据脚本配置自动识别)
- `refreshRate` - 刷新间隔频率 (只影响脏检查的频率) controller开启后生效

42
doc/mvvm/VMState.md Normal file
View File

@@ -0,0 +1,42 @@
## VM State
### 介绍
VM组件 状态条件根据watchPath 路径,判断值是不是符合条件,再设置对应节点的状态。 可以根据数据改变节点的颜色,节点的激活与关闭等等情况。
### 编辑器属性
- `Watch Path ` - 绑定数值监听路径
- `Foreach Child Mode` - 特殊的比较值的方式,它会拿当前节点下的所有子节点的名字作为值的比较,来控制所有子节点的显示状态。
- `Foreach Child Type` - `NODE_INDEX` 比较节点的index 值 或者 `NODE_NAME` 比较节点的名字
- `Condition` - 判断条件,判断值的的大小是否符合条件
- `Value Action`- 效果行为,当状态满足时候执行的条件
- `Watch Nodes` - 需要变化状态的节点,如果不设置,默认就会改变本节点以及子节点的所有状态。
### 效果行为
- `NODE_ACTIVE` - 改变节点的激活状态(挂载到本节点无效)
- `NODE_VISIBLE` - 改变节点的显示状态(不透明度切换) ,挂载到本节点有效,只影响显示。
- `NODE_OPACITY` - 改变节点的不透明度
`Action Opacity` - 设置 不透明的值
- `NODE_COLOR` - 改变节点的颜色
`Action Color` - 设置颜色的值
- `COMPONENT_CUSTOM` - 完全自定义改变组件属性
`Component Name` - 组件名
`Component Property` - 组件上的属性
`Default Value` - 默认值
`Action Value` - 满足条件改变的值
### 注意事项
NODE_ACTIVE 条件 不会改变自身节点的 激活状态

107
doc/mvvm/ViewModelScript.md Normal file
View File

@@ -0,0 +1,107 @@
## View Model Script
### 介绍
View Model 的脚本用法
### 方法
VM是 VMManager 的实例, 用于管理所有的 ViewModel 实例。ViewModel实例 主要用于实现数据的双向绑定,内部使用了 cc.director.emit 方法 来发送数据变动的消息,在使用时你可以不用关注于这些细节。
我们可以通过 import VMVMManager 对象 来管理 所有的 ViewModel **不建议**直接去使用 ViewModel 实例。
```typescript
//TS 使用 import 引入
import { VM } from './ViewModel';
//JS 可以使用 require 的方式引入,其他用法没有区别
const { VM } = require('./ViewModel');
```
- `add` - 创建并且添加一个 ViewModel 对象
``` typescript
VM.add(data,tag);
//data - 你想要进行 绑定 的数据对象
//tag - 该数据对象的索引标签,用于之后获取该 ViewModel 对象
```
- `get` - 获取
```typescript
let vm = VM.get(tag);//获取的结果是一个 ViewModel 对象
let data = vm.$data; //获取 vm 绑定的 data 对象
vm.active = false; // 关闭 vm 的数据通知功能
```
- `remove` - 移除
```typescript
VM.remove(tag);//移除一个指定 tag 的 ViewModel 对象
```
- `setValue` - 设置一个值以tag开头的全局路径
```typescript
VM.setValue('global.player.name','wss');
//注意 global 是 ViewModel 的标签player.name 是 ViewModel 内部的取值路径
//使用 VM 全局管理,必须按这种全局路径的方式设置值
```
- `addValue` - 累加一个值以tag开头的全局路径
```typescript
VM.addValue('global.player.hp',10);
```
- `getValue` - 获取一个值以tag开头的全局路径
```typescript
VM.getValue('global.player.name',default);//default 是 默认值
```
- `setObjValue` - 以路径的形式 设置 一个 对象的值
- `getObjValue` - 以路径的形式 获取 一个 对象的值
- `bindPath` - 绑定需要监听的路径
- `unbindPath` - 取消绑定需要监听的路径
- `active` - 激活 数值变动的事件通知
- `inactive` - 关闭 数值变动的事件通知
### 例子
```typescript
import { VM } from './ViewModel';
//构建数据对象
let data = {
name:'user',
gold:12200,
info:{
id:0
}
}
//创建 VM 对象,并且添加到 VMManager 来进行管理, 标记为 'user' 标签
VM.add(data,'user');
//通过 'user' 标签获取一个 ViewModel 的实例
let vm = VM.get('user');
vm.$data; // vm.$data === data;
//设置新的属性值
vm.setValue('name','new Name');
//获取属性
vm.getValue('gold');
//通过相对路径获取属性
vm.getValue('info.id');
//一旦修改值,将会通知 cc.director, 使用emit 发送消息
data.name = 'my_name';
//关闭激活状态后,就不会通知 cc.director 传递信息了
vm.active = false;
//移除ViewModel并且释放 data 的引用
VM.remove('user');
data = null
```