前端知识体系·个人沉淀·2026年

晚风吹行舟三里
17 阅读7分钟

记录人：晚风吹行舟三里

开始时间：2026年2月

更新频率：每周整理一次

一、网络与HTTP

  1. token放在请求中

  • 位置：放在请求头 Authorization: Bearer <token>

  • 实现：在请求拦截器里统一添加，避免每个请求手动写

  • 注意事项：

    • token过期处理（刷新token或跳转登录）
    • GET请求也可能需要带token（如图片鉴权）

  1. GET请求body传参

  • HTTP规范：HTTP/1.1规范没有禁止GET带body，但很多服务器、代理、CDN会忽略或拒绝

  • 优点：可以把复杂参数放body，不污染URL

  • 缺点：

    • 不符合惯例，可能被拦截
    • 缓存/CDN可能出问题
    • 长度限制不明确

  • 结论：GET请求的参数放URL，复杂参数用POST

  1. HTTP缓存相关

  • 待补充：Cache-Control、Etag、Last-Modified

二、安全

  1. 对称加密 vs 非对称加密

类型原理特点常见算法应用场景
对称加密加密解密用同一把钥匙速度快，但钥匙怎么安全传给对方是问题AES、DES文件加密、大容量数据加密
非对称加密公钥加密，私钥解密速度慢，但安全，公钥可以公开传RSA、ECCHTTPS握手、数字签名

实际应用：HTTPS握手时，先用非对称加密安全地传递对称密钥，后续通信用对称加密。

三、面向对象编程（OOP）

  1. 三大特性：封装、继承、多态

特性含义类比代码体现
封装把数据和操作数据的方法包在一起，对外只暴露该暴露的遥控器：只暴露按钮，内部电路隐藏private属性 + public方法
继承子类拿父类的东西，不用重新写孩子继承父母的基因class Dog extends Animal
多态同一个方法，不同对象有不同的实现都是“按喇叭”，宝马和公交车声音不同子类重写父类方法

  1. 多态示例

typescript

class Animal { speak() { console.log('动物叫') }}
class Dog extends Animal { speak() { console.log('汪汪') }}
class Cat extends Animal { speak() { console.log('喵喵') }} *// 都是调用speak，结果不同——这就是多态*
const animals = [new Dog(), new Cat()]animals.forEach(a => a.speak())

四、设计模式

  1. 什么是设计模式？

前辈们总结的“代码界的套路”——针对反复出现的问题，给出标准化的解决方案。

  1. 三大类23种

分类作用常见例子
创建型怎么创建对象单例模式、工厂模式
结构型怎么组织类和对象代理模式、适配器模式
行为型对象之间怎么通信观察者模式、策略模式

  1. 日常开发中已经在用的设计模式

  • 观察者模式：Vue的响应式系统（数据变，页面自动更新）
  • 单例模式：Vuex的store（整个应用只有一个）
  • 工厂模式：Vue的createApp()

五、项目实战·文件预览（Vue3+TS）

  1. 多类型文件预览方案

文件类型预览方案备注
PDFpdf.js 或 pdf.js功能更全
docxdocx-preview库需配合jszip
Excelxlsx库可解析后渲染成表格
png/jpg原生支持

  1. 封装思路

  • 统一组件：传入 fileUrl 和 fileType
  • 内部用 v-if / v-else 或动态组件渲染不同预览方式
  • 公共逻辑抽成 hooks

  1. 待实现

  • 大文件分片加载
  • 预览失败降级方案

六、项目实战·路由与菜单

  1. 需求拆解

  • 通过URL参数区分不同页面
  • 左侧菜单高亮
  • 底部tag标签（多页签）
  • 页面内标题动态变化

  1. 技术要点

功能实现思路
URL参数route.query 获取参数，动态渲染内容
菜单高亮route.path 匹配菜单项
tag标签keep-alive + 自定义tab列表
页面标题根据参数动态设置

  1. 这套方案的价值

大厂后台管理系统标配——多页签、可缓存、可关闭。

