当前位置： 首页 > news >正文

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

news 来源：原创 2025/5/26 5:14:03

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

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

目录

一、知识体系详解

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

三、实现效果

四、学习要点总结

  1. 变量作用域控制

    • 使用const/let进行块级作用域管理
    • 使用IIFE管理私有变量

  2. 异步流程控制

    • async/await处理异步操作
    • Promise链式调用错误处理

  3. DOM操作优化

    • 使用文档片段批量插入
    • 事件委托减少监听器数量

  4. 函数式编程

    • map/filter/reduce组合使用
    • 纯函数避免副作用

  5. 模块化设计

    • 使用Class组织代码
    • 职责单一原则

五、扩展学习推荐

官方文档
  1. MDN JavaScript Guide
  2. ECMAScript 6 入门
  3. DOM Living Standard
优质文章
  1. JavaScript 闭包的终极指南
  2. Promise 使用模式最佳实践
  3. 现代 JavaScript 教程

建议通过Chrome开发者工具的Sources面板调试代码，观察闭包变量和事件传播过程，配合console.log验证程序执行流程。

相关文章：

  • Releases（发布） 和 版本管理 是两个紧密相关的概念
  • ctfshow做题笔记—栈溢出—pwn65~pwn68
  • Python实现网络通信：Socket模块与TCP/IP协议全解析
  • 【嵌入式】RT-Thread入门（一）内核移植
  • 【汇编语言】单片机程序执行过程
  • MySQL数据库复杂的增删改查操作
  • 【算法 C/C++】一维差分
  • 本科毕业论文开题报告需要查重吗？
  • API随心搭接口：一键定制你的专属数据解决方案
  • 图片的拖拽+缩放
  • envsetup和python venv
  • 跟踪性能提高11%｜端到端新架构DMAD：通过分离语义-运动学习解决负迁移难题
  • 山东大学离散数学第五章习题解析
  • 理论+实操：MyBlockly 可视化编程工具详解，以及如何基于 pymycobot 库控制ultraArm 机械臂
  • C#-扩展方法-Linq
  • u盘和硬盘的存储结构
  • 拦截器与过滤器
  • LPZero: Language Model Zero-cost Proxy Search from Zero（未更新完预览版本）
  • C++算法——差分
  • 在Vue中 使用 Web Worker
  • 做网站java要什么/免费的行情网站
  • 华强北网站建设/免费的电脑优化软件
  • 成都网站建设优惠活动/长春视频剪辑培训机构
  • 运河网站制作/推广广告赚钱软件
  • 坂田网站建设推广公司/最吸引人的营销广告词
  • 网站建设网站制作/汕头百度关键词推广