背景

隨著應(yīng)用軟件功能的不斷增加，應(yīng)用程序軟件首頁(yè)成為彈窗的重災(zāi)區(qū)，不僅有升級(jí)彈窗，還有積分彈窗，簽到，引導(dǎo)等各種彈窗。為了徹底解彈窗問題，本文將使用設(shè)計(jì)模式解決這個(gè)痛點(diǎn)。

設(shè)計(jì)模式

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

實(shí)現(xiàn)方案

1. 先定義基礎(chǔ)彈窗接口 DialogIntercept，統(tǒng)一彈窗的行為。intercept() 方法用于執(zhí)行下一個(gè)彈窗。show ()方法用于判斷當(dāng)前彈窗是否顯示，這里同時(shí)支持異步接口請(qǐng)求返回的判斷。

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

  show():boolean |Promise< boolean >
}

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

/**
 * 處理彈窗執(zhí)行
 */
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
  }

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

  /**
   * 調(diào)用繼續(xù)執(zhí)行下一步
   */
  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. 自定義彈窗實(shí)現(xiàn)DialogIntercept 接口，通過show()方法的返回值決定當(dāng)前彈窗是否彈出，如簽到彈窗肯定是每天彈出，可以根據(jù)條件 直接返還 true。或者是禮物彈窗，當(dāng)接口查詢到還有是否有未領(lǐng)取的禮物來(lái)決定彈窗的是否彈出。這里簡(jiǎn)單測(cè)試一下。
4. 分別定義彈窗 DialogA，DialogB，DialogC，實(shí)現(xiàn)接口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萬(wàn)積分，請(qǐng)及時(shí)領(lǐng)取!",confirmBtnContent:"領(lǐng)取",cancelBtnContent:"取消" })
}

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

5. 將三個(gè)彈窗添加到彈窗管理類，然后依次執(zhí)行彈窗。

private dialogChain = new DialogChain()

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

6. 實(shí)現(xiàn)效果如下:

審核編輯 黃宇