📚 学习笔记

编程学习心得与知识总结

编程基础

异步编程深度学习笔记

Promise、async/await 和生成器的深度理解与应用场景分析

查看笔记 →
异步编程是JavaScript的核心概念,理解它对写好现代代码至关重要。 ## 回调函数时代 最早的异步解决方案是回调函数,但容易形成"回调地狱"。 ```javascript getData(function(a){ getMoreData(a, function(b){ getMoreData(b, function(c){ // 回调地狱 }) }) }) ``` ## Promise的出现 Promise解决了回调地狱问题,提供了链式调用。 ```javascript getData() .then(data => getMoreData(data)) .then(data => processData(data)) .catch(error => console.error(error)) ``` ## async/await语法糖 async/await让异步代码看起来像同步代码。 ```javascript async function process() { try { const data = await getData(); const result = await processData(data); return result; } catch (error) { console.error(error); } } ``` ## 生成器函数 Generator函数可以暂停和恢复执行。
设计模式

设计模式在前端中的应用

工厂模式、观察者模式、策略模式等在React中的实际应用

查看笔记 →
设计模式是可复用的解决方案,学习它能提高代码质量。 ## 工厂模式 创建不同类型的对象而不需要指定具体的类。 ```javascript const ComponentFactory = { createButton: () => <button />, createInput: () => <input />, createTable: () => <table /> } ``` ## 观察者模式 订阅-发布模式,广泛用于事件系统。 ```javascript class EventEmitter { on(event, listener) { } emit(event, data) { } off(event, listener) { } } ``` ## 策略模式 定义一系列算法,把它们一个个封装起来。 ```javascript const strategies = { fast: () => console.log('Fast strategy'), slow: () => console.log('Slow strategy') } ``` ## 单例模式 确保一个类只有一个实例,并提供全局访问。
算法

数据结构与算法笔记

常见数据结构、排序算法和动态规划问题深度分析

查看笔记 →
数据结构与算法是编程的基础,直接影响代码性能。 ## 常见数据结构 - 数组(Array) - 链表(LinkedList) - 栈(Stack) - 队列(Queue) - 树(Tree) - 图(Graph) ## 排序算法时间复杂度对比 - 冒泡排序:O(n²) - 快速排序:O(n log n) - 归并排序:O(n log n) - 堆排序:O(n log n) ## 动态规划 解决重叠子问题和最优子结构问题。 ## 搜索算法 - 二分查找:O(log n) - 深度优先搜索(DFS) - 广度优先搜索(BFS)
安全

Web安全最佳实践

XSS、CSRF、SQL注入等常见攻击和防御方案

查看笔记 →
Web安全是开发的重要方面,必须充分重视。 ## XSS(跨网站脚本) 攻击者注入恶意脚本到网页中。 防御方案: - HTML转义 - 使用CSP(内容安全策略) - 避免使用eval() ## CSRF(跨站请求伪造) 攻击者冒充用户发送请求。 防御方案: - 验证令牌(Token) - SameSite Cookie属性 - 验证Referer头 ## SQL注入 通过输入恶意SQL语句攻击数据库。 防御方案: - 使用参数化查询 - 输入验证和过滤 - 最小权限原则
性能

前端性能优化笔记

核心Web指标、加载优化、渲染优化等实践总结

查看笔记 →
性能优化是用户体验的关键,需要系统性的方法。 ## 核心Web指标 - LCP(Largest Contentful Paint):2.5秒内 - FID(First Input Delay):100毫秒内 - CLS(Cumulative Layout Shift):0.1以下 ## 加载优化 - 代码分割和懒加载 - 资源压缩(gzip、Brotli) - 图片优化(WebP、渐进式JPEG) - CDN加速 ## 渲染优化 - 避免重排和重绘 - 虚拟滚动 - 防抖和节流 - React性能优化(memo、useMemo) ## 监控和分析 - 使用Performance API - 集成分析工具 - 建立性能基线