六十天前端强化训练之第八天到第十四天——综合案例：用户管理系统
=====欢迎来到编程星辰海的博客讲解======
看完可以给一个免费的三连吗，谢谢大佬！
目录
一、知识体系详解
1. 变量与作用域
2. 箭头函数特性
3. 数组高阶函数
4. DOM操作原理
5. 事件传播机制
6. 闭包核心原理
7. 原型继承体系
8. Promise工作流程
二、综合案例：用户管理系统
1. HTML结构
2. JavaScript代码（app.js）
三、实现效果
四、学习要点总结
五、扩展学习推荐
官方文档
优质文章
一、知识体系详解
1. 变量与作用域
JAVASCRIPT
// var 存在变量提升和函数作用域 console.log(a); // undefined var a = 10; // let/const 块级作用域 { let b = 20; const MAX = 100; } console.log(b); // ReferenceError
2. 箭头函数特性
JAVASCRIPT
const obj = { name: 'obj', regularFunc: function() { console.log(this.name); // obj }, arrowFunc: () => { console.log(this.name); // undefined（继承外层this） } }
3. 数组高阶函数
JAVASCRIPT
const numbers = [1,2,3,4]; // map转换 const doubled = numbers.map(n => n * 2); // filter筛选 const evens = numbers.filter(n => n%2 === 0); // reduce聚合 const sum = numbers.reduce((acc, cur) => acc + cur, 0);
4. DOM操作原理
JAVASCRIPT
// 创建元素 const div = document.createElement('div'); div.classList.add('box'); // 批量插入 const fragment = document.createDocumentFragment(); items.forEach(item => { const li = document.createElement('li'); fragment.appendChild(li); }); ul.appendChild(fragment);
5. 事件传播机制
6. 闭包核心原理
JAVASCRIPT
function createCounter() { let count = 0; // 闭包保护的变量 return { increment: () => ++count, getCount: () => count } }
7. 原型继承体系
JAVASCRIPT
class Animal { constructor(name) { this.name = name; } speak() { console.log(`${this.name} makes a noise`); } } class Dog extends Animal { constructor(name) { super(name); } speak() { super.speak(); console.log(`${this.name} barks`); } }
8. Promise工作流程
二、综合案例：用户管理系统（这是完整且可运行代码，有详细注释）
1. HTML结构
HTML
<!DOCTYPE html> <html> <head> <title>用户管理系统</title> <style> /* CSS样式 */ .container { max-width: 800px; margin: 20px auto; } .search-box { margin-bottom: 20px; } table { width: 100%; border-collapse: collapse; } th, td { padding: 12px; border: 1px solid #ddd; text-align: left; } th { background-color: #f5f5f5; cursor: pointer; } .pagination { margin-top: 20px; } </style> </head> <body> <div class="container"> <div class="search-box"> <input type="text" id="searchInput" placeholder="输入姓名或邮箱搜索..."> </div> <div id="userTable"></div> <div class="pagination" id="pagination"></div> </div> <script src="app.js"></script> </body> </html>
2. JavaScript代码（app.js）
JAVASCRIPT
class UserManager { constructor() { this.users = []; // 原始数据 this.filteredUsers = []; // 过滤后数据 this.currentPage = 1; // 当前页码 this.pageSize = 5; // 每页条数 this.init(); } /** 初始化方法（使用异步立即执行函数） */ async init() { await this.fetchUsers(); this.renderTable(); this.setupEventListeners(); } /** 使用fetch获取数据（Promise应用） */ async fetchUsers() { try { const response = await fetch('https://dummyjson.com/users?limit=20'); const data = await response.json(); this.users = data.users.map(user => ({ id: user.id, name: `${user.firstName} ${user.lastName}`, age: user.age, email: user.email, department: user.company.department })); this.filteredUsers = [...this.users]; } catch (error) { console.error('数据加载失败:', error); } } /** 渲染表格（DOM操作） */ renderTable() { const start = (this.currentPage - 1) * this.pageSize; const end = start + this.pageSize; const currentUsers = this.filteredUsers.slice(start, end); // 创建表格结构 const table = document.createElement('table'); table.innerHTML = ` <thead> <tr> <th data-field="id">ID ▼</th> <th data-field="name">姓名 ▼</th> <th data-field="age">年龄 ▼</th> <th data-field="email">邮箱 ▼</th> <th data-field="department">部门 ▼</th> </tr> </thead> <tbody> ${currentUsers.map(user => ` <tr> <td>${user.id}</td> <td>${user.name}</td> <td>${user.age}</td> <td>${user.email}</td> <td>${user.department}</td> </tr> `).join('')} </tbody> `; // 清空并更新表格 const container = document.getElementById('userTable'); container.innerHTML = ''; container.appendChild(table); // 渲染分页 this.renderPagination(); } /** 分页组件 */ renderPagination() { const totalPages = Math.ceil(this.filteredUsers.length / this.pageSize); const pagination = document.getElementById('pagination'); // 生成页码按钮 pagination.innerHTML = Array.from({length: totalPages}, (_, i) => `<button class="${i + 1 === this.currentPage ? 'active' : ''}" onclick="userManager.goToPage(${i + 1})"> ${i + 1} </button>` ).join(' '); } /** 事件绑定（使用事件委托） */ setupEventListeners() { // 搜索功能 document.getElementById('searchInput').addEventListener('input', (e) => { const keyword = e.target.value.toLowerCase(); this.filteredUsers = this.users.filter(user => user.name.toLowerCase().includes(keyword) || user.email.toLowerCase().includes(keyword) ); this.currentPage = 1; this.renderTable(); }); // 表头排序（闭包保存排序状态） document.querySelector('#userTable').addEventListener('click', (e) => { if (e.target.tagName === 'TH') { const field = e.target.dataset.field; this.sortUsers(field); } }); } /** 排序逻辑 */ sortUsers(field) { let isAsc = true; // 闭包保存排序方向 return () => { this.filteredUsers.sort((a, b) => { if (typeof a[field] === 'string') { return isAsc ? a[field].localeCompare(b[field]) : b[field].localeCompare(a[field]); } return isAsc ? a[field] - b[field] : b[field] - a[field]; }); isAsc = !isAsc; this.renderTable(); } } /** 分页跳转 */ goToPage(page) { this.currentPage = page; this.renderTable(); } } // 初始化系统 const userManager = new UserManager();
三、实现效果
四、学习要点总结
-
变量作用域控制
- 使用const/let进行块级作用域管理
- 使用IIFE管理私有变量
-
异步流程控制
- async/await处理异步操作
- Promise链式调用错误处理
-
DOM操作优化
- 使用文档片段批量插入
- 事件委托减少监听器数量
-
函数式编程
- map/filter/reduce组合使用
- 纯函数避免副作用
-
模块化设计
- 使用Class组织代码
- 职责单一原则
五、扩展学习推荐
官方文档
- MDN JavaScript Guide
- ECMAScript 6 入门
- DOM Living Standard
优质文章
- JavaScript 闭包的终极指南
- Promise 使用模式最佳实践
- 现代 JavaScript 教程
建议通过Chrome开发者工具的Sources面板调试代码，观察闭包变量和事件传播过程，配合console.log验证程序执行流程。