自定义事件懒加载触发方法解析

document.getElementById('editor-btn').addEventListener('click', () => {
  document.dispatchEvent(new CustomEvent('load-editor', {
    detail: { theme: 'dark', autoFocus: true }
  }));
});

const loadedModules = new Map();

document.addEventListener('load-editor', async (e) => {
  const { theme, autoFocus } = e.detail;
  
  if (loadedModules.has('Editor')) {
    loadedModules.get('Editor').init({ theme, autoFocus });
    return;
  }

  try {
    const { default: Editor } = await import('./modules/Editor.js');
    loadedModules.set('Editor', Editor);
    Editor.init({ theme, autoFocus });
  } catch (err) {
    console.error('Editor module load failed:', err);
  }
});

export default class Editor {
  static instance = null;

  static init(options) {
    if (this.instance) return this.instance;
    this.instance = new Editor(options);
    this.instance.render();
    return this.instance;
  }

  constructor({ theme }) {
    this.theme = theme;
  }

  render() {
    // 渲染逻辑，不自动挂载
  }
}

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      document.dispatchEvent(new CustomEvent('load-editor', {
        detail: { autoLoad: true }
      }));
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.1 });

observer.observe(document.querySelector('.editor-section'));