背景

隨著應用軟件功能的不斷增加，應用程序軟件首頁成為彈窗的重災區，不僅有升級彈窗，還有積分彈窗，簽到，引導等各種彈窗。為了徹底解彈窗問題，本文將使用設計模式解決這個痛點。

設計模式

本方案采用責任鏈設計模式和建造者設計模式，通過將不同的彈窗添加到彈窗處理類，然后按顯示順序。

實現方案

1. 先定義基礎彈窗接口 DialogIntercept，統一彈窗的行為。intercept() 方法用于執行下一個彈窗。show ()方法用于判斷當前彈窗是否顯示，這里同時支持異步接口請求返回的判斷。

export interface DialogIntercept{
    
  intercept(dialogChain:DialogChain):void

  show():boolean |Promise< boolean >
}

2. 提供一個彈窗處理類DialogChain，用于處理多個彈窗的執行邏輯，將彈窗依次添加到 chainList 中保存，然后執行proceed()方法開始顯示彈窗，同時提供一個proceedNext() 方法用于直接跳過當前彈窗，由于代碼較多，此處省略了部分代碼。

/**
 * 處理彈窗執行
 */
export class DialogChain {
  private index: number = 0
  private chainList: ArrayList< DialogIntercept > = new ArrayList()

  addIntercept(dialogIntercept: DialogIntercept): DialogChain {
    if (!this.chainList.has(dialogIntercept)) {
      this.chainList.add(dialogIntercept)
    }
    return this
  }

  /**
   * 不執行當前彈窗，可以直接跳過
   */
  proceedNext() {
    ++this.index
    this.proceed()
  }

  /**
   * 調用繼續執行下一步
   */
  proceed() {
    if (this.index >= 0 && this.index < this.chainList.length) {
      let dialogIntercept = this.chainList[this.index]
       let show = dialogIntercept.show()
       if (typeof show === 'boolean' && show) { {
        ..........
      } else if (show instanceof Promise) {
       ...........
      } else {
       ........
      }

    } else {
      this.index = 0

    }
  }
}

3. 自定義彈窗實現DialogIntercept 接口，通過show()方法的返回值決定當前彈窗是否彈出，如簽到彈窗肯定是每天彈出，可以根據條件 直接返還 true。或者是禮物彈窗，當接口查詢到還有是否有未領取的禮物來決定彈窗的是否彈出。這里簡單測試一下。
4. 分別定義彈窗 DialogA，DialogB，DialogC，實現接口DialogIntercept。

export class DialogA implements DialogIntercept {
  uiContext: UIContext
  contentNode?: ComponentContent< DialogParams >
  promptAction?: PromptAction

  constructor(uiContext: UIContext) {
    this.uiContext = uiContext;
    this.promptAction = this.uiContext.getPromptAction();
  }

  intercept(dialogChain: DialogChain): void {

    let params = new DialogParams()
    params.callBack = () = > {
      this.promptAction?.closeCustomDialog(this.contentNode)
      dialogChain.proceed()
    }
    // UI展示的Node
    this.contentNode = new ComponentContent(this.uiContext, wrapBuilder(DialogABuild), params);

    // 打開彈窗
    this.promptAction?.openCustomDialog(
      this.contentNode,
      {
        isModal: true,
        autoCancel: true,
        alignment: DialogAlignment.Center
      }
    )

  }

  show(): boolean | Promise< boolean > {
    return true
  }
}

@Builder
function DialogABuild(params: DialogParams) {
  // 封裝后的UI
  DialogView({ eventModel: params,content:"恭喜您，獲得300萬積分，請及時領取!",confirmBtnContent:"領取",cancelBtnContent:"取消" })
}

export class DialogParams {
  callBack = () = > {
  }
}

5. 將三個彈窗添加到彈窗管理類，然后依次執行彈窗。

private dialogChain = new DialogChain()

 this.dialogChain
      .addIntercept(new DialogA(this.getUIContext()))
      .addIntercept(new DialogB(this.getUIContext()))
      .addIntercept(new DialogC(this.getUIContext()))
 //開始執行彈窗
 this.dialogChain.proceed()

6. 實現效果如下:

審核編輯 黃宇