JS利用中介模式开发全局控制器

// axios 请求工具
import axios from "axios";
// mitt 微型发布订阅工具
import mitt from "mitt";
const createApi = ($controller) => {
  const api = axios.create({
    baseURL: "/api",
    timeout: 10000,
  });
  api.interceptors.request.use(() => {
    // 可以通过 $controller.tmpCache 缓存一些数据
  });
  return api;
};
const createBus = () => mitt();
class Controller {
  // 临时缓存，也可以添加更复杂的缓存
  tmpCache: Record<string, any> = {};
  // 事件总线
  bus = createBus();
  constructor() {
    this.api = createApi(this);
  }
  static instance: Controller | null = null;
  static getInstance() {
    if (!Controller.instance) {
      Controller.instance = new Controller();
    }
    return Controller.instance;
  }
}
export default Controller;

import axios from "redaxios";
const createApi = ($controller) => {
  const api = axios.create({
    baseURL: "/api",
  });
  const getOld = api.get;
  api.get = (...params) => {
    // 如果出发缓存直接返回
    // if (xxx) {
    //   return $controller.tmpCache
    // }
    return getOld(...params);
  };
  return api;
};

class User {
  readonly $controller: Controller;
  user: User | null = null;
  constructor($controller: Controller) {
    this.$controller = $controller;
  }
  getData(key?: string) {
    return key ? this.user[key] : this.user;
  }
  // 登录
  login(params) {
    $controller.api.post("/login", params).then((response) => {
      // 处理授权以及 user 信息
    });
  }
  // 退出
  logout() {
    $controller.api.post("/logout").then(() => {
      // 清理对应数据
      $controller.tmpCache = {};
      this.user = null;
    });
  }
  // 设置用户配置
  setSetting(params) {
    return $controller.api.post("/setting", params).then(() => {
      this.user.setting = params;
    });
  }
}
class Controller {
  constructor() {
    this.api = createApi(this);
    this.user = new User(this);
  }
  logout() {
    this.user.logout();
  }
}

class BasicService {
  constructor($controller) {
    this.api = $controller.api;
    this.bus = $controller.bus;
  }
}
class OrderService extends BasicService {
  static xxxKey = "xxxx";
  constructor($controller) {
    super($controller);
    // 使用全局缓存
    this.cache = $controller.xxxCache;
    // 或者构建一个新的 cache 挂载到 controller 上
    this.cache = $controller.getCreatedCache("order", XXXCache);
  }
  getOrders = async () => {
    if (this.cache.has(OrderService.xxxKey)) {
      return this.cache.get(OrderService.xxxKey);
    }
    let orders = await this.api.get("xxxxx");
    // 业务处理，包括其他的业务开发
    order = order.map();
    this.cache.set(OrderService.xxxKey, orders);
    // 可以发送全局事件
    this.bus.emit("getOrdersSuccess", orders);
    return orders;
  };
  clear() {
    // 如果构建一个新的缓存对象，直接 clear 即可 this.cache.clear();
    this.cache.delete(OrderService.xxxKey);
  }
}
class Controller {
  // 临时缓存，也可以添加更复杂的缓存
  tmpCache: Record<string, any> = {};
  // 事件总线
  bus = createBus();
  services: Record<string, BasicService> = {};
  getService(serviceCls) {
    // 同一个类 name 为相同的名称
    const { name } = serviceCls;
    if (!this.services[name]) {
      this.services[name] = new serviceCls(Controller.instance);
    }
    return this.services[name];
  }
}

import Controller from "../../controller";
import OrderService from "./order-service";
// A 页面
const orderService = Controller.getInstance().getService(OrderService);
const priceService = Controller.getInstance().getService(PriceService);
// B 页面都会使用同一个服务
const orderService = Controller.getInstance().getService(OrderService);