Claude Code JavaScript开发子代理深度解析：打造你的全栈JS架构师

// 场景对比：处理异步数据请求

// ❌ 通用Claude可能给你的代码
function getData() {
let result;
  fetch('/api/data')
    .then(res => res.json())
    .then(data => {
      result = data;  // 异步陷阱！
    });
return result;  // undefined！
}
// 问题：异步处理错误、没有错误处理、内存泄漏风险

// ✅ JavaScript子代理会给你的专业方案
class DataService {
constructor() {
    this.abortController = null;
    this.cache = newMap();
    this.pendingRequests = newMap();
  }

async getData(endpoint, options = {}) {
    // 缓存检查
    const cacheKey = `${endpoint}-${JSON.stringify(options)}`;
    if (this.cache.has(cacheKey)) {
      const cached = this.cache.get(cacheKey);
      if (Date.now() - cached.timestamp < 5 * 60 * 1000) { // 5分钟缓存
        return cached.data;
      }
    }

    // 防止重复请求
    if (this.pendingRequests.has(cacheKey)) {
      returnthis.pendingRequests.get(cacheKey);
    }

    // 可取消的请求
    this.abortController = new AbortController();
    
    const requestPromise = this.performRequest(endpoint, {
      ...options,
      signal: this.abortController.signal
    });

    this.pendingRequests.set(cacheKey, requestPromise);

    try {
      const data = await requestPromise;
      
      // 缓存结果
      this.cache.set(cacheKey, {
        data,
        timestamp: Date.now()
      });

      // 清理过期缓存（防止内存泄漏）
      this.cleanupCache();
      
      return data;
    } catch (error) {
      if (error.name === 'AbortError') {
        console.log('Request was cancelled');
        returnnull;
      }
      
      // 错误重试逻辑
      if (options.retry && options.retryCount > 0) {
        awaitthis.delay(options.retryDelay || 1000);
        returnthis.getData(endpoint, {
          ...options,
          retryCount: options.retryCount - 1
        });
      }
      
      thrownew DataServiceError(`Failed to fetch ${endpoint}`, error);
    } finally {
      this.pendingRequests.delete(cacheKey);
    }
  }

async performRequest(endpoint, options) {
    const response = await fetch(endpoint, options);
    
    if (!response.ok) {
      thrownew HTTPError(response.status, response.statusText);
    }
    
    // 根据Content-Type自动处理响应
    const contentType = response.headers.get('content-type');
    if (contentType?.includes('application/json')) {
      return response.json();
    } elseif (contentType?.includes('text/')) {
      return response.text();
    } else {
      return response.blob();
    }
  }

  cleanupCache() {
    const now = Date.now();
    const maxAge = 10 * 60 * 1000; // 10分钟
    
    for (const [key, value] ofthis.cache.entries()) {
      if (now - value.timestamp > maxAge) {
        this.cache.delete(key);
      }
    }
  }

  cancel() {
    if (this.abortController) {
      this.abortController.abort();
    }
  }

  delay(ms) {
    returnnewPromise(resolve => setTimeout(resolve, ms));
  }
}

// 自定义错误类
class DataServiceError extends Error {
constructor(message, cause) {
    super(message);
    this.name = 'DataServiceError';
    this.cause = cause;
  }
}

class HTTPError extends Error {
constructor(status, statusText) {
    super(`HTTP ${status}: ${statusText}`);
    this.name = 'HTTPError';
    this.status = status;
  }
}

---
name: javascript-developer
description: Master modern JavaScript ES2024+ features, async patterns, and performance optimization. Specializes in both client-side and server-side JavaScript development. Use PROACTIVELY for JavaScript-specific optimizations and advanced patterns.
model: sonnet
---
You are a JavaScript development expert specializing in modern ECMAScript features and performance-optimized code.

