如何在Webpack多入口中共享同一类实例？JS单例实现方法

这个问题问到点子上了！在Webpack多入口的场景下，默认情况确实会出现你担心的问题——每个入口文件如果单独导入并实例化AJAX类，都会创建一个全新的实例。不过我们有两种可靠的方式来实现全局唯一实例的需求，下面一步步给你讲清楚：

这是最直接的解决方案：我们不导出AJAX类本身，而是先实例化一次，然后导出这个唯一实例。Webpack的模块缓存机制会保证，不管多少个入口文件导入这个模块，拿到的都是同一个实例。

修改AJAX模块（ajax.js） #

假设你的AJAX类原本是这样的结构：

class AJAX {
  constructor() {
    // 原有的初始化逻辑，比如配置默认请求头、绑定回调等
  }

  send(options) {
    // 原有的请求发送逻辑
  }

  // 其他类方法...
}

我们修改成：

class AJAX {
  // 保持原有的类逻辑完全不变
  constructor() {
    // 原初始化代码
  }

  send(options) {
    // 原请求代码
  }

  // 其他方法...
}

// 关键：只实例化一次，然后导出这个实例
export default new AJAX();

在入口文件中使用 #

不管是db_search.js还是tbl_structure.js，都这样导入：

// 直接导入已经实例化好的对象
import ajaxInstance from './ajax.js';

// 直接调用实例方法，两个入口用的是同一个实例！
ajaxInstance.send({ url: '/api', method: 'GET' });

这种方式的好处是零额外逻辑，完全利用Webpack的模块缓存特性，简单又可靠。

如果你希望类本身就具备“只能创建一个实例”的能力（比如需要延迟实例化，或者有特殊的实例化条件），可以给AJAX类实现单例模式。这里提供两种常见的实现方式：

方式1：ES6+私有属性+静态方法（推荐现代环境） #

利用ES6的私有属性和静态方法，把实例的创建逻辑封装在类内部：

class AJAX {
  // 私有静态属性，存储唯一实例（#开头表示私有，外部无法访问）
  static #instance;

  // 构造函数做拦截：如果已有实例，直接返回
  constructor() {
    if (AJAX.#instance) {
      return AJAX.#instance;
    }
    // 原有的初始化逻辑
    this.init();
    // 存储当前实例
    AJAX.#instance = this;
  }

  // 静态方法，供外部获取实例
  static getInstance() {
    if (!AJAX.#instance) {
      new AJAX();
    }
    return AJAX.#instance;
  }

  // 原有的类方法
  init() {
    // 初始化逻辑
  }

  send(options) {
    // 请求逻辑
  }
}

// 导出类本身
export default AJAX;

在入口文件中使用 #

import AJAX from './ajax.js';

// 两个入口都通过getInstance获取实例，拿到的是同一个
const ajaxInstance = AJAX.getInstance();
ajaxInstance.send(...);

如果想更省心，也可以直接在模块里导出实例：

// ajax.js最后一行改成
export default AJAX.getInstance();

这样入口文件直接导入就能用，不用每次调用getInstance。

方式2：闭包封装（兼容旧环境） #

如果需要兼容不支持ES6私有属性的环境，可以用闭包来实现单例：

const AJAX = (function() {
  // 闭包变量存储唯一实例
  let instance;

  // 内部定义AJAX类
  function AJAXClass() {
    this.init();
  }

  // 挂载原型方法
  AJAXClass.prototype.init = function() {
    // 初始化逻辑
  };

  AJAXClass.prototype.send = function(options) {
    // 请求逻辑
  };

  // 返回对外的接口
  return {
    getInstance: function() {
      if (!instance) {
        instance = new AJAXClass();
      }
      return instance;
    }
  };
})();

export default AJAX;

使用方式和上面一致，调用AJAX.getInstance()获取唯一实例。

不管用哪种方案，核心都是利用Webpack的模块缓存机制：当一个模块被导入过一次后，Webpack会缓存它的导出结果，后续所有对该模块的导入都会直接返回缓存的内容。这就保证了不管多少个入口文件导入，我们的AJAX实例都是唯一的。

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