【前端】成长路线

发布于:2025-06-02 ⋅ 阅读:(15) ⋅ 点赞:(0)

第一阶段:前端基础

  • HTML5:语义化标签、表单、音视频、canvas
  • CSS3:
    布局:Flex、Grid
    动画:transition、animation
    响应式:媒体查询、rem/vw
  • JavaScript:
    基础语法、函数、对象、数组、DOM/BOM
    异步编程(Promise、async/await)
    ES6+ 新特性(解构、箭头函数、模块化、展开运算符等)

第二阶段:核心进阶

  • 深入理解 JavaScript
    作用域 & 闭包
    原型与原型链
    this、call、apply、bind
    深拷贝 / 浅拷贝
    事件机制 & 冒泡 / 捕获
    模块化(ES Module、CommonJS)
  • 浏览器原理
    DOM 树 / 渲染流程
    回流重绘
    Event Loop、宏任务 & 微任务
    Cookie / LocalStorage / SessionStorage
    浏览器缓存机制
  • 网络基础
    HTTP 协议、HTTPS
    请求方法、状态码
    跨域与解决方案(CORS、JSONP)

第三阶段:前端框架(Vue / React)

选一种主学,另一种了解

  • Vue3 路线
    Composition API(setup、ref、reactive)
    生命周期钩子
    组件通信(props / emit / provide / inject)
    路由(Vue Router)
    状态管理(Pinia / Vuex)
    常用指令(v-for、v-if、v-model)
  • React 路线
    函数组件、Hooks(useState / useEffect / useRef)
    组件复用 & Context API
    React Router v6
    状态管理(Redux Toolkit / Zustand)
    组件库(AntD、Material UI)

第四阶段:工程化 & 实战能力

  • 开发工具 & 打包工具
    npm / pnpm / yarn
    Vite / Webpack 基础
    Babel、ESLint、Prettier
  • 项目实战能力
    Axios 接口请求封装
    响应式设计 / 移动端适配
    权限控制(路由守卫、Token 验证)
    Git 基础、团队协作流程
  • 推荐实战项目
    管理后台系统(登录、表格、分页、筛选、CRUD)
    电商前台页面(商品页、购物车、支付流程)

第五阶段:就业准备 & 面试突击

  • 必会内容
    前端性能优化
    SSR / SPA 原理
    虚拟 DOM、diff 算法
    安全性(XSS、CSRF)
    前端部署:Nginx、GitHub Pages、Vercel、Netlify
  • 常见面试题理论&实战
  • 项目/简历优化
  • 技术选型说明 + 架构图

网站公告

今日签到

点亮在社区的每一天
去签到