## JavaScript Expertise
- ES2024+ features (decorators, pipeline operator, temporal API)
- Advanced async patterns (Promise.all, async iterators, AbortController)
- Memory management and garbage collection optimization
- Module systems (ESM, CommonJS) and dynamic imports
- Web APIs (Web Workers, Service Workers, IndexedDB, WebRTC)
- Node.js ecosystem and event-driven architecture
- Performance profiling with DevTools and Lighthouse
- Functional programming and immutability patterns

## Code Excellence Standards
1. Functional programming principles with pure functions
2. Immutable data structures and state management
3. Proper error handling withError subclasses
4. Memory leak prevention and performance monitoring
5. Modular architecture with clear separation of concerns
6. Event-driven patterns with proper cleanup
7. Comprehensive testing with Jest and testing-library
8. Code splitting and lazy loading strategies

## Advanced Techniques
- Custom iterators and generators for data processing
- Proxy objects for meta-programming and validation
- Web Workers for CPU-intensive tasks
- Service Workers for offline functionality and caching
- SharedArrayBuffer for multi-threaded processing
- WeakMap and WeakSetfor memory-efficient caching
- Temporal API for robust date/time handling
- AbortController for cancellable operations
- Stream processing for large datasets

## Output Quality
- Clean, readable code following JavaScript best practices
- Performance-optimized solutions with benchmark comparisons
- Comprehensive error handling with meaningful messages
- Memory-efficient algorithms and data structures
- Cross-browser compatible code with polyfill strategies
- Detailed JSDoc documentation with type annotations
- Unit and integration tests with high coverage
- Security considerations and XSS/CSRF prevention

Write JavaScript that leverages the language's full potential while maintaining readability and performance. Focus on modern patterns that solve real-world problems efficiently.

---
name: javascript-developer
description: 精通现代JavaScript ES2024+特性、异步模式和性能优化。专精客户端和服务端JavaScript开发。在JavaScript优化和高级模式时主动使用。
model: sonnet
---
你是一位JavaScript开发专家，专精现代ECMAScript特性和性能优化代码。

## JavaScript专业技能 / JavaScript Expertise
- ES2024+特性（装饰器、管道操作符、Temporal API）
- 高级异步模式（Promise.all、异步迭代器、AbortController）
- 内存管理和垃圾回收优化
- 模块系统（ESM、CommonJS）和动态导入
- Web API（Web Workers、Service Workers、IndexedDB、WebRTC）
- Node.js生态和事件驱动架构
- 使用DevTools和Lighthouse进行性能分析
- 函数式编程和不可变性模式

## 代码卓越标准 / Code Excellence Standards
1. 使用纯函数的函数式编程原则
2. 不可变数据结构和状态管理
3. 使用Error子类进行适当的错误处理
4. 内存泄漏预防和性能监控
5. 关注点分离的模块化架构
6. 带适当清理的事件驱动模式
7. 使用Jest和testing-library的全面测试
8. 代码分割和懒加载策略

## 高级技术 / Advanced Techniques
- 用于数据处理的自定义迭代器和生成器
- 用于元编程和验证的Proxy对象
- 用于CPU密集型任务的Web Workers
- 用于离线功能和缓存的Service Workers
- 用于多线程处理的SharedArrayBuffer
- 用于内存高效缓存的WeakMap和WeakSet
- 用于可靠日期/时间处理的Temporal API
- 用于可取消操作的AbortController
- 大数据集的流处理

## 输出质量 / Output Quality
- 遵循JavaScript最佳实践的清晰可读代码
- 带基准比较的性能优化方案
- 带有意义消息的全面错误处理
- 内存高效的算法和数据结构
- 带polyfill策略的跨浏览器兼容代码
- 带类型注解的详细JSDoc文档
- 高覆盖率的单元和集成测试
- 安全考虑和XSS/CSRF预防

编写充分利用语言潜力的JavaScript，同时保持可读性和性能。
专注于高效解决实际问题的现代模式。

// 1. 什么是ES2024+特性？
// 就是JavaScript的最新功能，像手机系统更新一样

// 装饰器（给函数加"装饰"）
@log
@cache
class UserService {
  @validate
  getUser(id) {
    // 自动记录日志、缓存、验证
  }
}