七、项目实战·文件上传

  1. 文件上传大小限制统一声明

  • 前端限制：在配置文件或环境变量中统一声明最大上传大小，上传前校验，超过则提示
  • 后端限制：后端也要做限制，防止前端绕过
  • 示例配置：

typescript

// config/upload.tsexport const MAX_FILE_SIZE = 10 * 1024 * 1024 // 10MB

  1. 待补充

  • 大文件分片上传
  • 断点续传
  • 上传进度

八、nginx

  1. nginx三板斧

板斧作用一句话理解
反向代理把请求转发给后端服务器前台只认识nginx，不认识后端
负载均衡把请求分给多个后端别让一个后端累死
静态资源服务直接返回HTML/CSS/JS不用经过后端，更快

  1. 方法论

遇到性能问题，先看这三板斧能不能解决。

九、性能优化·雅虎35条

  1. 是什么

Yahoo! 团队总结的提升网站速度的35条最佳实践。

  1. 核心分类

类别核心思想典型做法
内容减少请求次数合并CSS/JS、CSS Sprites
服务器让缓存生效配Expires、用CDN、Gzip压缩
CSS别让样式堵住渲染CSS放顶部、别用CSS表达式
JavaScript别让脚本拖慢页面JS放底部、延迟加载
Cookie别让饼干太大减小Cookie、静态资源用无Cookie域名
图片别让图太大优化图片、别在HTML里缩放
移动端照顾小屏设备单个内容小于25K

  1. 最核心的几条

  • 减少HTTP请求：80%的响应时间花在下载组件上
  • 用CDN：把静态资源放离用户近的地方
  • 加Expires/Cache-Control：让浏览器缓存
  • CSS放顶部，JS放底部：别让脚本阻塞渲染
  • Gzip压缩：文件体积能小70%

  1. 对工作的启示

和后端聊接口时，可以问：“这个接口能缓存吗？要不要配Cache-Control？”

十、工作方法与认知

  1. 前端写操作手册（开发阶段）

利弊怎么平衡
新人能快速上手写得细了花时间只写“变不动的”和“不看就废的”——项目结构、启动步骤、关键逻辑
自己回头看也清楚需求一变就得改让代码自己说话
领导觉得你有文档意识写得粗了没用定期更新，不求完美

  1. 多项目之间平衡自己

  • 优先排：哪个急？哪个重要？哪个领导盯得紧？
  • 每天列三件事：今天必须完成的
  • 不是技术问题，是精力管理问题

  1. 方法论

遇到问题，先想“有没有套路”：

  • nginx有三板斧
  • 性能优化有雅虎35条
  • 写代码有设计模式
  • 目标：遇到一类问题，就总结一套自己的“三板斧”

  1. 形成自己的开发风格

  • 稳定可预期：命名习惯、目录结构、注释方式一致
  • 别人能看出来“这是你写的”
  • 怎么形成：多写、多回头看、多改

  1. 能力强的开发直接跟后端说需要多少接口

  • 这不是“强势”，是能想清楚自己要什么

  • 怎么做：

    • 先想清楚页面要什么数据
    • 画出数据结构
    • 拿着图去和后端聊
    • 告诉后端：这几个数据拼一起返回，别让我调两次

十一、测试相关

  1. 黑白灰盒

类型含义应用场景
黑盒不管内部，只看输入输出功能测试
白盒看内部代码逻辑调试、自测
灰盒知道一点内部结构，但不全看调接口时——知道后端大概怎么设计的，但不用看后端代码

十二、每周记录模板

本周日期：__2__月__24__日 - __2__月__27__日

分类记录内容状态
网络/安全待整理/已掌握
OOP/设计模式待整理/已掌握
项目实战待整理/已掌握
工作方法待整理/已掌握
性能优化待整理/已掌握

本周最有价值的1个收获：

下周想解决的问题：

十三、待补充清单

  • 继承、封装、多态 写一个完整的TS示例
  • 对称加密和非对称加密 画对比图
  • 文件预览组件 封装一个可复用的
  • 多页签管理系统 自己实现一个demo
  • nginx 本地搭一遍，试三板斧
  • 雅虎35条 挑5条在工作中实践
avatar
文章
阅读
粉丝