我的页面

${name}

年龄：${age}

加粗文字

这会显示为普通文字

末尾新段落

开头新段落

待办事项

``` ### JavaScript 逻辑 ```js // todo.js // ------- 状态管理 ------- // 从 localStorage 读取数据，如果没有则初始化为空数组 let todos = loadFromStorage(); let currentFilter = "all"; // 当前筛选状态 // ------- localStorage 操作 ------- function loadFromStorage() { try { const stored = localStorage.getItem("todos"); // 如果 stored 为 null（首次访问），返回空数组；否则解析 JSON return stored ? JSON.parse(stored) : []; } catch (error) { // JSON.parse 出错时（数据损坏），返回空数组 console.error("读取本地数据失败：", error); return []; } } function saveToStorage() { // 将 todos 数组转为 JSON 字符串保存 localStorage.setItem("todos", JSON.stringify(todos)); } // ------- 核心功能 ------- // 生成唯一 ID（用当前时间戳） function generateId() { return Date.now().toString(); } // 添加待办事项 function addTodo(text) { const trimmed = text.trim(); if (!trimmed) return; // 不允许添加空内容 const todo = { id: generateId(), text: trimmed, done: false, createdAt: new Date().toISOString() }; todos.push(todo); saveToStorage(); render(); } // 切换完成状态 function toggleTodo(id) { todos = todos.map(todo => todo.id === id ? { ...todo, done: !todo.done } : todo ); saveToStorage(); render(); } // 删除待办事项 function deleteTodo(id) { todos = todos.filter(todo => todo.id !== id); saveToStorage(); render(); } // ------- 渲染 ------- // 根据当前筛选条件过滤数据 function getFilteredTodos() { switch (currentFilter) { case "active": return todos.filter(todo => !todo.done); case "done": return todos.filter(todo => todo.done); default: // "all" return todos; } } // 渲染单个 todo 项的 HTML function createTodoHTML(todo) { return `

${escapeHTML(todo.text)}

