无法在文件中实例化对象并跨文件复用，求单例模式实现指导

你遇到的问题核心在于当前的singleton函数并没有真正实现单例模式——每次调用singleton()时，函数内部的_singleton变量都会被重新声明并初始化为undefined，所以每次都会创建新的Quill实例，自然无法在不同文件复用同一个对象。

为什么当前代码不生效？ #

来看你的singleton函数：

function singleton(){
 let _singleton; // 每次调用函数都会重新声明这个变量！
 let quillOptions = {
  modules: { toolbar: true },
  placeholder: 'Compose an epic...',
  theme: 'snow'
 }
 if (!_singleton) {
  _singleton = new Quill('#editor', quillOptions)
 }
 return _singleton;
}

每次调用singleton()，函数都会重新执行一遍，_singleton会被重置为undefined，所以条件!_singleton永远为真，每次都会创建新的Quill实例。

正确的单例实现方式 #

我们需要把_singleton变量放在一个不会被每次调用重置的作用域里，常见的有两种方案：

方案1：闭包保留单例状态

把_singleton放在外层函数的闭包中，让它在函数首次执行后就被保留：

// a.js
const singleton = (function() {
  let _singleton; // 这个变量只会在IIFE执行时初始化一次
  const quillOptions = {
    modules: { toolbar: true },
    placeholder: 'Compose an epic...',
    theme: 'snow'
  };

  return function() {
    if (!_singleton) {
      _singleton = new Quill('#editor', quillOptions);
    }
    return _singleton;
  };
})();

这样，第一次调用singleton()时会创建Quill实例并赋值给_singleton，后续调用都会直接返回已创建的实例。

方案2：ES6模块导出单例实例（更推荐）

如果你的项目使用ES6模块（通过import/export），可以直接在模块中创建实例并导出，模块本身就会保证只被加载一次，自然实现单例：

// a.js
const quillOptions = {
  modules: { toolbar: true },
  placeholder: 'Compose an epic...',
  theme: 'snow'
};

// 直接创建实例，模块加载时只会执行一次
const quillInstance = new Quill('#editor', quillOptions);

export default quillInstance;

然后在其他文件中直接导入：

// b.js
import quillInstance from './a.js';
// 使用实例
quillInstance.setText('Hello from b.js');

// c.js
import quillInstance from './a.js';
// 复用同一个实例
console.log(quillInstance.getText());

这种方式更简洁，也符合现代JS的模块规范。

额外注意事项 #

• 确保#editor元素在创建Quill实例之前已经被添加到DOM中（你的代码里已经先创建了元素，这部分没问题）。
• 如果是在非模块环境下（比如直接用<script>标签加载），要保证a.js在b.js和c.js之前加载，这样singleton函数才能被其他文件访问到。

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