如何将Alpine插件的模块变量移入默认导出函数内部？

我正在以默认导出的形式编写一个Alpine插件，希望支持以下两种调用方式：

// 无选项的常规调用
Alpine.plugin(MyPlugin);

// 带选项的调用
Alpine.plugin(MyPlugin.defaults({ foo: "bar" }));

目前的实现是在模块根目录声明全局变量defaultOptions来存储配置：

// src/myplugin.ts

let defaultOptions: MyPluginOptions;

const MyPlugin = (Alpine: Alpine) => {
  // 在此处使用defaultOptions
};

// 暴露设置默认选项的方法
MyPlugin.defaults = (options: MyPluginOptions) => {
  defaultOptions = options;

  return MyPlugin;
};

export default MyPlugin;

请问有没有其他方法能把defaultOptions变量移入插件函数本身内部？

解决方案 #

方法1：利用函数属性存储选项 #

直接在MyPlugin函数本身上挂载defaultOptions属性，无需单独的模块级变量：

// src/myplugin.ts
const MyPlugin = (Alpine: Alpine) => {
  // 访问函数自身的defaultOptions属性，默认值为空对象
  const options = (MyPlugin as any).defaultOptions || {};
  // 在此处使用options配置
};

MyPlugin.defaults = (options: MyPluginOptions) => {
  // 将选项存储到函数的属性上
  (MyPlugin as any).defaultOptions = options;
  return MyPlugin;
};

export default MyPlugin;

如果用TypeScript，建议扩展函数类型避免类型断言：

// 扩展插件函数的类型定义
interface MyPluginFn {
  (Alpine: Alpine): void;
  defaults: (options: MyPluginOptions) => MyPluginFn;
  defaultOptions?: MyPluginOptions;
}

const MyPlugin = ((Alpine: Alpine) => {
  const options = MyPlugin.defaultOptions || {};
  // 使用options进行插件逻辑处理
}) as MyPluginFn;

MyPlugin.defaults = function(options: MyPluginOptions) {
  this.defaultOptions = options;
  return this;
};

export default MyPlugin;

方法2：闭包封装变量 #

用自执行函数创建闭包，把defaultOptions封装在内部，同时暴露插件函数和defaults方法：

// src/myplugin.ts
const MyPlugin = (() => {
  let defaultOptions: MyPluginOptions | undefined;

  const plugin = (Alpine: Alpine) => {
    const options = defaultOptions || {};
    // 在此处使用options配置
  };

  plugin.defaults = (options: MyPluginOptions) => {
    defaultOptions = options;
    return plugin;
  };

  return plugin;
})();

export default MyPlugin;

这种方式将defaultOptions完全隔离在闭包内，不会污染模块作用域，外部调用方式和原代码完全一致。

方法3：类实现（适合复杂插件） #

如果插件逻辑较复杂，用类来组织代码，把默认选项作为静态属性，同时提供静态方法修改配置：

// src/myplugin.ts
class MyPlugin {
  private static defaultOptions: MyPluginOptions | undefined;

  static defaults(options: MyPluginOptions) {
    MyPlugin.defaultOptions = options;
    return MyPlugin;
  }

  static install(Alpine: Alpine) {
    const options = MyPlugin.defaultOptions || {};
    // 在此处使用options处理插件逻辑
  }
}

// 导出类的install方法，并附加defaults方法类型
export default MyPlugin.install as typeof MyPlugin.install & {
  defaults: typeof MyPlugin.defaults;
};

这种结构更清晰，适合包含较多逻辑的插件，调用方式保持不变。

内容的提问来源于stack exchange，提问作者gremo