八、全局通用组件封装（弹窗、提示、表单）

整合项目所有复用型UI逻辑，零框架手写组件思想。

// js/components.js const Component = { // 消息提示 toast(msg) { const div = document.createElement("div") div.innerText = msg div.style.cssText = ` position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 6px 16px; border-radius: 4px; z-index: 9999; ` document.body.appendChild(div) setTimeout(() => div.remove(), 2000) }, // 确认弹窗 confirm(msg, success) { if (window.confirm(msg)) { success() } } } window.Component = Component

九、登录页完整逻辑（鉴权+拦截+状态落地）

整合 Token、登录逻辑、状态存储、跳转拦截。

// login.js const loginBtn = document.querySelector("#loginBtn") loginBtn.onclick = Utils.debounce(async () => { const username = document.querySelector("#username").value const password = document.querySelector("#password").value if (!username || !password) { Component.toast("账号密码不能为空") return } // 模拟登录接口 const res = await Request.post("/login", { username, password }) // 存储全局状态 Store.setUserState({ token: res.token, role: res.role, permission: res.permission, userInfo: res.userInfo }) Component.toast("登录成功") window.location.href = "index.html" }, 500)

十、用户管理业务逻辑（表格、分页、新增、删除、权限）

整合数据渲染、DOM操作、防抖搜索、权限控制、空值处理

// user.js // 搜索防抖 const searchUser = Utils.debounce(async () => { const key = document.querySelector("#searchKey").value const res = await Request.get("/user/list", { key }) renderTable(res.data) }, 400) // 渲染表格 function renderTable(list) { const table = document.querySelector("#userTable") if (!list.length) { table.innerHTML = "<tr><td colspan='6'>暂无数据</td></tr>" return } let html = "" list.forEach(item => { html += ` <tr> <td>${item.id}</td> <td>${item.name}</td> <td>${item.phone}</td> <td>${Utils.formatTime(item.time)}</td> <td data-perm="user:edit"><button>编辑</button></td> <td data-perm="user:del"><button>删除</button></td> </tr> ` }) table.innerHTML = html // 刷新按钮权限 Permission.initBtnPermission() }

十一、全篇终极总结（62篇知识点全部落地）

这一篇，完成了所有前端能力的闭环落地：

1、原生JS高阶能力：防抖、节流、深拷贝、格式化、异步处理

2、工程化思想：分层架构、工具分离、状态分离、接口分离、组件分离

3、网络原理：HTTP请求、拦截器、Token鉴权、401过期处理

4、权限体系：角色权限、动态菜单、按钮权限、页面拦截

5、路由原理：前端Hash路由、页面无刷新跳转、路由守卫

6、状态管理：集中式状态、持久化、全局复用（Pinia核心原理）

7、性能优化：防抖节流减少请求、权限按需渲染、避免重复DOM操作

8、BUG处理：空数据判断、网络异常、登录过期、权限拦截

你现在不再是只会背知识点的小白。

你拥有了从零搭建企业级前端项目的完整能力。