实现一个简单的插件系统

#前端架构

1. 总结

interface Plugin
- name version init destroy
class PluginManager
- 属性：plugins
- register
- getPlugin
- unregister
- getAllPlugins
interface EnhancedPlugin extends Plugin
- beforeMount
- beforeUnmount
- 等等
更多
- 装饰器支持
- 插件生命周期管理
- 插件依赖管理
- 插件间通讯
- 异步加载支持
- 错误处理机制

2. 首先定义插件接口和注册机制：

// types.ts
export interface Plugin {
  name: string;
  version: string;
  component?: React.ComponentType<any>;
  init?: () => void;
  destroy?: () => void;
}

// PluginManager.ts
class PluginManager {
  private plugins: Map<string, Plugin> = new Map();

  // 注册插件
  register(plugin: Plugin): void {
    if (this.plugins.has(plugin.name)) {
      console.warn(`Plugin ${plugin.name} already exists`);
      return;
    }
    this.plugins.set(plugin.name, plugin);
    plugin.init?.();
  }

  // 获取插件
  getPlugin(name: string): Plugin | undefined {
    return this.plugins.get(name);
  }

  // 移除插件
  unregister(name: string): boolean {
    const plugin = this.plugins.get(name);
    if (plugin) {
      plugin.destroy?.();
      return this.plugins.delete(name);
    }
    return false;
  }

  // 获取所有已注册的插件
  getAllPlugins(): Plugin[] {
    return Array.from(this.plugins.values());
  }
}

export const pluginManager = new PluginManager();

3. 创建一个简单的插件示例：

// CustomPlugin.tsx
import React from 'react';
import { Plugin } from './types';

const CustomComponent: React.FC = () => {
  return <div>Custom Plugin Component</div>;
};

export const customPlugin: Plugin = {
  name: 'custom-plugin',
  version: '1.0.0',
  component: CustomComponent,
  init: () => {
    console.log('Custom plugin initialized');
  },
  destroy: () => {
    console.log('Custom plugin destroyed');
  }
};

4. 使用示例：

// App.tsx
import React from 'react';
import { pluginManager } from './PluginManager';
import { customPlugin } from './CustomPlugin';

// 注册插件
pluginManager.register(customPlugin);

const App: React.FC = () => {
  // 获取插件组件
  const plugin = pluginManager.getPlugin('custom-plugin');
  const PluginComponent = plugin?.component;

  return (
    <div>
      {PluginComponent && <PluginComponent />}
    </div>
  );
};

export default App;

5. 扩展：添加插件配置和生命周期：

// 扩展插件接口
interface PluginConfig {
  enabled: boolean;
  options?: Record<string, any>;
}

interface EnhancedPlugin extends Plugin {
  config?: PluginConfig;
  beforeMount?: () => void;
  afterMount?: () => void;
  beforeUnmount?: () => void;
}

// 扩展插件管理器
class EnhancedPluginManager {
  private plugins: Map<string, EnhancedPlugin> = new Map();

  register(plugin: EnhancedPlugin, config?: PluginConfig): void {
    if (this.plugins.has(plugin.name)) {
      console.warn(`Plugin ${plugin.name} already exists`);
      return;
    }

    const enhancedPlugin = {
      ...plugin,
      config: {
        enabled: true,
        ...config
      }
    };

    this.plugins.set(plugin.name, enhancedPlugin);
    plugin.init?.();
  }

  async mountPlugin(name: string): Promise<void> {
    const plugin = this.plugins.get(name);
    if (plugin && plugin.config?.enabled) {
      await plugin.beforeMount?.();
      // 执行挂载逻辑
      await plugin.afterMount?.();
    }
  }

  // ... 其他方法
}

6. 使用装饰器简化插件注册：

// decorators.ts
function Plugin(config: Partial<PluginConfig> = {}) {
  return function (target: any) {
    return class extends target {
      static __plugin = {
        name: target.name,
        version: target.version || '1.0.0',
        config
      };
    };
  };
}

// 使用示例
@Plugin({
  enabled: true,
  options: {
    theme: 'light'
  }
})
class MyCustomPlugin implements EnhancedPlugin {
  name = 'my-custom-plugin';
  version = '1.0.0';
  
  init() {
    console.log('Plugin initialized');
  }
}

这个简单的插件系统实现了以下特性：

基本的插件注册和管理
插件生命周期管理
类型安全的插件接口
配置化的插件系统
装饰器支持

使用这个插件系统的优点：

模块化: 每个插件都是独立的模块，便于维护和扩展
类型安全: 使用 TypeScript 提供类型检查
生命周期管理: 提供完整的插件生命周期钩子
配置灵活: 支持通过配置来控制插件行为
易于使用: 提供简单直观的 API

要进一步完善这个插件系统，可以考虑添加：

插件依赖管理
插件间通信机制
插件热更新
异步加载支持
错误处理机制

liguwe's site

实现一个简单的插件系统

目录

1. 总结

2. 首先定义插件接口和注册机制：

3. 创建一个简单的插件示例：

4. 使用示例：

5. 扩展：添加插件配置和生命周期：

6. 使用装饰器简化插件注册：