欢迎加入开源鸿蒙PC社区https://harmonypc.csdn.net/atomgit仓库地址hhttps://atomgit.com/Math_teacher_fan/kuailejidanci一、项目概述快乐记单词是一款基于Web技术的英语单词学习应用旨在通过科学的学习方法和有趣的记忆技巧帮助用户高效记忆英语单词。本文将详细介绍从需求分析到代码实现的完整过程。1.1 项目目标提供多种学习模式学习、测试、复习包含丰富的单词库和分类实现科学的记忆技巧和艾宾浩斯遗忘曲线提供完整的学习进度统计和追踪支持跨平台运行鸿蒙PC和传统桌面端1.2 技术选型技术用途优势HTML5页面结构语义化标签CSS3样式设计渐变、动画、响应式JavaScript ES6核心逻辑面向对象、数据管理LocalStorage数据持久化本地存储、无需后端二、系统架构设计2.1 整体架构┌─────────────────────────────────────────────────────────────┐ │ 用户界面层 │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ 学习模式 │ │ 测试模式 │ │ 复习模式 │ │ 统计面板 │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ └─────────────────────────────────────────────────────────────┘ ↓ ┌─────────────────────────────────────────────────────────────┐ │ 业务逻辑层 │ │ ┌──────────────────────────────────────────────────────┐ │ │ │ VocabularyApp 类 │ │ │ │ - 单词库管理 (wordDatabase) │ │ │ │ - 学习进度 (wordStates) │ │ │ │ - 记忆技巧 (tips) │ │ │ │ - 测试生成 (generateQuestions) │ │ │ │ - 数据持久化 (loadData/saveData) │ │ │ └──────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ ↓ ┌─────────────────────────────────────────────────────────────┐ │ 数据存储层 │ │ LocalStorage - wordStates, todayLearned, streakDays │ └─────────────────────────────────────────────────────────────┘2.2 核心类设计classVocabularyApp{// 当前状态currentModelearn// 当前模式currentCategorydaily// 当前分类currentIndex0// 当前单词索引words[]// 当前单词列表// 学习进度wordStates{}// 单词状态todayLearned0// 今日学习数dailyGoal20// 每日目标// 数据wordDatabase{}// 单词数据库tips[]// 记忆技巧// 核心方法loadCategory()// 加载分类displayWord()// 显示单词switchMode()// 切换模式generateQuestions()// 生成测试题handleAnswer()// 处理答案updateStats()// 更新统计renderWordList()// 渲染单词列表}三、单词库设计3.1 单词数据结构{word:apple,// 单词phonetic:/ˈæpl/,// 发音音标meaning:n. 苹果,// 中文释义enMeaning:A round fruit...,// 英文释义tip:谐音记忆阿婆...// 记忆技巧}3.2 五大分类分类单词数适用场景日常用语10词日常生活交流美食餐饮10词餐饮场景应用旅行交通10词旅行出行必备科技数码10词技术领域词汇商务办公10词职场商务交流3.3 记忆技巧分类consttips[重复是记忆之母多次复习能加深印象,联想记忆法将单词与熟悉的事物联系起来,词根词缀法很多单词由词根和词缀组成,语境记忆在句子中使用单词记得更牢,发音记忆大声朗读有助于记忆,艾宾浩斯遗忘曲线及时复习是关键,制作闪卡随时随地进行复习,分组记忆将相关单词放在一起学习];四、核心功能实现4.1 学习模式学习模式提供单词的完整信息展示displayWord(){constwordthis.words[this.currentIndex];// 显示单词基本信息document.getElementById(wordText).textContentword.word;document.getElementById(wordPhonetic).textContentword.phonetic;document.getElementById(meaningZh).textContentword.meaning;document.getElementById(meaningEn).textContentword.enMeaning;// 显示记忆技巧document.getElementById(memoryTipText).textContentword.tip;// 随机显示学习技巧document.getElementById(tipText).textContentthis.tips[this.currentIndex%this.tips.length];}4.2 测试模式测试模式通过选择题检验学习效果generateQuestions(){constquestions[];constshuffledWordsthis.shuffleArray([...this.words]).slice(0,5);shuffledWords.forEach(word{// 获取其他单词的释义作为干扰选项constotherMeaningsthis.words.filter(ww.word!word.word).map(ww.meaning);// 随机选择3个错误选项constwrongAnswersthis.shuffleArray(otherMeanings).slice(0,3);// 混合正确和错误选项constoptionsthis.shuffleArray([word.meaning,...wrongAnswers]);questions.push({word:word.word,correctAnswer:word.meaning,options:options});});returnquestions;}handleAnswer(e){constselectedAnswere.target.textContent;constquestionthis.testQuestions[this.currentQuestion];constisCorrectselectedAnswerquestion.correctAnswer;// 显示答案结果constoptionsdocument.querySelectorAll(.option-btn);options.forEach(btn{if(btn.textContentquestion.correctAnswer){btn.classList.add(correct);// 正确答案}elseif(btne.target!isCorrect){btn.classList.add(wrong);// 错误答案}});if(isCorrect){this.markAsMastered(question.word);}}4.3 复习模式复习模式打乱单词顺序检验记忆效果shuffleWords(){// Fisher-Yates 洗牌算法this.wordsthis.shuffleArray([...this.words]);this.currentIndex0;this.displayWord();}shuffleArray(array){for(letiarray.length-1;i0;i--){constjMath.floor(Math.random()*(i1));[array[i],array[j]][array[j],array[i]];}returnarray;}五、数据持久化系统5.1 数据结构设计constdata{wordStates:{apple:{learned:true,mastered:true},beautiful:{learned:true},// ...},todayLearned:15,lastDate:Sat Jun 07 2025,streakDays:5};5.2 保存与加载saveData(){constdata{wordStates:this.wordStates,todayLearned:this.todayLearned,lastDate:newDate().toDateString(),streakDays:this.streakDays};localStorage.setItem(vocabularyData,JSON.stringify(data));}loadData(){constsavedDatalocalStorage.getItem(vocabularyData);if(savedData){constdataJSON.parse(savedData);this.wordStatesdata.wordStates||{};this.todayLearneddata.todayLearned||0;this.checkStreak();}}5.3 连续学习天数计算checkStreak(){constlastDatelocalStorage.getItem(vocabularyData)?JSON.parse(localStorage.getItem(vocabularyData)).lastDate:null;consttodaynewDate().toDateString();constyesterdaynewDate(Date.now()-86400000).toDateString();if(lastDate!today){if(lastDateyesterday){// 昨天学习过连续天数1this.streakDays(JSON.parse(localStorage.getItem(vocabularyData)).streakDays||0)1;}else{// 昨天没学习重新开始计数this.streakDays1;}}else{// 今天已经学习过保持当前连续天数this.streakDaysJSON.parse(localStorage.getItem(vocabularyData)).streakDays||0;}}六、用户界面设计6.1 界面布局┌─────────────────────────────────────────────────────────────┐ │ 快乐记单词 │ │ 趣味背单词 · 高效记忆 │ └─────────────────────────────────────────────────────────────┘ ┌────────────────┐ ┌─────────────────────────────────────┐ │ 学习模式 │ │ │ │ [学习][测试] │ │ apple │ │ [复习] │ │ /ˈæpl/ │ │ │ │ │ │ 单词分类 │ │ n. 苹果 │ │ [下拉选择] │ │ │ │ │ │ A round fruit with red... │ │ 学习统计 │ │ │ │ 总:10 已学:5 │ │ 谐音记忆阿婆 → 苹果 │ │ 已掌握:3 连续:7 │ │ │ │ │ │ [◀ 上一个] [下一个 ▶] │ │ 今日进度 │ │ │ │ [████████░░] │ └─────────────────────────────────────┘ │ 8/20 │ │ │ │ 记忆技巧 │ │ 重复是记忆之母 │ └────────────────┘6.2 单词卡片设计.word-card{background:rgba(255,255,255,0.95);border-radius:20px;padding:40px;box-shadow:0 10px 30pxrgba(0,0,0,0.1);text-align:center;}.word-text{font-size:3.5rem;font-weight:700;color:#333;margin-bottom:10px;}.word-phonetic{font-size:1.3rem;color:#999;}.memory-tip{background:linear-gradient(135deg,#fff9e6 0%,#fff3cd 100%);border-radius:16px;padding:20px;border-left:4px solid #ffc107;}七、艾宾浩斯遗忘曲线应用7.1 遗忘曲线原理德国心理学家艾宾浩斯研究发现人类大脑对新事物的遗忘遵循特定规律20分钟后遗忘42%1小时后遗忘56%1天后遗忘66%2天后遗忘72%6天后遗忘75%1个月后遗忘79%7.2 应用策略// 复习时机提示constreviewSchedule{20分钟:刚刚学过的单词可以回顾一下,1小时:每小时复习一次加深印象,1天:今天学过的单词明天要复习,3天:三天前的单词需要再次巩固,7天:一周前的单词形成长期记忆,30天:一个月的单词已经形成永久记忆};7.3 实践建议及时复习学完单词后20分钟内复习一次多次循环按照20分钟、1小时、1天、3天、7天的间隔复习检测反馈通过测试模式检验记忆效果保持连续连续学习天数激励坚持八、性能优化8.1 数据结构优化// 使用对象存储单词状态O(1)查询wordStates{apple:{learned:true,mastered:true},beautiful:{learned:true},// ...}// 快速检查单词是否已学习if(!this.wordStates[word.word]){this.wordStates[word.word]{learned:true};this.todayLearned;}8.2 DOM操作优化// 批量更新而非多次操作renderWordList(){constwordListdocument.getElementById(wordList);wordList.innerHTML;// 一次性清空this.words.forEach(word{constitemdocument.createElement(div);// ... 设置内容wordList.appendChild(item);// 批量添加});}8.3 事件委托// 使用事件委托处理多个按钮document.querySelectorAll(.mode-btn).forEach(btn{btn.addEventListener(click,(e){// 处理点击事件});});九、用户体验设计9.1 即时反馈handleAnswer(e){constisCorrectselectedAnswerquestion.correctAnswer;if(isCorrect){document.getElementById(resultIcon).textContent✅;document.getElementById(resultText).textContent回答正确;this.markAsMastered(question.word);}else{document.getElementById(resultIcon).textContent❌;document.getElementById(resultText).textContent正确答案是${question.correctAnswer};}}9.2 进度可视化updateStats(){constprogressMath.min((this.todayLearned/this.dailyGoal)*100,100);document.getElementById(progressFill).style.width${progress}%;document.getElementById(progressText).textContent${this.todayLearned}/${this.dailyGoal}单词;}9.3 状态标识// 单词列表中的状态显示if(statestate.mastered){item.classList.add(mastered);// ⭐ 已掌握}elseif(statestate.learned){item.classList.add(learned);// ✅ 已学习}// 图标显示${statestate.mastered?⭐:(statestate.learned?✅:)}十、扩展功能建议10.1 发音功能集成 Web Speech API 实现单词发音支持英式/美式发音选择自动朗读功能10.2 艾宾浩斯复习提醒记录每个单词的学习时间自动计算最佳复习时机推送复习提醒10.3 自定义单词本支持添加个人生词自定义记忆技巧导入/导出功能10.4 社交功能学习成就系统排行榜学习数据统计图表十一、核心代码模块文件说明行数app.js完整的应用逻辑实现387行index.html页面结构150行style.css样式设计508行十二、总结12.1 技术要点回顾通过这个项目我们学习了面向对象编程使用类管理复杂状态数据结构设计合理的数据模型提高效率LocalStorage浏览器本地存储技术DOM操作动态渲染和事件处理艾宾浩斯遗忘曲线科学记忆理论的应用12.2 学习收获开发一个单词学习应用不仅是技术的实现更是对教育学的探索认知心理学理解记忆的规律交互设计提供最佳用户体验数据分析追踪学习效果游戏化设计提高学习动力12.3 改进方向添加语音发音功能实现艾宾浩斯复习提醒支持自定义单词本添加学习成就系统集成更多记忆技巧标签#记单词 #英语学习 #记忆技巧 #艾宾浩斯 #JavaScript #HarmonyOS #Electron