// 2. 什么是异步模式？
// 就像点外卖，不用一直等着，送到了会通知你
asyncfunction orderFood() {
const order = await placeOrder();  // 下单
const food = await waitForDelivery();  // 等待配送
return enjoyMeal(food);  // 享用
}

// 3. 什么是内存管理？
// 就像整理房间，不用的东西要及时扔掉
const cache = newWeakMap();  // 自动清理的缓存
// 当对象不再使用时，WeakMap会自动释放内存

// 4. 什么是Web Workers？
// 就像雇佣助手，把繁重工作交给他们
const worker = new Worker('heavy-calculation.js');
worker.postMessage({cmd: 'calculate', data: bigData});
// 主线程继续响应用户操作，不会卡顿

# 在Claude Code中输入
/agents

创建一个处理大量数据的JavaScript系统，要考虑性能和内存

// dataProcessor.js - 高性能数据处理系统
/**
 * @fileoverview 高性能数据处理系统
 * @module DataProcessor
 */

/**
 * 高性能数据处理器
 * 使用Web Workers和流处理优化大数据集处理
 */
class DataProcessor {
constructor(options = {}) {
    this.workerPool = [];
    this.maxWorkers = options.maxWorkers || navigator.hardwareConcurrency || 4;
    this.chunkSize = options.chunkSize || 1000;
    this.processingQueue = [];
    this.results = newMap();
    
    this.initializeWorkerPool();
  }

/**
   * 初始化Worker池
   * @private
   */
  initializeWorkerPool() {
    for (let i = 0; i < this.maxWorkers; i++) {
      const worker = new Worker(new URL('./processor.worker.js', import.meta.url));
      
      worker.onmessage = this.handleWorkerMessage.bind(this);
      worker.onerror = this.handleWorkerError.bind(this);
      
      this.workerPool.push({
        id: i,
        worker,
        busy: false
      });
    }
  }

/**
   * 处理大型数据集
   * @param {AsyncIterable|Array} data - 输入数据
   * @param {Function} transform - 转换函数
   * @returns {Promise<Array>} 处理结果
   */
async processLargeDataset(data, transform) {
    const startTime = performance.now();
    
    try {
      // 使用异步迭代器处理数据流
      const chunks = this.createChunks(data);
      const promises = [];

      forawait (const chunk of chunks) {
        const promise = this.processChunk(chunk, transform);
        promises.push(promise);
        
        // 控制并发数量
        if (promises.length >= this.maxWorkers) {
          awaitPromise.race(promises);
        }
      }

      // 等待所有任务完成
      const results = awaitPromise.all(promises);
      
      const endTime = performance.now();
      console.log(`Processing completed in ${(endTime - startTime).toFixed(2)}ms`);
      
      return results.flat();
    } catch (error) {
      console.error('Processing failed:', error);
      thrownew ProcessingError('Data processing failed', { cause: error });
    } finally {
      this.cleanup();
    }
  }

/**
   * 创建数据块生成器
   * @param {AsyncIterable|Array} data - 输入数据
   * @yields {Array} 数据块
   */
async *createChunks(data) {
    let chunk = [];
    
    // 支持异步迭代器
    if (data[Symbol.asyncIterator]) {
      forawait (const item of data) {
        chunk.push(item);
        
        if (chunk.length >= this.chunkSize) {
          yield chunk;
          chunk = [];
        }
      }
    } elseif (Array.isArray(data)) {
      // 支持普通数组
      for (let i = 0; i < data.length; i += this.chunkSize) {
        yield data.slice(i, i + this.chunkSize);
      }
    }
    
    // 处理剩余数据
    if (chunk.length > 0) {
      yield chunk;
    }
  }

/**
   * 处理单个数据块
   * @param {Array} chunk - 数据块
   * @param {Function} transform - 转换函数
   * @returns {Promise<Array>} 处理结果
   */
  processChunk(chunk, transform) {
    returnnewPromise((resolve, reject) => {
      const worker = this.getAvailableWorker();
      
      if (!worker) {
        // 队列等待
        this.processingQueue.push({ chunk, transform, resolve, reject });
        return;
      }

      const taskId = crypto.randomUUID();
      
      // 设置超时
      const timeout = setTimeout(() => {
        reject(newError(`Task ${taskId} timeout`));
        worker.busy = false;
        this.processNextInQueue();
      }, 30000);

      // 处理结果
      const messageHandler = (e) => {
        if (e.data.taskId === taskId) {
          clearTimeout(timeout);
          worker.worker.removeEventListener('message', messageHandler);
          worker.busy = false;
          
          if (e.data.error) {
            reject(newError(e.data.error));
          } else {
            resolve(e.data.result);
          }
          
          this.processNextInQueue();
        }
      };

      worker.worker.addEventListener('message', messageHandler);
      worker.busy = true;
      
      // 发送任务到Worker
      worker.worker.postMessage({
        taskId,
        chunk,
        transform: transform.toString()
      });
    });
  }

/**
   * 获取可用的Worker
   * @returns {Object|null} 可用的Worker
   */
  getAvailableWorker() {
    returnthis.workerPool.find(w => !w.busy) || null;
  }

/**
   * 处理队列中的下一个任务
   */
  processNextInQueue() {
    if (this.processingQueue.length === 0) return;
    
    const task = this.processingQueue.shift();
    this.processChunk(task.chunk, task.transform)
      .then(task.resolve)
      .catch(task.reject);
  }

/**
   * 清理资源
   */
  cleanup() {
    // 终止所有Workers
    this.workerPool.forEach(({ worker }) => {
      worker.terminate();
    });
    
    this.workerPool = [];
    this.processingQueue = [];
    this.results.clear();
  }

/**
   * 处理Worker消息
   * @param {MessageEvent} event - 消息事件
   */
  handleWorkerMessage(event) {
    const { taskId, result, error } = event.data;
    
    if (error) {
      console.error(`Worker error for task ${taskId}:`, error);
    } else {
      this.results.set(taskId, result);
    }
  }

/**
   * 处理Worker错误
   * @param {ErrorEvent} error - 错误事件
   */
  handleWorkerError(error) {
    console.error('Worker error:', error);
  }
}

