JavaScript 设计案例：简易Todo应用
在现代Web开发中，前端技术的应用越发广泛，而JavaScript作为核心语言，发挥了巨大的作用。在本案例中，我们将设计一个简单的Todo应用，这个应用能够实现添加、删除和标记任务完成等功能，这对于理解JavaScript的基本用法和DOM操作有着重要的意义。
1. 项目结构
首先，我们将使用HTML、CSS和JavaScript来构建这个Todo应用。项目结构如下：
/todo-app
├── index.html
├── style.css
└── script.js
2. HTML Layout
在index.html中，我们先设定一个简单的表单用于输入任务，并展示任务列表。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo 应用</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Todo 应用</h1>
<input type="text" id="todo-input" placeholder="输入任务...">
<button id="add-todo">添加任务</button>
<ul id="todo-list"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
3. CSS 样式
在style.css中，我们设置一些基本的样式，使应用的界面更美观。
body {
font-family: Arial, sans-serif;
}
.container {
width: 300px;
margin: 0 auto;
}
h1 {
text-align: center;
}
input {
width: 70%;
padding: 10px;
margin-right: 5px;
}
button {
padding: 10px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: flex;
justify-content: space-between;
padding: 5px 0;
}
.completed {
text-decoration: line-through;
color: grey;
}
4. JavaScript 逻辑
在script.js中，我们编写JavaScript代码，处理用户的输入和DOM操作。
document.addEventListener("DOMContentLoaded", function() {
const todoInput = document.getElementById("todo-input");
const addTodoButton = document.getElementById("add-todo");
const todoList = document.getElementById("todo-list");
addTodoButton.addEventListener("click", function() {
const todoText = todoInput.value.trim();
if (todoText === "") {
alert("请输入任务内容！");
return;
}
const todoItem = document.createElement("li");
todoItem.textContent = todoText;
// 添加完成任务的功能
todoItem.addEventListener("click", function() {
todoItem.classList.toggle("completed");
});
// 添加删除任务的功能
const deleteButton = document.createElement("button");
deleteButton.textContent = "删除";
deleteButton.addEventListener("click", function() {
todoList.removeChild(todoItem);
});
todoItem.appendChild(deleteButton);
todoList.appendChild(todoItem);
todoInput.value = ""; // 清空输入框
});
});
5. 运行应用
将以上三个文件保存到同一目录下，打开index.html文件，就可以在浏览器中运行这个简单的Todo应用。用户可以输入任务，点击添加按钮后，任务将显示在列表中，用户还可以通过点击任务来标记其完成状态，或点击删除按钮将其移除。
总结
通过这个简单的Todo应用，我们可以清晰地看到JavaScript在处理DOM事件、数据绑定和用户交互中的应用。这些基本功能为我们今后深入学习复杂的前端框架（如React、Vue）奠定了良好的基础。在实际开发中，尽量保持代码的简洁和可读性，合理组织功能模块，才能提高开发效率和代码维护性。
