如何实现一个支持插件架构的JavaScript库？

class MyAwesomeLibrary {
    constructor(options = {}) {
        this.options = { ...MyAwesomeLibrary.defaultOptions, ...options };
        this.plugins = new Map(); // 用Map来存储注册的插件，方便查找和管理
        this._eventHandlers = new Map(); // 用于存储事件处理器
        this._init();
    }

    _init() {
        // 库的初始化逻辑
        console.log("MyAwesomeLibrary initialized with options:", this.options);
        this._triggerHook('onInit', this); // 触发初始化钩子
    }

    // 注册插件的方法
    use(plugin, config = {}) {
        if (typeof plugin === 'function') {
            // 如果插件是函数，我们假设它是一个工厂函数，返回一个插件实例
            const pluginInstance = new plugin(this, config);
            this.plugins.set(pluginInstance.name || plugin.name || Symbol(), pluginInstance);
            if (typeof pluginInstance.install === 'function') {
                pluginInstance.install(this, config); // 调用插件的安装方法
            }
        } else if (typeof plugin === 'object' && plugin !== null) {
            // 如果插件是对象，直接注册
            this.plugins.set(plugin.name || Symbol(), plugin);
            if (typeof plugin.install === 'function') {
                plugin.install(this, config);
            }
        } else {
            console.warn("Invalid plugin type provided:", plugin);
            return;
        }
        this._triggerHook('onPluginRegistered', plugin); // 触发插件注册钩子
        console.log(`Plugin ${plugin.name || 'anonymous'} registered.`);
    }

    // 内部方法，用于触发各种钩子/事件
    _triggerHook(hookName, ...args) {
        // 触发注册在_eventHandlers上的事件
        const handlers = this._eventHandlers.get(hookName);
        if (handlers) {
            for (const handler of handlers) {
                try {
                    handler(...args);
                } catch (e) {
                    console.error(`Error in plugin hook '${hookName}':`, e);
                }
            }
        }

        // 也可以遍历所有插件，检查它们是否有对应名称的方法
        // 但我更倾向于明确的事件注册，这样更可控
        // for (const [name, plugin] of this.plugins) {
        //     if (typeof plugin[hookName] === 'function') {
        //         try {
        //             plugin[hookName](...args);
        //         } catch (e) {
        //             console.error(`Error in plugin '${name}' hook '${hookName}':`, e);
        //         }
        //     }
        // }
    }

    // 提供给插件注册事件的API
    on(eventName, handler) {
        if (!this._eventHandlers.has(eventName)) {
            this._eventHandlers.set(eventName, []);
        }
        this._eventHandlers.get(eventName).push(handler);
    }

    // 库的核心功能示例
    doSomethingImportant(data) {
        this._triggerHook('beforeDoSomething', data); // 触发前置钩子
        let processedData = data;
        // 核心逻辑
        console.log("Doing something important with:", processedData);
        this._triggerHook('afterDoSomething', processedData); // 触发后置钩子
        return processedData;
    }

    static defaultOptions = {
        debugMode: false,
        timeout: 5000
    };
}

// 示例插件：一个日志插件
class LoggerPlugin {
    constructor(libraryInstance, config = {}) {
        this.name = 'LoggerPlugin';
        this.library = libraryInstance; // 插件可以访问库实例
        this.config = { level: 'info', ...config };
    }

    install(library) {
        console.log(`${this.name} installing...`);
        // 注册到库的事件系统
        library.on('onInit', () => {
            console.log(`[${this.name}] Library initialized.`);
        });
        library.on('beforeDoSomething', (data) => {
            if (this.config.level === 'info') {
                console.log(`[${this.name}] Before doing something with:`, data);
            }
        });
        library.on('afterDoSomething', (result) => {
            if (this.config.level === 'info') {
                console.log(`[${this.name}] After doing something, result:`, result);
            }
        });
        // 甚至可以扩展库的功能
        library.log = (message, level = 'info') => {
            if (this.config.level === 'info' || (this.config.level === 'warn' && level === 'warn')) {
                console.log(`[${this.name} Custom Log ${level.toUpperCase()}]: ${message}`);
            }
        };
    }
}

// 另一个示例插件：一个数据转换插件
class DataTransformerPlugin {
    constructor(libraryInstance, config = {}) {
        this.name = 'DataTransformerPlugin';
        this.library = libraryInstance;
        this.config = { prefix: 'transformed_', ...config };
    }

    install(library) {
        console.log(`${this.name} installing...`);
        // 拦截并修改数据
        library.on('beforeDoSomething', (data) => {
            // 注意：这里需要一种机制来修改传递给下一个处理者的数据。
            // 简单的事件系统可能难以做到。更复杂的钩子系统（如WordPress的filter）会返回修改后的数据。
            // 在我们的简单实现中，插件可以直接修改传入的对象（如果它是可变的话）。
            // 或者，我们让_triggerHook返回一个聚合结果。
            data.value = this.config.prefix + data.value; // 直接修改传入的数据对象
            console.log(`[${this.name}] Data transformed to:`, data);
        });
    }
}

const myLib = new MyAwesomeLibrary({ debugMode: true });

myLib.use(LoggerPlugin, { level: 'info' });
myLib.use(DataTransformerPlugin, { prefix: 'MODIFIED_' });

myLib.doSomethingImportant({ id: 1, value: 'original' });

// 插件扩展的功能也可以直接调用
if (myLib.log) {
    myLib.log("This is a custom log message from the LoggerPlugin.");
}

use

_triggerHook

on

use

_triggerHook

on

library.use(plugin, { apiVersion: 'v2' })

install

uninstall