// processor.worker.js - Worker文件
self.onmessage = function(e) {
const { taskId, chunk, transform } = e.data;

try {
    // 动态执行转换函数
    const fn = newFunction('return ' + transform)();
    const result = chunk.map(fn);
    
    self.postMessage({
      taskId,
      result
    });
  } catch (error) {
    self.postMessage({
      taskId,
      error: error.message
    });
  }
};

// 使用示例
const processor = new DataProcessor({
maxWorkers: 8,
chunkSize: 5000
});

// 处理大型数据集
asyncfunction example() {
// 模拟大数据集
const largeDataset = Array.from({ length: 1000000 }, (_, i) => ({
    id: i,
    value: Math.random() * 1000,
    timestamp: Date.now()
  }));

// 定义转换函数
const transform = (item) => ({
    ...item,
    squared: item.value ** 2,
    category: item.value > 500 ? 'high' : 'low'
  });

try {
    const results = await processor.processLargeDataset(largeDataset, transform);
    console.log(`Processed ${results.length} items`);
  } catch (error) {
    console.error('Processing failed:', error);
  }
}

// 自定义错误类
class ProcessingError extends Error {
constructor(message, options) {
    super(message);
    this.name = 'ProcessingError';
    this.cause = options?.cause;
  }
}

export { DataProcessor, ProcessingError };

创建一个轻量级的响应式状态管理系统

// reactiveStore.js - 响应式状态管理
/**
 * 轻量级响应式状态管理系统
 * 使用Proxy和WeakMap实现高性能响应式
 */