`; } // 防止 XSS：将用户输入的特殊字符转义 function escapeHTML(str) { const div = document.createElement("div"); div.textContent = str; return div.innerHTML; } // 渲染统计信息 function renderStats() { const total = todos.length; const done = todos.filter(t => t.done).length; const active = total - done; const statsEl = document.getElementById("stats"); statsEl.textContent = `共 ${total} 项，已完成 ${done} 项，未完成 ${active} 项`; } // 主渲染函数 function render() { const listEl = document.getElementById("todo-list"); const filtered = getFilteredTodos(); if (filtered.length === 0) { listEl.innerHTML = "

暂无待办事项

"; } else { listEl.innerHTML = filtered.map(createTodoHTML).join(""); } renderStats(); } // ------- 事件绑定 ------- // 添加按钮点击 document.getElementById("add-btn").addEventListener("click", () => { const input = document.getElementById("todo-input"); addTodo(input.value); input.value = ""; // 清空输入框 input.focus(); // 焦点回到输入框 }); // 按 Enter 键添加 document.getElementById("todo-input").addEventListener("keydown", (e) => { if (e.key === "Enter") { const input = e.target; addTodo(input.value); input.value = ""; } }); // 列表事件委托：处理复选框和删除按钮 document.getElementById("todo-list").addEventListener("click", (e) => { // 获取最近的 li 元素，取出其 data-id const li = e.target.closest(".todo-item"); if (!li) return; const id = li.dataset.id; if (e.target.classList.contains("todo-check")) { // 点击了复选框 toggleTodo(id); } else if (e.target.classList.contains("delete-btn")) { // 点击了删除按钮 deleteTodo(id); } }); // 筛选按钮 document.querySelector(".filter-area").addEventListener("click", (e) => { const btn = e.target.closest(".filter-btn"); if (!btn) return; // 更新当前筛选状态 currentFilter = btn.dataset.filter; // 更新按钮激活样式 document.querySelectorAll(".filter-btn").forEach(b => b.classList.remove("active")); btn.classList.add("active"); render(); }); // ------- 初始化 ------- render(); ``` ### 要点总结这个 Todo List 综合了以下知识点： - `localStorage.getItem` / `setItem`：持久化存储数据，页面刷新后数据不丢失 - `JSON.stringify` / `JSON.parse`：在字符串和对象之间转换（localStorage 只能存字符串） - `Array.map`：更新数组中某个元素（配合展开运算符创建新对象） - `Array.filter`：删除元素或筛选展示 - `insertAdjacentHTML` / `innerHTML`：高效渲染列表 - 事件委托：在父元素监听子元素事件，支持动态添加的元素 - `e.target.closest(selector)`：向上查找最近的匹配元素 - `dataset`：读取 `data-*` 属性 - XSS 防护：使用 `textContent` 转义用户输入 --- ## 学习路线建议掌握本文内容后，建议按以下顺序继续学习： 1. [HTML与CSS入门](https://blog.vercanti.com/html-yu-css-ru-men/) — 巩固 HTML/CSS 基础，理解 DOM 的基础 2. 深入学习 TypeScript — 为 JavaScript 添加类型系统 3. [Vue3入门](https://blog.vercanti.com/vue-3-ru-men-zhi-nan/) — 学习主流前端框架，进一步简化 DOM 操作 4. Node.js — 在服务端运行 JavaScript 5. 浏览器 API — Web Storage、Web Workers、WebSocket 等 --- ## 最佳实践 **始终使用 `const` 和 `let`，不用 `var`**：`var` 存在变量提升和函数作用域问题，容易产生难以追踪的 bug。`const` 声明不可重新赋值的变量，`let` 声明可变量，两者都是块级作用域，语义更清晰。 **用 `===` 严格相等而非 `==` 宽松相等**：`==` 会进行隐式类型转换（如 `0 == false` 为 `true`），产生意料之外的结果。始终用 `===` 和 `!==` 进行比较，避免隐式转换陷阱。 **异步代码使用 `async/await`，而非裸 Promise 链**：`async/await` 使异步代码读起来像同步，错误处理用 `try/catch` 而非 `.catch()`，代码结构更清晰，调试更容易。 **不要用 `innerHTML` 插入用户输入的内容**：`innerHTML` 会执行 HTML 中的脚本，直接插入用户输入会导致 XSS 攻击。使用 `textContent` 插入纯文本，或对 HTML 进行转义后再插入。 **用 `for...of` 替代 `forEach` 进行需要 `await` 的异步循环**：`forEach` 不支持 async 回调等待，`for...of` 配合 `await` 才能顺序执行异步操作。 --- ## 常见陷阱 ### 陷阱：`this` 在箭头函数和普通函数中行为不同 **现象：** 在类方法内用箭头函数的 `setTimeout` 回调，`this` 意外丢失；或在对象字面量中用箭头函数，`this` 指向了 `window`。 **原因：** 普通函数的 `this` 在调用时动态绑定；箭头函数的 `this` 在定义时捕获外层 `this`，不会动态改变。 **解决：** 类方法中需要访问 `this` 的回调用箭头函数；对象字面量的方法用普通函数以保持正确绑定。 ```javascript class Timer { start() { setTimeout(() => { this.tick() // 箭头函数：this 正确指向 Timer 实例 }, 1000) } } ``` ### 陷阱：`forEach` 中用 `await` 无法等待异步操作 **现象：** `forEach` 中的 `await` 不阻塞循环，所有异步操作同时触发，后续代码在操作完成前就已执行。 **原因：** `forEach` 不支持 async 回调的返回 Promise，内部 `await` 只影响回调本身，`forEach` 不等待它们。 **解决：** 用 `for...of` \+ `await` 顺序执行，或 `Promise.all` \+ `map` 并行执行。 ```javascript // 错误：不等待 items.forEach(async item => { await save(item) }) // 正确：顺序等待 for (const item of items) { await save(item) } // 正确：并行等待 await Promise.all(items.map(item => save(item))) ``` ### 陷阱：`==` 宽松比较产生意外结果 **现象：** `if (value == false)` 对 `0`、`""`、`null`、`undefined` 都成立，逻辑判断出现意外分支。 **原因：** `==` 比较不同类型时进行隐式类型转换，规则复杂且违反直觉（`null == undefined` 为 `true`，但 `null == 0` 为 `false`）。 **解决：** 始终使用 `===` 严格相等；需要 null/undefined 兼容检查时用 `value == null`（这是唯一合理的 `==` 使用场景）。 --- ## 参见 - [HTML与CSS入门](https://blog.vercanti.com/html-yu-css-ru-men/) - [TypeScript完全指南](https://blog.vercanti.com/typescript-wan-quan-zhi-nan/) - [Vue3入门](https://blog.vercanti.com/vue-3-ru-men-zhi-nan/) - [JavaScript Promise 完全指南](https://blog.vercanti.com/javascript-promise-wan-quan-zhi-nan/)