If it’s not trying to write shitty code, if it’s not trying to dig a hole for yourself, what? Can only blame the product demand is very public but is really very 🤮 disgusting

shivering

How can we solve this fatal continuous box on the road, and hope that their code is not shit, and can give the back cool, showTime bosses do not spray 🐶 (dog head to save life)

Publish and subscribe + combination + control

Roll up your sleeves and go straight (Vue3 Walking)

  1. Idea: First of all, take the shells as a subset, we only need to know which shells need to pop up in the next step, Push them into the List, and then display the shells iteratively through Controler

  2. Implement the display logic of a single pop-up box (publish and subscribe → tell the Controler to do the next step)

    First define a CreatMonitorSpringView class that needs to

  // Enumeration of subrack types
  enum CreatMonitorSpringViewType {
      CUSTOMS_SUCCESS, // Pass successfully
      CUSTOMS_EJECT, // Fail to enter the level
  }

  class CreatMonitorSpringView {
      // A collection of pop-ups currently required
      currtDialogs: CurrtExamples = {
        creatMonitorSpringViews: []}; type: CreatMonitorSpringViewType; valueResolve: ((value: unknown) = > void) | null = null;

      value: Ref<boolean> = ref(false);

      delayed = 0;

      callBackCollection: CallBackState = {};

      get viewControl() {
        return readonly(this.value);
      }

  constructor(type: CreatMonitorSpringViewType, callBackAsg: CallBackState = {}, delayed = 0) {
    this.delayed = delayed;
    this.type = type;
    this.callBackCollection = callBackAsg;
    // Listen for the popbox
    watch(this.value, async() = > {// The callback function when the value changes
      if (!this.value.value) {
        this.valueResolve && this.valueResolve(null);
        this.closeCallback();
      } else {
        if (this.callBackCollection.callback) {
          const data = this.callBackCollection.callback(this.close.bind(this));
          if (data instanceof Promise) {
            awaitdata; }}}}); }// Pop up the dialog box or close it
  async open() {
    if (this.callBackCollection.beforeCallback) {
      const data = this.callBackCollection.beforeCallback(this.close.bind(this));
      if (data instanceof Promise) {
        const result = await data;
        if(! result &&typeof result === 'boolean') return;
      } else {
        if(! data &&typeof data === 'boolean') return; }}return new Promise((resolve) = > {
      this.value.value = true;
      this.valueResolve = resolve.bind(this);
    });
  }

  close() {
    this.value.value = false;
  }
  // Close the callback
  async closeCallback() {
    if (this.callBackCollection.afertCallback) {
      const data = this.callBackCollection.afertCallback(this.currtDialogs);
      if (data instanceof Promise) {
        awaitdata; }}this.valueResolve = null; }}Copy the code

Set up the hook function by listening for changes in value

interface CallBackState { beforeCallback? :(Function. asg: any[]) = > Promise<boolean | void> | boolean | void; callback? :(Function. asg: any[]) = >unknown; afertCallback? :(item: CurrtExamples) = > unknown;
}
Copy the code

Finally hand control to the Controler

const useGeneratorView = (creatMonitorSpringViews: CreatMonitorSpringView[]) = > {
  const currtSprType = ref<CreatMonitorSpringViewType>();
  const taskCallView = async(callback?) = > {// Avoid Ref to ToRef and do not lose the response
    const currtExample = { creatMonitorSpringViews };
    for (const item of currtExample.creatMonitorSpringViews) {
      // Inject all of the current dialog cartridges to prevent dynamic logic from requiring new cartridges
      currtSprType.value = item.type;
      item.currtDialogs = currtExample;
      await delayedPromiseFun(item.delayed);
      await item.open();
    }
    callback && callback();
  };
  return { taskCallView, currtSprType };
};

const delayedPromiseFun = (delay = 0) = > new Promise((resolve) = > setTimeout(resolve, delay));
Copy the code

So we just need to focus on what popboxes we need to display

useGeneratorView([
  new CreatMonitorSpringView(CreatMonitorSpringViewType.CUSTOMS_SUCCESS),
  new CreatMonitorSpringView(CreatMonitorSpringViewType.CUSTOMS_EJECT)
]);
Copy the code