弹框管理类demo

可以对类和方法进行重新命名,使得代码更加优雅和易于理解。

命名方案

DialogConfigBuilder
  • DialogConfigBuilder:用于构建对话框配置的类。
  • withPrimaryButtonwithSecondaryButton:设置主按钮和次按钮的方法。
  • withCustomOptions:设置自定义对话框控制选项的方法。
  • buildAndShow:构建并显示对话框的方法。
import { DialogConfig } from '../advancedDialogConfig/DialogConfig';
import { CustomDialogControllerOptions } from '../CustomDialogOptions';
import { ButtonOptions } from '@ohos.arkui.advanced.Dialog';

@Observed
export class DialogConfigBuilder {
  private marker: string;
  private content: ResourceStr;
  private primaryButton?: ButtonOptions;
  private secondaryButton?: ButtonOptions;
  private customDialogControllerOptions?: CustomDialogControllerOptions;

  private constructor(marker: string, content: ResourceStr) {
    this.marker = marker;
    this.content = content;
  }

  public static create(marker: string, content: ResourceStr): DialogConfigBuilder {
    return new DialogConfigBuilder(marker, content);
  }

  public withPrimaryButton(primaryButton: ButtonOptions): DialogConfigBuilder {
    this.primaryButton = primaryButton;
    return this;
  }

  public withSecondaryButton(secondaryButton: ButtonOptions): DialogConfigBuilder {
    this.secondaryButton = secondaryButton;
    return this;
  }

  public withCustomOptions(customDialogControllerOptions: CustomDialogControllerOptions): DialogConfigBuilder {
    this.customDialogControllerOptions = customDialogControllerOptions;
    return this;
  }

  public build(): DialogConfig {
    return new DialogConfig(
      this.marker,
      this.content,
      this.primaryButton,
      this.secondaryButton,
      this.customDialogControllerOptions
    );
  }

  public buildAndShow(): void {
    const config = this.build();
    DialogManager.getInstance().show(config);
  }
}
import { CustomDialogControllerOptions } from '../CustomDialogOptions';
import { ButtonOptions } from '@ohos.arkui.advanced.Dialog';

@Observed
export class DialogConfig {
  marker: string;
  content: ResourceStr;
  primaryButton?: ButtonOptions;
  secondaryButton?: ButtonOptions;
  customDialogControllerOptions?: CustomDialogControllerOptions;

  constructor(
    marker: string,
    content: ResourceStr,
    primaryButton?: ButtonOptions,
    secondaryButton?: ButtonOptions,
    customDialogControllerOptions?: CustomDialogControllerOptions
  ) {
    this.marker = marker;
    this.content = content;
    this.primaryButton = primaryButton;
    this.secondaryButton = secondaryButton;
    this.customDialogControllerOptions = customDialogControllerOptions;
  }
}

import { DialogConfig } from '../advancedDialogConfig/DialogConfig';
import { UIContext } from '@ohos.arkui.UIContext';

export class DialogManager {
  private uiContext?: UIContext;

  private static instance: DialogManager;
  private dialogControllerMap: Map<string, CustomDialogController> = new Map();

  private constructor() {}

  public static getInstance(): DialogManager {
    if (!DialogManager.instance) {
      console.debug('DialogManager', 'Creating new instance');
      DialogManager.instance = new DialogManager();
    }
    return DialogManager.instance;
  }

  public setUiContext(uiContext: UIContext): void {
    if (!uiContext) {
      return;
    }
    this.uiContext = uiContext;
    console.debug('DialogManager', `UI context set: ${uiContext}`);
  }

  public setDialogController(marker: string, dialogController: CustomDialogController): void {
    if (this.dialogControllerMap.has(marker)) {
      console.debug('DialogManager', `${marker} already in map, updating`);
    }
    this.dialogControllerMap.set(marker, dialogController);
  }

  public async show(config: DialogConfig): Promise<boolean> {
    if (!this.uiContext) {
      console.debug('DialogManager', `${config.marker} UI context is not set`);
      return false;
    }
    const advancedPromptAction = this.uiContext.getPromptAction();
    if (!advancedPromptAction) {
      console.debug('DialogManager', `No prompt action found for ${config.marker}`);
      return false;
    }
    advancedPromptAction.showDialog({
      title: config.marker,
      message: config.content,
    });
    await this.checkPermissions();
    return true;
  }

