关于设计模式:利用中介模式开发全局控制器

中介模式定义了一个独自的（中介）对象，来封装一组对象之间的交互。将这组对象之间的交互委派给与中介对象交互，来防止对象之间的间接交互。

在理论的我的项目中，程序由许多对象组成，对象间的交换盘根错节。

随着应用程序的规模增大，对象越来愈多，他们之间的关系也越来简单。对象间很容易呈现互相援用而导致程序无奈运行。同时开发者须要扭转或者删除某一个对象时候，须要查找并且革新所有援用到它的对象。这样一来，革新的老本会变的十分高。

但中介者模式能够让各个对象之间得以解耦。

之前的场景下，如果 A 产生了扭转，开发者须要批改 B、D、E、F 4 个对象，而通过中介者模式，咱们只须要批改中介者这一个对象即可。

中介者的益处是简化了对象之间的交互，害处则是中介类有可能会变成大而简单的“上帝类”（God Class）。所以，在应用中介者模式时候，设计上肯定要十分克服。

理论应用

在前端我的项目开发的过程中，有很多业务无关的性能，但这些性能会散落在各个业务中，难以治理，咱们利用中介者模式的思维来构建一个的控制器。

根底控制器

// 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;

此时控制器中有一个极简的缓存 tmpCache，公布订阅工具。以及服务端申请办法 api。开发者只须要导入 Controller 类即可应用。如果后续须要更加简单的缓存或者革新 api（如切换为 fetch）申请办法。开发者能够很快的进行替换。而无需革新对应文件。

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();
  }
}

此时控制器曾经具备前端开发中“大部分”性能了，如数据缓存，数据申请，登录用户信息处理等。大部分状况下，中介类也根本够用了。至于其余的工具类，除非 80% 的业务都会用到，否则不倡议增加到此类中去。但对于这些工具做一层简略的封装也是必要的（思考后续老本）。

增加业务类

此时控制器有了用户信息，多种缓存，申请办法等。咱们能够通过注入来实现其余业务。

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);

有同学可能会奇怪，为什么 Controller 不能间接导入或者主动注入 OrderService 呢。这样应用的起因是往往 Controller 和 BasicService 在根底类中，具体的业务类散布在各个业务代码中。

这里没有应用任何依赖注入的框架，起因是因为如果引入了依赖注入会大大增加复杂度。同时前端的业务都是扩散的，没有必要都放在一起。在组件须要应用到服务候才将其装载起来。

激励一下

如果你感觉这篇文章不错，心愿能够给与我一些激励，在我的 github 博客下帮忙 star 一下。

博客地址