js插件 多层

// UI 层
class PluginUI {
  constructor(container) {
    this.container = container;
    this.init();
  }

  init() {
    // 初始化 UI 元素
  }

  showData(data) {
    // 显示数据
  }
}

// 业务逻辑层
class PluginLogic {
  constructor() {
    this.data = null;
  }

  fetchData() {
    // 获取数据，例如通过 API 请求
    this.data = { /* ... */ };
  }

  processData() {
    // 处理数据
    return this.data;
  }
}

// 数据访问层（示例中简化为直接返回数据）
class PluginData {
  getData() {
    return { /* ... */ };
  }
}

// 插件主类
class MyPlugin {
  constructor(container) {
    this.ui = new PluginUI(container);
    this.logic = new PluginLogic();
    this.data = new PluginData();
    this.init();
  }

  init() {
    this.logic.fetchData();
    const processedData = this.logic.processData();
    this.ui.showData(processedData);
  }
}

// 使用插件
const plugin = new MyPlugin(document.getElementById('plugin-container'));