前言为什么写这一篇前面62篇我们从零学完了布局、CSS、原生JS、ES6、异步、事件循环、网络协议、浏览器原理、工程化、Vue3、TS、WebSocket、权限系统、Git、微前端、性能优化、手写源码、BUG排查、面试话术。但是知识点是分散的。这一篇我把全部前端能力从头到尾串联成一个完整可上线的企业级项目。不用Vue、不用框架、不用脚手架。纯 HTML CSS 原生JS 手写全套中后台系统包含架构设计、工具封装、网络层、权限层、路由层、状态层、业务层、组件层、全局拦截、异常处理、性能优化、团队规范。学完这一篇你就真正拥有「完整前端工程思维」一、项目整体架构设计工程化思维落地1.1 项目技术栈原生 HTML5 CSS3 JavaScriptES6少量 jQuery 简化DOM操作不影响原生思想全程手写架构、手写路由、手写权限、手写状态管理、手写工具库1.2 项目包含所有核心业务能力用户登录、Token 鉴权、过期拦截、本地持久化全局请求拦截器、响应拦截器、统一报错处理前端权限体系角色权限、动态菜单、按钮权限原生 Hash 路由系统手写无框架路由全局状态管理手写简易Pinia/Vuex思想工具库防抖、节流、深拷贝、时间格式化、数据处理通用组件弹窗、提示、分页、表单校验、图片上传预览业务页面首页看板、用户管理、新增编辑删除、分页查询全局BUG处理、空数据处理、重排重绘优化、内存优化完整团队Git规范、项目目录规范、代码规范1.3 标准工程化目录结构企业级admin-project/ ├─ login.html # 登录页 ├─ index.html # 主布局框架 ├─ css/ │ └─ global.css # 全局样式、重置、布局、组件样式 ├─ js/ │ ├─ router.js # 手写路由系统 │ ├─ permission.js # 权限系统 │ ├─ store.js # 全局状态管理 │ ├─ request.js # 网络请求拦截层 │ ├─ utils.js # 工具函数库 │ ├─ components.js # 通用组件 │ └─ pages/ # 所有业务页面逻辑 └─ lib/ # 第三方库二、全局工具库封装整合ES6、性能优化、手写源码所有项目高频工具统一封装全局复用。包含高阶防抖、高阶节流、深拷贝、时间格式化、空值处理、数据格式化// js/utils.js const Utils { // 高阶防抖支持立即执行、手动取消 debounce(fn, delay 300, immediate false) { let timer null const handler function(...args) { if (timer) clearTimeout(timer) if (immediate !timer) { fn.apply(this, args) } timer setTimeout(() { if (!immediate) fn.apply(this, args) timer null }, delay) } // 手动取消防止内存泄漏 handler.cancel () { clearTimeout(timer) timer null } return handler }, // 高阶节流固定频率执行 throttle(fn, delay 300) { let lastTime 0 let timer null const handler function(...args) { const now Date.now() if (now - lastTime delay) { lastTime now fn.apply(this, args) } else if (!timer) { timer setTimeout(() { lastTime Date.now() fn.apply(this, args) timer null }, delay) } } handler.cancel () { clearTimeout(timer) timer null lastTime 0 } return handler }, // 深拷贝解决引用类型赋值问题 deepClone(obj) { if (obj null || typeof obj ! object) return obj const res Array.isArray(obj) ? [] : {} for (let key in obj) { if (obj.hasOwnProperty(key)) { res[key] this.deepClone(obj[key]) } } return res }, // 时间格式化 formatTime(time) { const d new Date(time) const y d.getFullYear() const m String(d.getMonth() 1).padStart(2, 0) const day String(d.getDate()).padStart(2, 0) return ${y}-${m}-${day} } } window.Utils Utils三、本地存储封装持久化解决方案解决页面刷新数据丢失、Pinia/Vuex持久化原理手写实现。// js/storage.js const Storage { // 普通存储 set(key, value) { localStorage.setItem(key, JSON.stringify(value)) }, get(key) { const val localStorage.getItem(key) return val ? JSON.parse(val) : null }, // 敏感数据加密存储简单base64 setToken(key, value) { const encodeStr btoa(JSON.stringify(value)) localStorage.setItem(key, encodeStr) }, getToken(key) { const val localStorage.getItem(key) if (!val) return null return JSON.parse(atob(val)) }, remove(key) { localStorage.removeItem(key) }, clear() { localStorage.clear() } } window.Storage Storage四、全局状态管理手写简易Pinia整合全局用户信息、Token、角色、权限、全局数据。原理和Pinia完全一致集中式状态、初始化、持久化、统一修改// js/store.js const Store { // 全局状态 state: { token: , role: , permission: [], userInfo: {} }, // 页面刷新初始化数据 init() { const cache Storage.getToken(userState) if (cache) { this.state.token cache.token this.state.role cache.role this.state.permission cache.permission this.state.userInfo cache.userInfo } }, // 登录后设置用户信息 setUserState(data) { this.state.token data.token this.state.role data.role this.state.permission data.permission this.state.userInfo data.userInfo Storage.setToken(userState, this.state) }, // 退出登录清空状态 logout() { this.state { token: , role: , permission: [], userInfo: {} } Storage.clear() window.location.href login.html }, // 判断是否登录 isLogin() { return !!this.state.token } } // 初始化 Store.init() window.Store Store五、网络请求封装整合HTTP/HTTPS原理、拦截器、全局异常整合前面HTTP协议、状态码、跨域、401过期、全局请求统一处理。// js/request.js const Request { baseUrl: , // 统一请求入口 async fetch(options) { const { url, method GET, data {} } options const header { Content-Type: application/json } // 携带Token if (Store.state.token) { header.Authorization Bearer ${Store.state.token} } try { const res await fetch(this.baseUrl url, { method, headers: header, body: method GET ? null : JSON.stringify(data) }) const result await res.json() // 401 Token过期拦截 if (result.code 401) { alert(登录已过期请重新登录) Store.logout() return } return result } catch (err) { alert(网络请求异常) console.error(请求错误, err) } }, get(url, data) { return this.fetch({ url, method: GET, data }) }, post(url, data) { return this.fetch({ url, method: POST, data }) } } window.Request Request六、权限系统完整实现页面权限 按钮权限整合前面企业级权限体系、动态路由、角色判断原理。// js/permission.js const Permission { // 判断页面权限 hasPagePermission(role) { const myRole Store.state.role return myRole admin || myRole role }, // 判断按钮权限 hasBtnPermission(key) { const list Store.state.permission return list.includes(key) }, // 动态渲染按钮权限 initBtnPermission() { // 所有带权限标识的按钮 const btns document.querySelectorAll([data-perm]) btns.forEach(btn { const perm btn.getAttribute(data-perm) if (!this.hasBtnPermission(perm)) { btn.style.display none } }) } } window.Permission Permission七、手写原生路由系统Hash路由不用Vue Router原生手写路由理解前端路由底层原理。// js/router.js const Router { routes: { /home: pages/home.html, /user: pages/user.html }, // 初始化路由监听 init() { window.addEventListener(hashchange, () this.render()) this.render() }, // 渲染页面 render() { let hash window.location.hash.slice(1) || /home if (!this.routes[hash]) { hash /home } // 权限拦截 if (!Store.isLogin()) { window.location.hash /login return } // 加载页面 this.loadPage(this.routes[hash]) }, // 加载html页面 async loadPage(path) { const res await fetch(path) const html await res.text() document.getElementById(mainContent).innerHTML html // 每次页面渲染后重新初始化按钮权限 Permission.initBtnPermission() } } Router.init() window.Router Router