怎么避免JavaScript“教程地狱”：项目驱动学习与实战推荐

// 内存状态设计：使用纯数据表达业务
let todos = [
  { id: "task-1", title: "完成项目规格拆解", completed: true, createdAt: 1729000000000 },
  { id: "task-2", title: "编写状态渲染函数", completed: false, createdAt: 1729000100000 }
];
let currentFilter = "all"; // 可选值: "all" | "active" | "completed"

// 运行环境：任意现代浏览器 (直接内嵌于 HTML script 标签执行)
// 验证方法：在输入框键入任务，回车添加；点击复选框切换状态；刷新页面测试持久化

(function () {
  "use strict";

  // 1. 状态定义与本地存储读取
  const STORAGE_KEY = "DEV_TODO_ITEMS_V1";
  let state = {
    items: JSON.parse(localStorage.getItem(STORAGE_KEY) || "[]"),
    filter: "all"
  };

  // 2. DOM 节点引用
  const inputEl = document.querySelector("#todo-input");
  const listEl = document.querySelector("#todo-list");
  const filterBtns = document.querySelectorAll(".filter-btn");

  // 3. 状态持久化函数
  function saveState() {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(state.items));
  }

  // 4. 纯净的 DOM 渲染逻辑
  function render() {
    listEl.innerHTML = "";

    const visibleItems = state.items.filter(item => {
      if (state.filter === "active") return !item.completed;
      if (state.filter === "completed") return item.completed;
      return true;
    });

    if (visibleItems.length === 0) {
      const emptyLi = document.createElement("li");
      emptyLi.className = "empty-notice";
      emptyLi.textContent = "当前没有任务记录";
      listEl.appendChild(emptyLi);
      return;
    }

    visibleItems.forEach(item => {
      const li = document.createElement("li");
      li.dataset.id = item.id;
      li.className = item.completed ? "completed-item" : "";

      const checkbox = document.createElement("input");
      checkbox.type = "checkbox";
      checkbox.checked = item.completed;

      const span = document.createElement("span");
      span.textContent = item.text;

      const deleteBtn = document.createElement("button");
      deleteBtn.textContent = "删除";
      deleteBtn.className = "btn-delete";

      li.append(checkbox, span, deleteBtn);
      listEl.appendChild(li);
    });
  }

  // 5. 事件监听器：原子添加
  inputEl.addEventListener("keydown", function (e) {
    if (e.key === "Enter") {
      const text = inputEl.value.trim();
      if (!text) return;

      state.items.push({
        id: "item-" + Date.now(),
        text: text,
        completed: false
      });

      inputEl.value = "";
      saveState();
      render();
    }
  });

  // 6. 事件委托：处理切换与删除，避免多重监听
  listEl.addEventListener("click", function (e) {
    const target = e.target;
    const parentLi = target.closest("li");
    if (!parentLi || !parentLi.dataset.id) return;

    const id = parentLi.dataset.id;
    const targetItem = state.items.find(t => t.id === id);
    if (!targetItem) return;

    if (target.type === "checkbox") {
      targetItem.completed = target.checked;
      saveState();
      render();
    } else if (target.classList.contains("btn-delete")) {
      state.items = state.items.filter(t => t.id !== id);
      saveState();
      render();
    }
  });

  // 7. 过滤切换
  filterBtns.forEach(btn => {
    btn.addEventListener("click", function () {
      state.filter = btn.dataset.filter;
      filterBtns.forEach(b => b.classList.remove("active"));
      btn.classList.add("active");
      render();
    });
  });

  // 初始化首屏渲染
  render();
})();

核心攻克点：DOM 树遍历与修改、事件监听与事件委托、JSON 序列化与 localStorage 读写机制。

推荐项目：

• 多维度分类待办清单：包含添加、删除、勾选、就地双击重命名文本、分类过滤标签（全部/进行中/已完成），以及页面重载后数据不丢失。
• 交互式汇率计算器：设计两个币种下拉框与输入数值联动，监听 input 事件实现实时计算，并加入输入防抖与非数字过滤拦截。

核心攻克点：Promise 原理、async/await 语法糖、fetch 网络请求生命周期、HTTP 状态码识别（如 404/500）、请求超时取消（AbortController）与错误页面渲染。

推荐项目：

• 全球城市实时天气仪表盘：对接公共免费天气 API（如 Open-Meteo 或和风天气）。实现城市名检索、请求加载骨架屏（Skeleton）、无网络状态提示与查询结果本地临时缓存（10分钟有效期）。
• GitHub 开发者画像探查器：调用 GitHub REST API，输入开发者用户名展示其头像、公开仓库列表、Followers 数量与高频语言分布，妥善处理用户不存在（404）和超出 API 限额（403）的异常场景。

核心攻克点：HTML5 原生拖拽 API（Drag and Drop）、发布订阅模式（Pub/Sub）或自定义事件（CustomEvent）、ES 模块化分文件组织（import / export）。

推荐项目：

• 多列任务看板（Mini Trello）：拥有“待处理”、“进行中”、“已完成”三列，任务卡片可以在不同列之间自由拖拽放置，拖拽释放后自动更新底层数据结构并重新计算排序。
• 客户端 Markdown 实时同步预览器：左侧输入区监听 input，右侧渲染区实时转换 HTML 输出；支持工具栏快速插入加粗、链接、代码块语法，并支持将内容一键导出为 .md 文件。

核心攻克点：现代打包工具 Vite、npm 脚本管理、代码风格检查 ESLint、基础单元测试（Vitest）、Git 分支管理与 GitHub Pages 自动化静态部署。

推荐项目：

• 个人日常收支记账仪表盘：使用 Vite 搭建纯原生或轻量框架脚手架，将数据存储、图表计算、UI 渲染严格拆分为不同模块；引入轻量图表库（如 Chart.js）展示月度收支饼图，并编写核心收支计算逻辑的单元测试。
• 轻量级通用工具函数库（Mini Lodash）：自建常用深拷贝、防抖节流、数组去重等函数，配置标准打包输出与测试用例覆盖，发布至 npm 或私有仓库。