用 WebStorm 从零搭建一个任务列表项目，能一步步带我复习 HTML、JS 核心语法和 DOM 操作吗？

考虑到您有前端基础但已生疏，希望从零开始并使用 WebStorm 进行逐步实践，我将为您设计一个从项目创建到核心知识点复习的详细路径。整个过程将遵循“创建项目 -> 巩固基础 -> 学习框架”的逻辑，并结合具体代码示例。 ### 第一步：环境准备与项目创建首先，您需要在 WebStorm 中创建一个基础项目来作为我们的“练习沙盒”。这里我们创建一个标准的 HTML/JavaScript 项目。 1. **打开 WebStorm**，选择 `File` -> `New` -> `Project...`。 2. 在左侧模板列表中，选择 `Empty Project`。 3. 为项目命名（例如 `frontend-refresh`）并选择项目保存路径，然后点击 `Create`[ref_2]。 4. 项目创建后，在项目根目录右键，选择 `New` -> `HTML File`，创建一个名为 `index.html` 的文件。此时，您的项目结构应如下所示： ``` frontend-refresh/ └── index.html ``` ### 第二步：核心知识点温习与实践我们将以编写一个简单的“任务列表”应用为主线，逐步融入并练习被遗忘的核心语法。所有代码都写在 `index.html` 中。 #### **知识点 1：HTML 结构 & 基础 DOM 操作** 首先，构建应用的骨架。 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>前端复习 - 任务列表</title> <style> /* 基础样式，知识点3中会用到 */ body { font-family: sans-serif; max-width: 600px; margin: 2rem auto; } #taskInput { padding: 0.5rem; width: 70%; } button { padding: 0.5rem 1rem; cursor: pointer; } ul { list-style: none; padding: 0; } li { padding: 0.5rem; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; } .completed { text-decoration: line-through; color: #999; } </style> </head> <body> <h1>我的任务列表</h1>  <div> <input type="text" id="taskInput" placeholder="输入新任务..."> <button onclick="addTask()">添加任务</button> </div>  <ul id="taskList"></ul> <script> // 所有JavaScript逻辑将写在这里 </script> </body> </html> ``` **练习点**： * **HTML 元素**：`<div>`, `<input>`, `<button>`, `<ul>`, `<li>`。 * **事件绑定**：`onclick="addTask()"` 是一种简单的内联事件绑定方式[ref_4]。 #### **知识点 2：JavaScript 基础语法（变量、函数、数组）** 在 `<script>` 标签内，我们从最基础的语法开始。 ```javascript // 1. 变量声明 (let, const) - ES6核心 let tasks = []; // 用于在内存中存储任务对象的数组 const MAX_TASKS = 10; // 常量，最大任务数 // 2. 函数定义与使用 function addTask() { // 获取DOM元素 const inputElement = document.getElementById('taskInput'); const taskText = inputElement.value.trim(); // .trim() 去除首尾空格 // 条件判断与逻辑运算 if (taskText === '') { alert('任务内容不能为空！'); return; // 提前返回 } if (tasks.length >= MAX_TASKS) { alert(`任务数量不能超过 ${MAX_TASKS} 个！`); return; } // 对象字面量 - 创建任务对象 const newTask = { id: Date.now(), // 使用时间戳生成一个简单唯一ID text: taskText, completed: false // 任务是否完成的标志 }; // 数组操作 - 将新任务添加到数组末尾 tasks.push(newTask); // 清空输入框 inputElement.value = ''; // 更新UI列表 renderTaskList(); } ``` **练习点回顾**： * `let` 与 `const` 的区别。 * 函数声明 `function funcName() {}`。 * `if` 条件判断、`===` 严格相等运算符。 * 对象 `{}` 和数组 `[]` 的创建与操作（`push` 方法）。 #### **知识点 3：DOM 操作与事件监听（高级）** 现在实现渲染列表和更复杂的交互。我们将用更现代的方式绑定事件。 ```javascript // 渲染任务列表到页面上 function renderTaskList() { const listElement = document.getElementById('taskList'); listElement.innerHTML = ''; // 清空现有列表（一种简单方式） // 循环遍历数组 - forEach 方法 tasks.forEach(task => { // 创建 <li> 元素 const li = document.createElement('li'); // 根据任务状态添加CSS类 if (task.completed) { li.classList.add('completed'); } // 创建任务文本节点 const textSpan = document.createElement('span'); textSpan.textContent = task.text; // 创建操作按钮容器 const buttonContainer = document.createElement('div'); // 创建“完成/取消”按钮 const toggleButton = document.createElement('button'); toggleButton.textContent = task.completed ? '取消完成' : '标记完成'; toggleButton.style.marginRight = '0.5rem'; // 使用 addEventListener 绑定事件（优于 onclick 属性） toggleButton.addEventListener('click', () => toggleTaskCompletion(task.id)); // 创建“删除”按钮 const deleteButton = document.createElement('button'); deleteButton.textContent = '删除'; deleteButton.addEventListener('click', () => deleteTask(task.id)); // 组装DOM结构 buttonContainer.appendChild(toggleButton); buttonContainer.appendChild(deleteButton); li.appendChild(textSpan); li.appendChild(buttonContainer); listElement.appendChild(li); }); } // 切换任务完成状态 function toggleTaskCompletion(taskId) { // 使用 find 方法查找数组中对应的任务对象 const task = tasks.find(t => t.id === taskId); if (task) { task.completed = !task.completed; // 布尔值取反 renderTaskList(); // 重新渲染，更新视图 } } // 删除任务 function deleteTask(taskId) { // 使用 filter 方法创建一个不包含指定任务的新数组 tasks = tasks.filter(t => t.id !== taskId); renderTaskList(); } // 初始渲染（如果tasks数组有初始数据） // tasks.push({id: 1, text: '复习JavaScript语法', completed: false}); // renderTaskList(); ``` **练习点回顾**： * `document.getElementById`, `document.createElement`, `element.appendChild`。 * `element.addEventListener('click', callback)` 事件监听。 * 数组高阶方法：`forEach`, `find`, `filter`。 * 箭头函数 `() => {}` 及其词法作用域 `this`。 * 操作元素的 `classList` 和 `style`。 #### **知识点 4：调试与工具使用** WebStorm 的强大之处在于其开发工具。 * **运行项目**：在 `index.html` 文件上右键，选择 `Run ‘index.html’` 或使用快捷键。WebStorm 会启动一个内置服务器并打开浏览器[ref_4]。 * **调试**：在 `script` 代码行号旁点击设置断点，然后在浏览器中刷新页面，执行到该处时会暂停，可以查看变量值、调用栈等信息。 * **代码提示**：在输入 `document.` 或 `tasks.` 时，WebStorm 会给出智能提示，这是复习和探索 API 的绝佳方式[ref_4]。 ### 第三步：向 Vue 过渡的思考当您通过这个纯原生项目巩固了 **JavaScript 核心语法（ES6+）**、**DOM 操作** 和**事件处理**之后，学习 Vue 会事半功倍。Vue 的核心价值在于它通过声明式语法和数据绑定，将您上面手动完成的许多操作自动化了。例如，上面“任务列表”的功能，用 Vue 实现会更加简洁： ```html <div id="app"> <input v-model="newTaskText" @keyup.enter="addTask"> <button @click="addTask">添加</button> <ul> <li v-for="task in tasks" :class="{ completed: task.completed }"> <span>{{ task.text }}</span> <button @click="task.completed = !task.completed">{{ task.completed ? '取消' : '完成' }}</button> <button @click="removeTask(task)">删除</button> </li> </ul> </div> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script> const { createApp, ref } = Vue; createApp({ setup() { const newTaskText = ref(''); const tasks = ref([]); const addTask = () => { /* 逻辑 */ }; const removeTask = (task) => { /* 逻辑 */ }; return { newTaskText, tasks, addTask, removeTask }; } }).mount('#app'); </script> ``` **对比与进阶建议**： | 特性 | 原生 JavaScript 实现 | Vue 实现 | 学习目的 | | :--- | :--- | :--- | :--- | | **数据管理** | 手动维护 `tasks` 数组，需主动调用 `renderTaskList` | 使用 `ref` 或 `reactive` 声明响应式数据，数据变视图自动更新 | 理解“响应式”概念和其解决的问题 | | **UI 渲染** | 手动使用 `createElement` 和 `appendChild` 构建 DOM | 使用 `v-for` 指令基于数据自动渲染列表 | 理解“声明式渲染”的优势 | | **事件处理** | `addEventListener` 或 `onclick` 属性 | `@click` 指令，方法直接定义在组件作用域内 | 熟悉 Vue 的模板语法 | | **双向绑定** | 需手动监听 `input` 事件并更新变量 | 使用 `v-model` 指令轻松实现 | 掌握 Vue 的核心便捷功能 | **下一步行动建议**：在熟悉当前原生项目后，您可以在 WebStorm 中直接使用 `Vue.js` 插件获得更好的语法高亮和提示[ref_4]，然后通过 `File -> New -> Project`，选择 `Vue.js` 来创建一个标准的 Vue 项目（这需要提前安装 Node.js 和 Vue CLI）[ref_5]。从改造这个“任务列表”应用开始您的 Vue 之旅，将原生逻辑逐步迁移到 Vue 的响应式系统和组件结构中，这种对比学习法效果最佳。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

下一篇 Python里的list到底能干啥？为什么它这么万能？