Reactive Programming

aj-geddes/useful-ai-prompts/skills/reactive-programming

作者 aj-geddes3f5182cfd739无许可证355 个星标收录于 2026年10月8日更新于 2026年10月8日仓库7个月前更新

Implement reactive programming patterns using RxJS, streams, observables, and backpressure handling. Use when building event-driven UIs, handling async data streams, or managing complex data flows.

仅含说明Software Development

AI 生成的概览

指导使用 RxJS、可观察对象、数据流与背压处理来实现响应式编程模式。

功能: 该技能提供使用 RxJS 构建事件驱动应用的说明与参考指南，涵盖可观察对象、操作符、Subject、防抖搜索、状态管理、WebSocket 重连、多流合并、背压处理与自定义操作符，并附带一个组件模板。它产出的是指导与代码示例，而不是运行脚本。
适用场景: 适用于构建事件驱动界面、处理异步数据流、管理复杂数据流，或处理 WebSocket、SSE 等实时更新的场景。
运行要求: 不附带脚本，仅为说明与参考文档。使用其中的示例需要具备 TypeScript/JavaScript 项目并安装 RxJS 包。

Overview

Build responsive applications using reactive streams and observables for handling asynchronous data flows.

When to Use

Complex async data flows
Real-time data updates
Event-driven architectures
UI state management
WebSocket/SSE handling
Combining multiple data sources

Quick Start

Minimal working example:

typescript

import {  Observable,  Subject,  BehaviorSubject,  fromEvent,  interval,} from "rxjs";import {  map,  filter,  debounceTime,  distinctUntilChanged,  switchMap,} from "rxjs/operators";
// Create observable from arrayconst numbers$ = new Observable<number>((subscriber) => {  subscriber.next(1);  subscriber.next(2);  subscriber.next(3);  subscriber.complete();});
numbers$.subscribe({  next: (value) => console.log(value),// ... (see reference guides for full implementation)

import {  Observable,  Subject,  BehaviorSubject,  fromEvent,  interval,} from "rxjs";import {  map,  filter,  debounceTime,  distinctUntilChanged,  switchMap,} from "rxjs/operators";
// Create observable from arrayconst numbers$ = new Observable<number>((subscriber) => {  subscriber.next(1);  subscriber.next(2);  subscriber.next(3);  subscriber.complete();});
numbers$.subscribe({  next: (value) => console.log(value),// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

Guide	Contents
RxJS Basics [blocked]	RxJS Basics
Search with Debounce [blocked]	Search with Debounce
State Management [blocked]	State Management
WebSocket with Reconnection [blocked]	WebSocket with Reconnection
Combining Multiple Streams [blocked]	Combining Multiple Streams
Backpressure Handling [blocked]	Backpressure Handling
Custom Operators [blocked]	Custom Operators

Best Practices

✅ DO

Unsubscribe to prevent memory leaks
Use operators to transform data
Handle errors properly
Use shareReplay for expensive operations
Combine streams when needed
Test reactive code

❌ DON'T

Subscribe multiple times to same observable
Forget to unsubscribe
Use nested subscriptions
Ignore error handling
Make observables stateful

来源与署名

来源：aj-geddes/useful-ai-prompts位于skills/reactive-programming提交3f5182c

许可证：无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

更多来自 aj-geddes/useful-ai-prompts 的技能

Xss Prevention

aj-geddes

Prevent Cross-Site Scripting (XSS) attacks through input sanitization, output encoding, and Content Security Policy. Use when handling user-generated content in web applications.

待分类3557个月前更新

Wireframe Prototyping

aj-geddes

Create wireframes and interactive prototypes to visualize user interfaces and gather feedback early. Use tools and techniques to communicate design ideas before development.

待分类3557个月前更新

Web Performance Optimization

aj-geddes

通过代码分割、懒加载、缓存、压缩和监控来指导 Web 性能优化。

Software Development3557个月前更新

Vue Application Structure

aj-geddes

指导使用组合式 API、组件组织与 TypeScript 来构建 Vue 3 应用结构。

Software Development3557个月前更新

Visual Regression Testing

aj-geddes

通过跨版本比较截图来检测 UI 中非预期的视觉变化，指导视觉回归测试。

Software Development3557个月前更新

User Persona Creation

aj-geddes

基于研究创建详细的用户画像，用于指导产品设计、优先级排序与信息传达。

Research & Analysis3557个月前更新

Reactive Programming

Reactive Programming

Table of Contents

Overview

When to Use

Quick Start

Reference Guides

Best Practices

✅ DO

❌ DON'T

来源与署名

更多来自 aj-geddes/useful-ai-prompts 的技能

Xss Prevention

Wireframe Prototyping

Web Performance Optimization

Vue Application Structure

Visual Regression Testing

User Persona Creation

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices