本文介绍如何将 json 文件作为静态词库，在浏览器端高效加载、随机抽取单词，并支持扩展题型（如选择题），无需后端或真实数据库，适合原型开发与小型学习类应用。
在构建词汇练习、抽词测验或语言学习类 Web 应用时，你并不总需要一个完整的数据库系统（如 Firebase、postgresql 或 mysql）。对于中小型项目（例如含 1000 个单词的词库），一个结构良好的 jsON 文件 + 前端 javaScript 就足以胜任“数据源”角色——它本质是轻量、可版本控制、易部署的静态词库。
✅ 正确的 json 数据结构设计
首先，避免把 JSON 当作关系型数据库来建模。你的 words.json 应以数组形式组织，每个条目代表一个完整题目单元：
[ { "id": 1, "word": "serendipity", "definition": "the occurrence and development of events by chance in a happy or beneficial way", "options": ["coincidence", "serendipity", "ambivalence", "ephemeral"], "correctIndex": 1 }, { "id": 2, "word": "ubiquitous", "definition": "present, appearing, or found everywhere", "options": ["elusive", "transient", "ubiquitous", "obsolete"], "correctIndex": 2 } ]? 提示：options 字段已预置打乱（或你可在 JS 中动态 shuffle），correctIndex 确保答案位置可验证，避免运行时依赖字符串匹配。
✅ 前端加载与随机抽取（无框架纯 JS）
使用 fetch() 加载 JSON，并封装为可复用的词库服务：
class WordBank { constructor(jsonUrl) { this.data = []; this.jsonUrl = jsonUrl; } async init() { try { const res = await fetch(this.jsonUrl); if (!res.ok) throw new Error(`HTTP ${res.status}`); this.data = await res.json(); console.log(`✅ Loaded ${this.data.length} words`); } catch (err) { console.error("Failed to load word bank:", err); } } getRandomWord() { if (this.data.length === 0) return null; const idx = Math.floor(Math.random() * this.data.length); return { ...this.data[idx] }; // 返回副本，避免意外修改原始数据 } // 可选：获取 N 个不重复的随机词（用于一局多题） getRandomWords(count = 1) { const shuffled = [...this.data].sort(() => 0.5 - Math.random()); return shuffled.slice(0, count); } } // 使用示例 const bank = new WordBank('./data/words.json'); await bank.init(); const quizWord = bank.getRandomWord(); console.log(quizWord.word, quizWord.options); // → "serendipity", ["coincidence", ...]⚠️ 注意事项与最佳实践
- 性能友好：1000 条 JSON 数据（约 200–400 KB）在现代浏览器中 fetch + JSON.parse 耗时通常 懒加载。
- 部署即用：将 words.json 放在 public/ 或 src/assets/ 目录下（取决于框架），确保能被静态服务器访问。
- 避免硬编码：不要在 JS 中手动写 1000 个对象——用脚本生成 JSON！例如 python 脚本读取 CSV/TXT，输出标准化 JSON：
import csv, json words = [] with open("raw_words.csv") as f: for i, row in enumerate(csv.DictReader(f)): words.append({ "id": i+1, "word": row["word"].strip(), "definition": row["def"].strip(), "options": [row["word"], row["distractor1"], row["distractor2"], row["distractor3"]], "correctIndex": 0 }) json.dump(words, open("words.json", "w"), indent=2) - 安全提示：纯前端 JSON 不适用于敏感/用户生成内容（无权限控制、不可防篡改），仅推荐用于公开、只读词库场景。
- 进阶可选：如需搜索、过滤或持久化用户进度，可结合 localStorage 或 IndexedDB，但 JSON 本身仍作为初始数据源。
总之，JSON 不是数据库，但可以是非常高效的静态数据载体。合理设计结构、配合现代 Fetch API 和轻量封装，你完全可以用它支撑起功能完整的词汇训练应用——省去运维成本，专注教学逻辑与用户体验。
立即学习“前端免费学习笔记（深入）”；