基于OpenHarmony的ArkUI框架进阶对于高性能容器类和持久化和原子化的运用

140 阅读4分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第26天,点击查看活动详情

高性能容器类

顾名思义,容器类是一个存储类,用于存储各种数据类型的元素,并提供一系列处理数据元素的方法。ArkUI开发框架提供了两种类型的容器类,线性和非线性。这些容器类是用类似的静态语言实现的。

declare class List<T> {

  constructor();
  length: number;
  add(element: T): boolean;
  get(index: number): T;
  has(element: T): boolean;
  getIndexOf(element: T): number;
  removeByIndex(index: number): T;
  remove(element: T): boolean;
  getLastIndexOf(element: T): number;
  forEach(callbackfn: (value: T, index?: number, List?: List<T>) => void,
  thisArg?: Object): void;
  convertToArray(): Array<T>;
  isEmpty(): boolean;
  [Symbol.iterator](): IterableIterator<T>;
  // 省略部分API
  
}

它们通过限制存储位置和属性、确保对数据的有效访问和提高应用程序的性能,使每种类型的数据能够在完成其自身功能的基础上切断冗余分支。本章将介绍ArkUI开发框架中的各种类型的容器类以及相关API的使用。

ArrayList是一个动态数组,可用于构造全局数组对象。根据通用定义,ArrayList要求存储位置是一个连续的内存空间,初始容量为10,并支持动态扩展。每次扩建是原容量的1.5倍。添加、删除、修改和查询ArrayList的相关API如下:

declare class ArrayList<T> {

  constructor();
  length: number;
  add(element: T): boolean;
  insert(element: T, index: number): void;
  has(element: T): boolean;
  getIndexOf(element: T): number;
  removeByIndex(index: number): T;
  remove(element: T): boolean;
  getLastIndexOf(element: T): number;
  removeByRange(fromIndex: number, toIndex: number): void;
  replaceAllElements(callbackfn: (value: T, index?: number, arrlist?: ArrayList<T>) => T,
  thisArg?: Object): void;
  forEach(callbackfn: (value: T, index?: number, arrlist?: ArrayList<T>) => void,
  thisArg?: Object): void;
  sort(comparator?: (firstValue: T, secondValue: T) => number): void;
  clear(): void;
  isEmpty(): boolean;
  // 省略部分API
}

Badge

interface BadgeInterface {
  (value: BadgeParamWithNumber): BadgeAttribute;
  (value: BadgeParamWithString): BadgeAttribute;
}

declare interface BadgeParam {
  position?: BadgePosition;
  style: BadgeStyle;
}

declare interface BadgeParamWithNumber extends BadgeParam {
  count: number;
  maxCount?: number;
}

declare interface BadgeParamWithString extends BadgeParam {
  value: string;
}

declare interface BadgeParam {
  position?: BadgePosition;
  style: BadgeStyle;
}

Badge的构造方法允许接收BadgeParamWithNumber和BadgeParameWithString参数,这两个参数都是从BadgeParam继承的。BadgeParam参数描述如下: 位置:设置徽章的显示位置。BadgePosition提供以下三个位置: 右:徽章显示在右垂直中心。 RightTop(默认):徽章显示在右上角。 左:徽章显示在左垂直中心。 样式:设置徽章的显示样式。BadgeStyle参数描述如下: 颜色:设置徽章的文本颜色,默认为白色。 FontSize:设置徽章的文本字体大小。默认值为10 vp。 BadgeSize:设置徽章的显示大小。 徽章颜色:设置徽章的背景颜色,默认为红色。

原子化服务代码简析

创建原子化服务项目后,系统将默认在条目的js目录和FormAbility目录中生成页面模板和服务管理。页面模板是一种标准的原子化卡片布局,页面表示页面集,索引表示特定模块。服务管理为服务状态更改提供回调,在该回调中可以更新卡数据。

<div class="container">
    <stack>                                                  // 堆叠式布局
        <div class="container-img">
            <image src="/common/widget.png" class="bg-img"/> // 设备卡片背景
        </div>
        <div class="container-inner">
            <text class="title">                             // 设置标题
                {{ $t('strings.title_immersive') }}
            </text>
            <text class="detail_text" onclick="routerEvent"> // 设备内容,点击时触发routerEvent事件
                {{ $t('strings.detail_immersive') }}
            </text>
        </div>
    </stack>
</div>

类将onclick事件添加到“detail_text”的文本组件。单击组件时,触发routerEvent的事件回调。RouterEvent在index中布局代码在json文件中配置,演示效果如下: 在这里插入图片描述

表达式持久化

'@ohos.data.存储模块提供的存储接口有存储数据的要求,用户的计算数据很大,因此将计算表达式数据存储在数据库中是合适的。 ArkUI开发框架可在“@ohos”上获得。data rdb'模块提供了一套完整的接口,用于基于SQLite组件RdbStore管理本地数据库,它提供了一系列用于添加、删除、修改和查询的方法,并支持运行SQL语句以满足复杂场景的需要。 创建ExpressionManager类,该类负责添加、删除、修改和查询Expression数据。代码如下:

let DB_NAME = "calculator.db";
let TB_NAME = "calculator_expression";
let COL_ID = "id";
let COL_OD = "ownerId";
let COL_EP = "expression";
let COL_RT = "result";
let COL_CM = "comment";
let COL_TM = "time";
let DB_CONFIG = { name: DB_NAME };
let CREATE_TABLE = "CREATE TABLE IF NOT EXISTS " + TB_NAME + " ( " +
                      COL_ID + " INTEGER PRIMARY KEY AUTOINCREMENT, " +
                      COL_OD + " INTEGER, " +
                      COL_EP + " TEXT, " +
                      COL_RT + " INTEGER, " +
                      COL_CM + " TEXT, " +
                      COL_TM + " INTEGER" +
                   ")";

export class ExpressionManager {

  public static init() {
    ExpressionManager.get().initDB();
  }

  public static get() {
    if(null == INSTANCE) {
      INSTANCE = new ExpressionManager();
    }
    return INSTANCE;
  }

  private rdbStore: rdb.RdbStore;

  private constructor() {
  }

  // 删除Expression
  public deleteExpression(expression: Expression) {
    if(expression && this.rdbStore) {
      var sql = "delete from " + TB_NAME + " where " + COL_ID + " = " + expression.id;
      this.rdbStore.executeSql(sql, null, (error, result) => {
        if(error) {
          Logger.log(JSON.stringify(error));
        }
      });
    }
  }

ExpressionManager提供添加、删除、修改和查询表达式等操作。它在内部缓存RdbStore实例,以便于后续修改表达式。因此,需要在APP启动时初始化ExpressionManager,当APP启动ets的onCreate()方法时,