SuperAPI AI 工具集

osmani-patterns-performance

设计与创作

查看项目

更新于 10-15 20:28

技能介绍

用途:帮助开发者按 Addy Osmani 的风格编写 JavaScript,核心是将经过验证的设计模式与性能优先理念结合,适用于前端代码编写、重构与性能优化参考。

主要能力与内容:

  1. 设计模式:模块模式(封装与私有状态)、观察者模式(事件系统,EventEmitter 的 on/off/emit)、工厂模式(按类型创建对象,如通知)、单例模式(全局配置)。
  2. 性能优化:基于路由的代码分割与动态 import、React.lazy 与 Suspense、用 requestIdleCallback 预取关键路由、用 Intersection Observer 做图片与模块的懒加载、debounce 与 throttle 控制事件频率、虚拟滚动渲染大列表。
  3. 核心理念:先做对再做好;性能是必需品而非功能;最好的请求是从未发出的请求;渐进增强;测量—优化—再测量。
  4. 编码准则:始终为问题选择合适模式、优化前后都要测量、关注加载性能与包体积、对大应用做代码分割、非关键资源懒加载、在真实设备与慢网络下测试;不要在不合适处套用模式、不测量就优化、一次性加载全部 JavaScript、忽略 Core Web Vitals、用重计算阻塞主线程、发布未使用的 JavaScript。

使用方式:资料未提供具体安装命令或调用步骤,仅给出风格与代码模式示例(如模块模式、EventEmitter、NotificationFactory、debounce、throttle、VirtualList、Config 单例等),实践时按上述模式在项目中应用即可。

限制:资料未说明该风格的官方收录渠道、许可、收费或平台支持情况;未提供完整工程脚手架与工具链配置步骤。适用场景为现代 Web 前端开发与性能优化,需在真实设备与慢网络下验证效果。