JavaScript 进阶教程：深入理解函数、事件和模块化

在上一节中，我们学习了 JavaScript 的基础语法，并通过一个简单计数器案例感受了它的实际应用。这一节将进一步深入学习 JavaScript 中的重要概念，如函数的高级用法、事件机制以及模块化开发，为更复杂的项目开发打下基础。

一、深入理解函数

函数是 JavaScript 的核心之一，灵活运用函数可以显著提高代码的可读性和可维护性。

1. 函数表达式和回调函数

除了普通的函数声明（function），JavaScript 允许使用函数表达式来定义函数。函数表达式可作为参数传递给其他函数，称为回调函数。

示例：

javascript">// 普通函数声明
function greet(name) {console.log("Hello, " + name);
}// 函数表达式
const sayGoodbye = function(name) {console.log("Goodbye, " + name);
};// 使用回调函数
function processName(name, callback) {callback(name);
}
processName("Alice", greet); // 输出：Hello, Alice
processName("Alice", sayGoodbye); // 输出：Goodbye, Alice

要点：

函数表达式可以赋值给变量或作为参数。
回调函数非常常见，尤其是在异步操作（如事件处理或 API 请求）中。

2. 箭头函数的深入

箭头函数（=>）是函数的简写形式，但有独特的行为，尤其在处理 this 时。

示例：

javascript">const add = (a, b) => a + b; // 简写
console.log(add(2, 3)); // 输出：5// 箭头函数中的 this
const obj = {name: "Alice",greet: function() {setTimeout(() => {console.log("Hello, " + this.name); // this 指向 obj}, 1000);}
};
obj.greet(); // 一秒后输出：Hello, Alice

注意：箭头函数没有自己的 this，它会继承父作用域的 this。

3. 闭包

闭包是指函数能够“记住”其定义时的作用域，甚至在函数执行结束后。

示例：

javascript">function createCounter() {let count = 0;return function() {count++;return count;};
}const counter = createCounter();
console.log(counter()); // 输出：1
console.log(counter()); // 输出：2
console.log(counter()); // 输出：3

要点：

内部函数可以访问外部函数的变量（count）。
闭包非常适合用于数据封装或实现私有变量。

二、事件机制与冒泡

1. 事件捕获与冒泡

JavaScript 的事件流包括捕获（从外到内）和冒泡（从内到外）两个阶段。默认情况下，大多数事件会冒泡。

示例：

javascript">// HTML 结构
/*
<div id="outer"><button id="inner">Click Me</button>
</div>
*/// JavaScript
const outer = document.getElementById("outer");
const inner = document.getElementById("inner");outer.addEventListener("click", () => {console.log("Outer clicked");
}, true); // 捕获阶段inner.addEventListener("click", (event) => {console.log("Inner clicked");event.stopPropagation(); // 阻止冒泡
}, false); // 冒泡阶段

要点：

通过 addEventListener 的第三个参数（true 或 false）指定捕获或冒泡。
使用 event.stopPropagation() 可阻止事件传播。

2. 事件委托

事件委托是通过父元素统一处理子元素的事件，适合处理动态添加的元素。

示例：

javascript">document.getElementById("outer").addEventListener("click", (event) => {if (event.target.tagName === "BUTTON") {console.log("Button clicked: " + event.target.textContent);}
});

优点：

减少事件绑定，提升性能。
动态元素无需额外绑定事件。

三、模块化开发

随着项目复杂度增加，将代码拆分为多个模块变得至关重要。JavaScript 提供了多种实现模块化的方法。

1. ES 模块

ES6 引入了 import 和 export 关键字，实现模块化。

示例：

javascript">// math.js
export function add(a, b) {return a + b;
}export const PI = 3.14;// main.js
import { add, PI } from "./math.js";
console.log(add(2, 3)); // 输出：5
console.log(PI); // 输出：3.14

要点：

使用 export 导出模块内容。
使用 import 引入模块。

2. CommonJS（Node.js 中的模块）

在 Node.js 中，使用 require 和 module.exports 实现模块化。

示例：

javascript">// math.js
module.exports = {add: (a, b) => a + b,PI: 3.14
};// main.js
const math = require("./math");
console.log(math.add(2, 3)); // 输出：5
console.log(math.PI); // 输出：3.14

四、综合案例：任务管理应用

我们通过一个小型任务管理应用，结合上述内容巩固学习。

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>任务管理</title>
</head>
<body><h1>任务管理器</h1><input type="text" id="taskInput" placeholder="输入任务"><button id="addTask">添加任务</button><ul id="taskList"></ul><script src="app.js"></script>
</body>
</html>

JavaScript 实现

javascript">const taskInput = document.getElementById("taskInput");
const addTaskButton = document.getElementById("addTask");
const taskList = document.getElementById("taskList");// 添加任务
addTaskButton.addEventListener("click", () => {const task = taskInput.value.trim();if (task) {const li = document.createElement("li");li.textContent = task;li.addEventListener("click", () => li.remove()); // 点击删除任务taskList.appendChild(li);taskInput.value = "";}
});

功能点：