从0到1实现一个插件系统

在前端开发中，插件系统是一种非常强大的设计模式，它可以帮助我们构建灵活、可扩展的应用程序。今天，我们就来实现一个简单的前端插件系统，让你了解其背后的原理和实现方式。

一、项目结构

我们的项目主要包含以下几个文件：

Executor.ts：这是我们的执行器类，负责初始化和运行插件。
PluginBase.ts：定义了插件的基本结构和接口。
PluginDriver.ts：插件驱动器，用于注册和管理插件。
index.ts：项目的入口文件，用于启动整个插件系统。

二、核心概念

1. 插件（Plugin）

插件是扩展应用程序功能的独立模块。在我们的系统中，每个插件都是一个对象，包含一系列钩子函数，这些钩子函数在特定的生命周期阶段被调用。

2. 钩子（Hook）

钩子是插件系统中的关键机制，它允许插件在特定的时间点插入自定义的逻辑。常见的钩子包括：

initialize：在插件初始化时调用。
renderBefore：在渲染之前调用。
render：在渲染时调用，可以是异步操作。
renderAfter：在渲染之后调用。
destroy：在插件销毁时调用。

三、实现步骤

1. 定义插件基类（PluginBase.ts）

首先，我们定义一个插件基类 PluginBase，它包含插件的基本属性和方法。每个插件都继承自这个基类。

typescript 复制代码

import { EnvExecutor } from "./Executor";

class PluginBase {
    name: string;
    option: {
        initialize?: (env: EnvExecutor) => any;
        initializeEventLister?: (env: EnvExecutor) => (() => void) | any;
        renderBefore?: (env: EnvExecutor) => any;
        render?: (env: EnvExecutor) => Promise<any>;
        renderAfter?: (env: EnvExecutor) => any;
        destroy?: (env: EnvExecutor) => any;
    };

    destroyList = new Set<() => void>();

    constructor(name: string, option: PluginBase["option"]) {
        this.name = name;
        this.option = option;
    }

    initialize = (env: EnvExecutor) => {
        const result = this.option.initialize?.(env);
        this.destroyList.add(this.option.initializeEventLister?.(env));
        return result;
    };

    renderBefore = (env: EnvExecutor) => {
        return this.option.renderBefore?.(env);
    };

    render = (env: EnvExecutor) => {
        return this.option.render?.(env);
    };

    renderAfter = (env: EnvExecutor) => {
        return this.option.renderAfter?.(env);
    };

    destroy = (env: EnvExecutor) => {
        for (const destroy of this.destroyList) {
            destroy();
        }
        return this.option.destroy?.(env);
    };
}

const definePlugin = (optionBuilder: () => PluginBase["option"] & { name: string }) => {
    const option = optionBuilder();
    return new PluginBase(option.name, option);
};

export {
    PluginBase,
    definePlugin,
};

2. 创建插件驱动器（PluginDriver.ts）

插件驱动器 PluginDriver 负责注册和管理插件。它提供了批量注册、初始化、渲染和销毁插件的方法。

typescript 复制代码

import { EnvExecutor } from "./Executor";
import { PluginBase } from "./PluginBase";

class PluginDriver {
    plugins = new Map();
    env: EnvExecutor;

    batchRegister(plugins: PluginBase[]) {
        plugins.forEach((plugin) => {
            this.register(plugin.name, plugin);
        });
        console.log("[PluginDriver: plugins registered]", this.plugins);
    }

    register(name: string, plugin: PluginBase) {
        this.plugins.set(name, plugin);
    }

    hookInitialize(hookName: string) {
        this.plugins.forEach((plugin) => {
            if (typeof plugin[hookName] === "function") {
                plugin[hookName](this.env);
            }
        });
    }

    async hookRender(hookName: string) {
        for (const plugin of this.plugins.values()) {
            if (typeof plugin[hookName] === "function") {
                await plugin[hookName](this.env);
            }
        }
    }

    hookDestroy(hookName: string) {
        this.plugins.forEach((plugin) => {
            if (typeof plugin[hookName] === "function") {
                plugin[hookName](this.env);
            }
        });
    }
}

export {
    PluginDriver,
};

3. 创建执行器（Executor.ts）

执行器 EnvExecutor 负责初始化和运行插件系统。它创建一个根元素，并在其中添加按钮和信息内容。通过插件驱动器注册和初始化插件。

ini 复制代码

import { PluginDriver } from "./PluginDriver";
import { definePlugin } from "./PluginBase";

class EnvExecutor {
    pluginDriver = new PluginDriver();

    state = {
        root: document.createElement("div"),
        colorButton: null,
        infoContent: null,
        cache: {} as Record<string, any>,
    };

    constructor() {
        this.#init();
    }

    #init = () => {
        document.body.append(this.state.root);
        {
            const clickPlugin = definePlugin(() => ({
                name: "click",
                initializeEventLister: (env) => {
                    env.state.colorButton.onclick = () => {
                        // 随机色彩
                        env.state.root.style.backgroundColor = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
                    };
                },
            }));

            const sizeInfoPlugin = definePlugin(() => ({
                name: "resize",
                initialize: (env) => {
                    env.state.infoContent.innerHTML = `loading...`;
                },
                renderBefore: (env) => {
                    if (env.state.cache.preSize !== env.state.root.clientWidth) {
                        env.state.cache.preSize = env.state.root.clientWidth;
                        env.state.infoContent.innerHTML = `当前宽度：${env.state.cache.preSize}`;
                    }
                },
            }));

            this.pluginDriver.batchRegister([clickPlugin, sizeInfoPlugin]);
            this.pluginDriver.env = this;
        }

        this.#initUi();
        this.pluginDriver.hookInitialize("initialize");
    };

    #initUi = () => {
        const colorButton = document.createElement("button");
        colorButton.innerText = "Change Color";
        this.appendChild(colorButton);
        this.state.colorButton = colorButton;

        const infoContent = document.createElement("div");
        infoContent.style.color = "#fff";
        infoContent.innerText = "Hello, World!";
        this.appendChild(infoContent);
        this.state.infoContent = infoContent;
    };

    #execute = async () => {
        this.pluginDriver.hookRender("renderBefore");
        await this.pluginDriver.hookRender("render");
        this.pluginDriver.hookRender("renderAfter");
        requestAnimationFrame(this.#execute);
    };

    start = () => {
        requestAnimationFrame(this.#execute);
    };

    appendChild = (el: HTMLElement | string) => {
        if (typeof el === "string") {
            el = document.createElement(el);
        }
        this.state.root.appendChild(el);
    };
}

export {
    EnvExecutor,
};

4. 启动插件系统（index.ts）

最后，我们在 index.ts 中创建 EnvExecutor 实例并启动插件系统。

ini 复制代码

import { EnvExecutor } from "./Executor";

const main = () => {
    const env = new EnvExecutor();
    env.start();
};

main();

四、运行效果

初始化：插件系统启动时，会初始化所有注册的插件。
点击按钮：点击"Change Color"按钮时，根元素的背景颜色会随机变化。
窗口大小变化：当窗口大小变化时，信息内容会显示当前的宽度。