实现feture: issue#8 记录操作并在游戏结束显示rpm图#9
Open
qiuhuadong2015 wants to merge 6 commits into
Open
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
meathill
requested changes
Apr 9, 2025
meathill
left a comment
meathill
left a comment
Owner
There was a problem hiding this comment.
- 图表组件作为非核心功能，应该使用动态加载，避免影响第一次打开的速度。
| import GridItem from './grid-item.vue'; | ||
| import {Levels} from './data'; | ||
|
|
||
| import { recordAction, renderChart,calculateRPM,userActions,showChart,rpm } from './data/rpm'; |
| @open-all="onOpenAll(item, index)" | ||
| /> | ||
| </div> | ||
| <div v-if="showChart" class="rpm-chart-container mt-8 mx-auto" style="max-width: 800px;height: 400px;"> |
| /> | ||
| </div> | ||
| <div v-if="showChart" class="rpm-chart-container mt-8 mx-auto" style="max-width: 800px;height: 400px;"> | ||
| <canvas id="rpmChart"></canvas> |
meathill
requested changes
Apr 10, 2025
meathill
left a comment
meathill
left a comment
Owner
There was a problem hiding this comment.
你的理解不对。应该是游戏结束后，该显示图表的时候，用异步加载的方式加载组件并渲染。异步组件是不够的。
Owner
|
PR 应该包含：
请补充。 |
meathill
requested changes
Apr 12, 2025
| const RpmChart = defineAsyncComponent(() => | ||
| import('./components/rpm-chart.vue') | ||
| ) | ||
| import {recordAction, actionType} from './components/rpm-chart.vue'; |
Owner
There was a problem hiding this comment.
别的没细看，你这样的引用仍然是静态引用，会导致组件被打包到一起加载。麻烦再看看文档，问问 AI，怎么动态加载组件。我应该也有个视频讲过这个，但是暂时忘记是哪个了，不好意思……
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
待解决问题
技术选型
采用简单的chart.js绘制曲线图，依赖比较小，使用可以比较轻便
备选项echarts社区资源更丰富，功能也更强大，但依赖的js也会更多，影响加载速度，适合复杂功能，目前功能要求简单因此暂不考虑
实施细节
实现思路是在每一种操作的处理函数中加入一个函数调用记录该操作，存储到一个列表中，再由一个函数计算成chart.js所需要的数据格式，最后渲染曲线图
为了最小限度影响到原有代码，记录函数放在App.vue的几个onXXX函数中被调用，不破坏已封装的grid-item组件（不适合放在里面）
图表封装成一个vue组件以保持单一职责。因为用vue不多还在熟悉其特性，封装该vue组件时参考了grid-item写法
一开始还没有深入看实现细节，只是从名字快速猜测意思（后面带来了bug），把onXXX当成了几种点击操作，所以在onOpen,onOpenAll,OnFlag中添加记录函数
测试后发现操作数不对，onOpen并非点一次调用一次，onOpenAll也并非点一次打开多个的处理，深入查看几个函数的逻辑才发现打开一个和打开多个都是onOpen处理，存在递归，会重复记录。因此尝试调整onOpen的封装（onOpen改名openGird），外嵌一层命名onOpen，使其意义是点击的处理。但原来的onOpen()和grid-item的open()其实存在双向的循环调用，修改中丢失了一个调用，测试胜利模式有bug发现该问题，修复的话对原代码要进一步修改，在这里意识到，不应该围绕onOpen处理，于是先还原这部分代码。最后给item的onClick()新增了一个emit('click')提供App.vue用于记录点击操作。
关于组件动态加载，起初在vue文档中只看到动态组件用defineAsyncComponent，所以用了defineAsyncComponent，但review反馈这样不够，找资料结合vue文档又发现v-if可以实现在条件满足时才加载。所以又改回用v-if尝试，去观察js的加载时期，发现单独用defineAsyncComponent，还是单独用v-if，组件都会在首页打开时被下载。后面安排继续实验查看devtools加载js时机才发现，vite在build的时候拆分组件为独立js文件的条件是用defineAsyncComponent，渲染时才下载这个独立js的条件是用v-if，所以两个条件同时具备才能实现首页加载js文件变小的效果。
效果
以下为最新优化后的效果，支持1分钟内以5s为单位，1分钟以上才以1m为统计单位：
以下为异步加载的效果，rpm-chart组件及70+k的chartjs在首页打开时不会下载：