todo-blogs

## 新增文章

### 前端基础

1. **CSS 基础之 flex 与 grid 布局**
   - Flexbox 容器/项目属性详解（justify-content、align-items、flex-grow等）
   - Grid 布局完整教程（grid-template、gap、grid-area等）
   - 常见布局案例（圣杯布局、响应式网格、瀑布流）
   - Flex vs Grid 对比与选择建议

2. **CORS 跨域解决方案**
   - 同源策略基础概念（协议、域名、端口）
   - CORS 原理（简单请求 vs 非简单请求、预检请求）
   - 8种跨域解决方案：CORS、JSONP、代理、postMessage、WebSocket、document.domain、window.name、location.hash
   - 服务端配置示例（Node.js/Express、Spring Boot、Nginx）
   - 开发/生产环境最佳实践
   - 携带 Cookie 的跨域请求处理

3. **浏览器页面间通信方案详解**
   - PostMessage API 跨域通信（父子窗口、iframe 通信）
   - LocalStorage + Storage Event 同源通信
   - BroadcastChannel API 现代浏览器方案
   - SharedWorker 多标签页协调
   - 实战应用（登录状态同步、购物车同步、主题设置同步）
   - 安全性最佳实践（来源验证、错误处理）

### JavaScript 高级

4. **JS 深浅拷贝详解**
   - 基本类型 vs 引用类型的赋值区别
   - 5种浅拷贝方法（Object.assign、扩展运算符、concat、slice、手动实现）
   - 5种深拷贝方法（JSON 方法、递归基础版、递归完整版、structuredClone、lodash.cloneDeep）
   - JSON 方法的局限性（类型丢失、循环引用）
   - 处理特殊类型（Date、RegExp、Map、Set）
   - 循环引用的 WeakMap 解决方案

5. **JS 技巧大全**
   - 类型判断：数组、对象、数字、通用类型判断函数
   - 遍历方法：对象遍历（for...in、Object.keys/values/entries、Reflect.ownKeys），数组遍历（for、forEach、for...of、map）
   - 数组操作：展开合并、多维展平、去重、求和、分组
   - 防抖节流、深拷贝、Promise 工具函数实现
   - 字符串操作：反转、首字母大写、驼峰下划线转换
   - 性能优化：对象属性缓存、大数组分批处理
   - 工具函数：随机字符串、延迟执行、重试机制

6. **JS 高级-8-Proxy 与 Reflect**
   - Proxy 基础概念与13种拦截操作（get、set、has、deleteProperty等）
   - Reflect 的13个方法与设计目的
   - 实战应用：数据验证、负索引数组、只读对象、属性访问追踪
   - 响应式数据实现（类似 Vue 3）
   - 性能考虑与最佳实践

7. **JS 高级-9-Promise**
   - Promise 三种状态与基础用法（pending、fulfilled、rejected）
   - then、catch、finally 方法详解
   - 5个静态方法（Promise.all、Promise.allSettled、Promise.race、Promise.any、Promise.resolve/reject）
   - 进阶应用：并发控制、重试机制、超时取消
   - 手写 Promise 实现原理
   - 实战案例：封装请求库、顺序执行、Promise 缓存、Promise 队列

8. **JS 标准内置对象**（补充完整）
   - 值属性（globalThis、Infinity、NaN、undefined、eval、isFinite、isNaN、parseFloat、parseInt）
   - 基本对象（Object、Function、Boolean、Symbol、Error）
   - 数字日期对象（Number、BigInt、Math、Date）
   - 字符串与正则（String、RegExp）
   - 集合对象（Array、Map、Set、WeakMap、WeakSet）
   - 结构化数据（ArrayBuffer、JSON）
   - 内存管理对象（WeakRef、FinalizationRegistry）
   - 控制抽象对象（Iterator、Promise、Generator）
   - 反射（Reflect、Proxy）

### 前端工程化

9. **前端性能优化合集**
   - 性能指标：Core Web Vitals（LCP、FID、CLS）、其他指标（FCP、TTI、TBT、TTFB）
   - 加载优化：资源压缩（Webpack、Nginx Gzip）、代码分割、Tree Shaking、懒加载（图片、路由）
   - 渲染优化：避免重排重绘、requestAnimationFrame、虚拟列表、防抖节流
   - 网络优化：HTTP 缓存策略、CDN、资源预加载（dns-prefetch、preconnect、preload、prefetch）、HTTP/2
   - JavaScript 优化：避免全局变量、事件委托、Web Worker
   - CSS 优化：避免复杂选择器、CSS 动画、will-change
   - React 优化：React.memo、useMemo、useCallback、代码分割
   - 监控测试：Performance API、Web Vitals、Lighthouse

10. **前端安全防护合集**
    - XSS 攻击：三种类型（反射型、存储型、DOM型）、5种防御方法（输入过滤、输出编码、CSP、安全API、DOMPurify）
    - CSRF 攻击：原理、攻击示例、4种防御方法（CSRF Token、SameSite Cookie、Referer 验证、自定义请求头）
    - 点击劫持：原理、3种防御方法（X-Frame-Options、CSP frame-ancestors、JavaScript 检测）
    - SQL 注入：攻击示例、防御措施（参数化查询、ORM）
    - 敏感信息泄露：常见泄露途径、防御措施（环境变量、过滤敏感字段、错误处理）
    - 中间人攻击：HTTPS 配置、HSTS
    - 第三方依赖安全：npm audit、Snyk、锁定版本
    - 安全最佳实践：密码加密（bcrypt）、JWT 安全、文件上传验证

### React

11. **React 钩子函数-2-useContext**
    - Context 基础概念与创建方式
    - useContext 基础与进阶用法（多个 Context、嵌套 Context、Context 分离）
    - 实战案例：全局用户信息管理、多语言国际化、全局通知系统、全局配置管理
    - 性能优化：避免不必要重渲染、拆分 Context、使用 memo
    - Context vs Redux 对比与选择建议
    - 最佳实践与常见陷阱

12. **前端路由与 React Router 详解**（补充完整）
    - SPA 概念与原理
    - 前端路由原理：Hash 模式 vs History 模式对比
    - React Router 基础：安装配置、核心组件（BrowserRouter、Routes、Route、Link、NavLink）
    - React Router 进阶：动态路由、嵌套路由、编程式导航、路由守卫、懒加载、查询参数
    - 实战案例：管理后台布局、面包屑导航
    - 服务器配置（Nginx、Apache）

### 3D 图形

13. **Three.js 学习笔记**（补充完整）
    - Three.js 背景介绍与核心概念（Scene、Camera、Renderer）
    - 几何体（BoxGeometry、SphereGeometry、自定义几何体）
    - 材质（MeshBasicMaterial、MeshStandardMaterial、MeshPhongMaterial 等）
    - 光源（AmbientLight、PointLight、DirectionalLight、SpotLight）
    - 纹理（TextureLoader、纹理重复、纹理映射）
    - 动画循环与 requestAnimationFrame
    - React Three Fiber（R3F）：Canvas、useFrame、Drei 辅助库
    - 实战案例：3D 产品展示、粒子系统、交互式场景、性能优化（InstancedMesh）
    - 最佳实践：性能优化、内存管理、响应式设计

---