六十天前端强化训练之第八天到第十四天—

六十天前端强化训练之第八天到第十四天——综合案例：用户管理系统

=====欢迎来到编程星辰海的博客讲解======

看完可以给一个免费的三连吗，谢谢大佬！

一、知识体系详解

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();