class ReactiveStore {
constructor(initialState = {}) {
    this.subscribers = newMap();
    this.computedCache = newWeakMap();
    this.dependencies = newWeakMap();
    this.state = this.createReactiveProxy(initialState);
    this.history = [];
    this.historyIndex = -1;
    this.maxHistorySize = 50;
  }

/**
   * 创建响应式代理
   * @param {Object} target - 目标对象
   * @param {string} path - 属性路径
   * @returns {Proxy} 响应式代理
   */
  createReactiveProxy(target, path = '') {
    const self = this;
    
    returnnewProxy(target, {
      get(obj, prop) {
        const value = obj[prop];
        const fullPath = path ? `${path}.${String(prop)}` : String(prop);
        
        // 收集依赖
        self.trackDependency(fullPath);
        
        // 递归代理对象
        if (value && typeof value === 'object') {
          return self.createReactiveProxy(value, fullPath);
        }
        
        return value;
      },
      
      set(obj, prop, value) {
        const fullPath = path ? `${path}.${String(prop)}` : String(prop);
        const oldValue = obj[prop];
        
        // 值相同则不触发更新
        if (Object.is(oldValue, value)) {
          returntrue;
        }
        
        // 记录历史
        self.saveHistory({
          path: fullPath,
          oldValue,
          newValue: value,
          timestamp: Date.now()
        });
        
        // 设置新值
        obj[prop] = value;
        
        // 触发更新
        self.notify(fullPath, value, oldValue);
        
        returntrue;
      },
      
      deleteProperty(obj, prop) {
        const fullPath = path ? `${path}.${String(prop)}` : String(prop);
        const oldValue = obj[prop];
        
        delete obj[prop];
        
        self.notify(fullPath, undefined, oldValue);
        
        returntrue;
      }
    });
  }

/**
   * 订阅状态变化
   * @param {string|Array<string>} paths - 监听路径
   * @param {Function} callback - 回调函数
   * @returns {Function} 取消订阅函数
   */
  subscribe(paths, callback) {
    const pathArray = Array.isArray(paths) ? paths : [paths];
    const subscriptionId = Symbol('subscription');
    
    pathArray.forEach(path => {
      if (!this.subscribers.has(path)) {
        this.subscribers.set(path, newSet());
      }
      
      this.subscribers.get(path).add({
        id: subscriptionId,
        callback,
        paths: pathArray
      });
    });
    
    // 返回取消订阅函数
    return() => {
      pathArray.forEach(path => {
        const subs = this.subscribers.get(path);
        if (subs) {
          for (const sub of subs) {
            if (sub.id === subscriptionId) {
              subs.delete(sub);
              break;
            }
          }
        }
      });
    };
  }

/**
   * 计算属性
   * @param {Function} getter - 计算函数
   * @returns {any} 计算结果
   */
  computed(getter) {
    // 检查缓存
    if (this.computedCache.has(getter)) {
      returnthis.computedCache.get(getter);
    }
    
    // 收集依赖
    const dependencies = newSet();
    const originalTrack = this.trackDependency;
    
    this.trackDependency = (path) => {
      dependencies.add(path);
    };
    
    // 执行计算
    const result = getter(this.state);
    
    // 恢复原始追踪函数
    this.trackDependency = originalTrack;
    
    // 缓存结果和依赖
    this.computedCache.set(getter, result);
    this.dependencies.set(getter, dependencies);
    
    // 监听依赖变化
    dependencies.forEach(path => {
      this.subscribe(path, () => {
        this.computedCache.delete(getter);
      });
    });
    
    return result;
  }

/**
   * 批量更新
   * @param {Function} updater - 更新函数
   */
  batch(updater) {
    const notifications = [];
    const originalNotify = this.notify;
    
    // 收集所有更新
    this.notify = (path, newValue, oldValue) => {
      notifications.push({ path, newValue, oldValue });
    };
    
    // 执行更新
    updater(this.state);
    
    // 恢复原始通知函数
    this.notify = originalNotify;
    
    // 批量通知
    const updatedPaths = newSet();
    notifications.forEach(({ path, newValue, oldValue }) => {
      if (!updatedPaths.has(path)) {
        this.notify(path, newValue, oldValue);
        updatedPaths.add(path);
      }
    });
  }

/**
   * 时间旅行 - 撤销
   */
  undo() {
    if (this.historyIndex > 0) {
      this.historyIndex--;
      const { path, oldValue } = this.history[this.historyIndex];
      this.applyChange(path, oldValue);
    }
  }

/**
   * 时间旅行 - 重做
   */
  redo() {
    if (this.historyIndex < this.history.length - 1) {
      this.historyIndex++;
      const { path, newValue } = this.history[this.historyIndex];
      this.applyChange(path, newValue);
    }
  }

/**
   * 通知订阅者
   * @private
   */
  notify(path, newValue, oldValue) {
    // 通知直接订阅者
    const directSubs = this.subscribers.get(path);
    if (directSubs) {
      directSubs.forEach(({ callback }) => {
        callback(newValue, oldValue, path);
      });
    }
    
    // 通知父路径订阅者
    const parentPath = path.split('.').slice(0, -1).join('.');
    if (parentPath) {
      this.notify(parentPath, this.getValueByPath(parentPath), undefined);
    }
  }

/**
   * 追踪依赖
   * @private
   */
  trackDependency(path) {
    // 默认实现为空，在computed中会被覆盖
  }

/**
   * 保存历史记录
   * @private
   */
  saveHistory(change) {
    // 删除当前位置之后的历史
    this.history = this.history.slice(0, this.historyIndex + 1);
    
    // 添加新记录
    this.history.push(change);
    
    // 限制历史大小
    if (this.history.length > this.maxHistorySize) {
      this.history.shift();
    } else {
      this.historyIndex++;
    }
  }

/**
   * 根据路径获取值
   * @private
   */
  getValueByPath(path) {
    return path.split('.').reduce((obj, key) => obj?.[key], this.state);
  }

/**
   * 应用更改
   * @private
   */
  applyChange(path, value) {
    const keys = path.split('.');
    const lastKey = keys.pop();
    const target = keys.reduce((obj, key) => obj[key], this.state);
    target[lastKey] = value;
  }
}

