jiaqi-xiao MagicPocket .cursorrules file for JavaScript

# Magic Pocket 前端插件代码风格指南

## 1. 文件结构与命名

### 1.1 文件命名
- 使用 camelCase 命名法
- 文件名应当表明其主要功能，如 `floatingWindow.js`
- 组件相关文件使用组件名命名

### 1.2 目录结构
```
Front/
  ├── src/
  │   ├── content/     # 内容脚本
  │   ├── background/  # 后台脚本
  │   ├── popup/       # 弹出窗口
  │   └── utils/       # 工具函数
  ├── styles/          # 样式文件
  └── lib/            # 第三方库
```

## 2. 代码组织

### 2.1 类的组织
- 使用 ES6 类语法
- 类名使用 PascalCase
- 构造函数在最前面
- 公共方法在前，私有方法在后
- 相关方法应该组织在一起

### 2.2 方法命名
- 初始化方法使用 `init` 前缀
- 设置方法使用 `setup` 前缀
- 创建元素方法使用 `create` 前缀
- 更新相关方法使用 `update` 前缀
- 事件处理方法使用 `handle` 前缀

## 3. 样式规范

### 3.1 样式定义
- 使用 Object.assign 进行样式设置
- 样式属性按照以下顺序排列:
  1. 定位属性 (position, top, right, z-index)
  2. 盒模型属性 (display, width, height, margin, padding)
  3. 视觉属性 (background, border, box-shadow)
  4. 文字属性 (font, color, text-align)
  5. 其他属性

### 3.2 类名命名
- 使用 kebab-case 命名法
- 组件前缀使用功能描述，如 `floating-window`
- 子元素使用父元素名称作为前缀

## 5. 设计模式

### 5.1 组件设计
- 采用单一职责原则
- 组件应该是独立和可复用的
- 使用组合优于继承

### 5.2 状态管理
- 使用 chrome.storage 进行状态持久化
- 本地状态使用类属性管理
- 状态更新后需要触发相应的视图更新


## 7. 性能考虑

### 7.1 DOM 操作
- 批量进行 DOM 操作
- 使用 DocumentFragment 优化多个元素的添加
- 注意防抖和节流的使用

### 7.2 资源加载
- 懒加载非必要的资源
- 合理使用缓存机制