From b64e61f5d5db698bcddc3efcad898a52fb8cb328 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AE=80=E9=9A=90?= Date: Thu, 18 Jan 2024 09:26:41 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E9=A1=B9=E7=9B=AE?= =?UTF-8?q?=E9=80=BB=E8=BE=91=E6=96=87=E6=A1=A3=E4=BB=A5=E5=8F=8A=E5=A4=8D?= =?UTF-8?q?=E7=9B=98=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 116 +++++++++++++++++++++++++++++++++--------------------- 1 file changed, 71 insertions(+), 45 deletions(-) diff --git a/README.md b/README.md index 69d9cfb..1b4ab4a 100644 --- a/README.md +++ b/README.md @@ -1,72 +1,67 @@ # 项目简介 +## 功能简介 + +1. 支持符合需求的词典和单词本导入 +2. 支持切换词典和单词本 +3. 支持跳转到可选的词典源 +4. 支持选择每日背诵单词个数 +5. 支持切换学习、复习模式 +6. 支持切换简单(仅发音和解释)、复杂模式 +7. 支持选择需展示的单词解释项目 +8. 支持左右侧双击、左右箭头键切换上一个、下一个单词 +9. 支持单词查询 +10. 支持查看该单词本可背诵的单词数量情况 +11. 支持分页查看今日背诵、历史背诵、不可背诵的单词列表 +12. 支持分页查看今日背诵、历史背诵、单词本、词典的单词详情列表 + ## 核心逻辑 ### hooks/useVoca.js -``` -核心:获取随机单词(从:) - - 数据库(数据加载前奏): - 今日学习数据today-studied-voca,频繁读取,再次临时存储 - 历史学习数据studied-voca, - 总数据(若干):已选择的数据源table - 总范围(若干):已选择的单词本(范围)range - - 首次进入(重加载): - 1. 学习模式 - 1. 查看今日学习数据是否有值,非今日数据-清空-临时存储为空,今日数据-临时存储 - 2. 查看设置目标数量是否学习完成,完成-进入【学习模式下的复习模式】 - 3. 获取能够学习的单词 = (范围 in 数据源)- 历史学习数据 - 今日学习数据 - 4-🚩. 随机单词 = (能够学习的单词 in 数据源) - 2. 学习模式下的复习模式(未开启复习模式,已完成学习目标) - 1. 获取能够学习的单词 = 今日学习数据 in 临时存储 - 2-🚩. 随机单词 = (能够学习的单词 in 数据源) - 3. 复习模式 - 1. 获取能够学习的单词 = (能够学习的单词 in 能够学习的单词) - 2-🚩. 随机单词 = (能够学习的单词 in 数据源) - 程序运行中: - 1. 学习模式-切换单词: - 1-🚩. 随机单词 = (能够学习的单词 in 数据源) - - 🚩后的动作: - 1. 查询随机单词是否在历史学习数据&今日学习数据中,若在-更新该数据,否则-增加该数据 - 2. 更新今日学习数据的临时存储 +定义:该hook是展示单词的主要功能逻辑 -``` +设计思路: -## 待做功能 +1. 确定触发单词更新的时机:首次加载、设置页面关闭时 +2. 确定触发是否完成今日单词个数的时机:页面初始渲染、推送更新当前单词时、切换单词学习个数时 + +### filterBFromA、delBFromA(utils/common.js) -### 操作 +定义:该算法加快了对应数据获取的速度 -需求: -- 监听用户退出网页事件,进行提示是否退出 -- 是否开启上一页,下一页查看上一个,下一个单词 -- 完成每日背诵计划后,是否弹出一个当日完成的单词列表;⛳ -- 是否开启特定区域(比如按钮、区域块)进行单词切换 -- 是否开启聚焦模式,仅展示单词及其中文含义,不展示其他内容,且使用大字模式,更直观具体 +使用场景: -### 行为分析 +1. filterBFromA:获取能够学习的单词origin = 单词本 in 词典 +2. delBFromA:获取能够学习的单词 = 获取能够学习的单词origin - 已学过的单词 - 今日学习的单词 -需求:分析用户每日背诵单词的个数、每个单词背诵的次数、每日复习的单词个数与次数 +## 待做功能 + +需求🔶:监听用户退出网页事件,进行提示是否退出 + +需求🔶:分析用户每日背诵单词的个数、每个单词背诵的次数、每日复习的单词个数与次数 呈现:使用柱状图/折线图/日历热力图/日历坐标系的方式展示该用户所有日期的背诵/复习单词的行为数据,可一次只展示当周,当月每日的数据,或者是当年每月的数据,或者是所有的数据 -需求:按日期显示/查找用户背诵的单词,点进去之后展现该日单词列表(图表兼富文本),导出该日单词列表数据(html带样式格式导出图片) +需求🔶:按日期显示/查找用户背诵的单词,点进去之后展现该日单词列表(图表兼富文本),导出该日单词列表数据(html带样式格式导出图片) -需求:查看单词背诵的次数(使用矩形树图) +需求🔶:查看单词背诵的次数(使用矩形树图) -需求:呈现背诵达标率(使用仪表盘) +需求🔶:呈现背诵达标率(使用仪表盘) + +## 复盘 -### 复盘 +### 古早的复盘 定义: + - 利用vue的组合式api和生命周期钩子封装复用有状态逻辑的函数 - 函数参数可接收ref,和非ref值(unref:将ref变为非ref) - 组合式函数采用`usePascalCase`的形式命名 - 组合式函数不仅是为了复用,也能让代码组织更加清晰。能够基于逻辑问题将组件代码拆分成更小的功能函数 注意: + - 组合式函数在`script setup`/`setup()`中应始终被同步调用,在某些场景下也可以在onMounted这些生命周期钩子中调用,这是为了让vue能够确定当前正在被执行的到底是哪个实例,只有确定了当前组件实例,才能:将生命周期钩子等api注册在当前的组件上,将计算属性和监听器注册到当前组件上,以便在组件卸载时停止监听,避免内存泄露 - script setup是唯一在调用await之后仍可调用组合式函数的地方,编译器会在异步操作之后自动恢复当前组件实例 - 组合式函数可接收一般变量和响应式变量(例如ref,可对响应式变量进行监听追踪)作为参数。最好在处理参数时对两者进行兼容,即处理响应式变量时,使用unref函数获取变量的值(响应式变量返回.value,否则原样返回);同时若操作会根据响应式变量变化而变化,应该使用watch监听响应式变量,或者在watchEffect中调用unref解构响应式变量追踪其变化 @@ -75,8 +70,39 @@ - 每一个调用组合式函数的组件实例会创建其独有的状态拷贝,组件实例之间不会互相影响。若想在组件中共享状态,可使用状态管理相关的知识点。 - 组合式函数可随意封装 -## 复盘 +### 古早的复盘2 1. 获取学习数据、获取总数据、获取范围数据、获取今日数据 2. 可学习数据 = (总数据 - 学习数据)in 范围数据 -3. 单词卡,随机数 \ No newline at end of file +3. 单词卡,随机数 + +### 2024-01-18 + +今日重写该项目相关逻辑,发现之前还是对响应式api掌握的不到位,同时对第三方库Dexie.js有着十分重大的误解,没有真正掌握其相关api的用法,导致进展缓慢,以及逻辑纵横交错,十分难懂。 + +对于Dexie.js,其一,其是整个应用期间仅有一个实例,所以其实例必须放在hooks外部,以保持他的唯一性。同时,在创建了Dexie.js对象后,必须进行verson.stores方法的调用,不然后面读取不到任何的database table;而且每一次schema的更新,都必须调用该方法。 + +```javascript +let db = new Dexie('dbName') + +// 更新version +db.open() +db.version(db.verno + 1).stores(schemaObj) +db.close() +``` + +关于Dexie.js库,重要的逻辑是,方法的返回值以及其链式调用。两个重要的概念,一个是table、一个是collection,一般情况下,会返回collection、promise,这个得在用时查看相关文档。对于几个常用的方法,在此列出: + +- toArray +- limit:限制返回的数量 +- keys:一般在orderBy调用,返回排序关键字的数组,不然返回primary key的数组 +- orderBy:排序 +- get:获取特定的元素集合 +- filter +- offset:索引偏移 +- count:获取集合的数量 +- bulkPut:批量添加,索引相同则更新 +- delete +- clear:清空表 + +对于陷进该库的陷阱,时间估计占用了开发时间的50%,在后续的研发中,还是应当注重一个库基本的用法。