// 使用示例
const store = new ReactiveStore({
user: {
    name: 'John',
    age: 30,
    settings: {
      theme: 'dark'
    }
  },
todos: []
});

// 订阅变化
const unsubscribe = store.subscribe('user.name', (newValue, oldValue) => {
console.log(`Name changed from ${oldValue} to ${newValue}`);
});

// 计算属性
const userInfo = store.computed(state =>
`${state.user.name} (${state.user.age} years old)`
);

// 批量更新
store.batch(state => {
  state.user.name = 'Jane';
  state.user.age = 25;
});

export { ReactiveStore };

## JavaScript Expertise
-React18+ConcurrentFeatures
-ReactServerComponents
-Next.js14AppRouter
-Zustand/Jotai状态管理
-ReactQuery数据获取
-ReactHookForm表单处理

## JavaScript Expertise
-Vue3CompositionAPI
-Nuxt3全栈开发
-Pinia状态管理
-VueUse工具库
-Vite构建优化

## JavaScript Expertise
-Node.js20+特性
-Express/Fastify框架
-PrismaORM
-Bull队列管理
-PM2进程管理
-Docker容器化

## Company Standards
-代码风格：AirbnbJavaScriptStyleGuide
-构建工具：Vite+SWC
-测试要求：Jest+90%覆盖率
-文档规范：JSDoc+TypeDoc
-Git工作流：GitFlow+ConventionalCommits

// 特性检测
if ('IntersectionObserver'inwindow) {
// 使用原生API
} else {
// 加载polyfill
import('intersection-observer');
}

// 自动添加浏览器前缀
const styles = {
transform: 'rotate(45deg)',
WebkitTransform: 'rotate(45deg)',
MozTransform: 'rotate(45deg)'
};

/**
 * @param {string} name - 用户名
 * @param {number} age - 年龄
 * @returns {Promise<User>} 用户对象
 */
async function createUser(name, age) {
  // 实现...
}