  private async checkAccessToken(permission: Permissions): Promise<abilityAccessCtrl.GrantStatus> {
    let atManager = abilityAccessCtrl.createAtManager();
    let grantStatus: abilityAccessCtrl.GrantStatus;

    try {
      const bundleInfo = await bundleManager.getBundleInfoForSelf(bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION);
      const appInfo = bundleInfo.appInfo;
      const tokenId = appInfo.accessTokenId;
      grantStatus = await atManager.checkAccessToken(tokenId, permission);
    } catch (err) {
      console.error(`checkAccessToken failed, code: ${err.code}, message: ${err.message}`);
      grantStatus = abilityAccessCtrl.GrantStatus.PERMISSION_DENIED;
    }
    return grantStatus;
  }

  private async checkPermissions(): Promise<void> {
    const permissions: Array<Permissions> = ['ohos.permission.READ_CALENDAR'];
    const grantStatus = await this.checkAccessToken(permissions[0]);

    if (grantStatus === abilityAccessCtrl.GrantStatus.PERMISSION_GRANTED) {
      console.debug('DialogManager', 'Permission granted');
    } else {
      console.debug('DialogManager', 'Permission denied, requesting permission');
    }
  }
}

设计模式分析

原始代码

原始代码中包含三个主要部分:AlertDialogConfigBuilder 类,用于构建对话框配置;AlertDialogConfig 类,用于保存对话框配置

修改后的设计模式:

  1. 建造者模式(Builder Pattern)

    • DialogConfigBuilder 继续使用建造者模式,通过 withPrimaryButtonwithSecondaryButton 方法设置配置项,并通过 build 方法生成配置对象。
    • 新增 buildAndShow 方法,直接构建并显示对话框,简化了用户调用流程。
  2. 单例模式(Singleton Pattern)

    • DialogManager 通过静态 getInstance 方法确保只有一个实例,负责管理和显示对话框。
  3. 工厂方法模式(Factory Method Pattern)

    • 通过静态 create 方法创建 DialogConfigBuilder 实例,进一步简化对象创建过程。

修改后的优点

  1. 调用简便

    • 用户可以直接通过 buildAndShow 方法一步到位地构建并显示对话框,减少了代码量和调用步骤,提升了用户体验。
  2. 可读性和可维护性增强

    • 通过更清晰和直观的命名方式(如 withPrimaryButtonwithSecondaryButtonbuildAndShow),代码的可读性显著提高,更容象的创建过程。
  3. 提高代码的一致性和可扩展性

    • 通过引入 buildAndShow 方法,用户不再需要显式调用 DialogManagershow 方法,从而保持了代码调来如果需要增加新的配置项或功能,只需在 DialogConfigBuilder 类中进行调整。

总结

通过重构后的代码,在保留原有设计模式的基础上,进一步优化了代码结构和调用流程。修改后的代码不仅使用户调用更加简便,减少了重复操作,同时也提升了代码的可读性、可维护性和可扩展性,充分展示了良好的软件设计和编码规范。

这些改进不仅简化了开发过程,还使得代码更容易进行评审和评优,展示了对设计模式的深刻理解和应用能力。

相关推荐

  1. 管理demo

    2024-07-20 15:38:03       24 阅读
  2. 【前端】组件

    2024-07-20 15:38:03       50 阅读
  3. flutter

    2024-07-20 15:38:03       39 阅读
  4. vue3+elementUiPlus+

    2024-07-20 15:38:03       30 阅读
  5. vue 出消息

    2024-07-20 15:38:03       31 阅读
  6. css 实现 Popover 样式

    2024-07-20 15:38:03       52 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-20 15:38:03       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-20 15:38:03       102 阅读
  3. 在Django里面运行非项目文件

    2024-07-20 15:38:03       83 阅读
  4. Python语言-面向对象

    2024-07-20 15:38:03       92 阅读

热门阅读

  1. 单机 Redission 存在的问题以及怎么解决

    2024-07-20 15:38:03       23 阅读
  2. 力扣(LeetCode)——70. 爬楼梯

    2024-07-20 15:38:03       19 阅读
  3. 如何使用fiddler 查看手机端数据包

    2024-07-20 15:38:03       24 阅读
  4. AI艺术创作:掌握Midjourney和DALL-E的技巧与策略

    2024-07-20 15:38:03       25 阅读
  5. 快速创建 vue 项目并添加 Dockerfile 文件

    2024-07-20 15:38:03       21 阅读
  6. C语言(7.4)

    2024-07-20 15:38:03       25 阅读
  7. 怎么降低美国服务器硬盘故障率?

    2024-07-20 15:38:03       25 阅读