本文介绍如何将 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 和轻量封装，你完全可以用它支撑起功能完整的词汇训练应用——省去运维成本，专注教学逻辑与用户体验。
立即学习“前端免费学习笔记（深入）”；
