Web アプリケーションでのリッチインタラクティブな取り消しおよび転送操作の実装方法の紹介 (コード)

この記事の内容は、Web アプリケーションにおけるリッチなインタラクティブな取り消しおよび転送操作の実装方法 (コード) に関するものです。必要な方は参考にしていただければ幸いです。ヘルプ。

Web アプリケーションでは、リッチ テキスト エディターで間違ったフォントの色が設定されている場合、または H5 の作成時に誤って設定されている場合など、ユーザーが誤操作を行うことが避けられません。アクティビティ ページを削除すると、元に戻す必要もあります。たとえば、オンラインでプロトタイプ アプリケーションを設計するときに、誤ってページを削除してしまうと、この時点でユーザー エラーが発生する可能性が非常に高くなります。 「元に戻す」と「進む」の 2 つの操作は非常に必要であり、ユーザー エクスペリエンスも非常に優れています。

感想

Web アプリケーションであることは関係ありません。シナリオ、すべてのユーザーの操作は、継続的なアクションの操作が完了し、次のアクションの準備が完了すると、まったく新しい状態になります。

A —— B —— C

ユーザーが操作していない場合、グローバル状態は A
ユーザーがコンポーネントを操作して位置 X に移動します。マウスを放した後のグローバル状態は B
ですユーザーが別のコンポーネントを操作して移動した場合、削除後のグローバル状態は C

となっているため、アンドゥ操作はユーザーの操作状態が C になった時点でグローバル状態を B に戻し、その時点に戻ることになります。最後の操作が完了しました。

各操作のアクションを記録するには、このような大量のステータスを保存できるリストまたはインデックスが必要です。

しかし、このような大量のステータスを保存するために配列変数を使用するのは少し不適切でしょうか?データ？データ量が多くなるとメモリがパンクしてしまいますよね？そこで、ここでは皆さんに IndexedDB を使用することをお勧めします。

以下は、Angular、Rxjs、IndexedDB を使用してカプセル化されたサービス クラスです。

import { Inject } from "@angular/core";
import { IndexedDBAngular } from "indexeddb-angular";
import { Subject, Observer, Observable } from "rxjs";

export interface IDBData {
    widgetList: string
}

// 前进和后退的服务
@Inject({
    providedIn: 'root'
})
export class PanelExtendMoveBackService {

    /**
     * 发射DB集合存储的数据，可订阅
     */
    public launchDBDataValue$: Subject<idbdata> = new Subject<idbdata>()

    /**
     * 创建一个叫panelDataDB的本地数据库，版本号为1
     */
    public db = new IndexedDBAngular('panelDataDB', 1)

    /**
     * 记录前进和后退的存储集合项的下标key
     * 默认为0
     */
    public dbCurrentIndex: number = 0

    /**
     * 自增的DBkey
     */
    public dbKey: number = -1

    // 是否允许前进
    public get isMove() : boolean {
        return this.dbCurrentIndex  0
    }

    constructor() {}

    /**
     * 创建DB集合
     */
    public createCollections(): Observable<boolean> {
        const _sub: Subject<boolean> = new Subject<boolean>()
        this.dbKey = -1
        this.db.createStore(1, (db: any) => {
            db.currentTarget.result.createObjectStore('panelItem')
        }).then(()=>{
            this.dbClear()
            _sub.next(true)
        })
        return _sub.asObservable()
    }

    /**
     * 往集合里添加数据
     * 同时把新添加的key赋值给dbCurrentIndex，
     */
    public dbAdd(): void {
        this.handleDbCurrentRefreshDB();
        this.dbKey += 1;
        // 此处存储你要保存的数据
        const _widget_list = []
        this.db.add('panelItem', { widgetList: JSON.stringify(_widget_list) }, this.dbKey).then(
            _e => {
                if ((<object>_e).hasOwnProperty('key')) {
                    this.dbCurrentIndex = _e.key
                };
            },
            () => {
                this.dbKey -= 1
                throw new Error('添加panelItem集合失败')
            }
        )
    }

    /**
     * 在执行添加数据集操作的时候判断dbCurrentIndex当前指引的下标是否低于dbKey
     * 如果是说明执行了后退操作之后后续动作执行了dbAdd的操作，则清空dbCurrentIndex索引之后的数据重新添加
     */
    public handleDbCurrentRefreshDB(): void {
        if (this.dbCurrentIndex  {})
            }
            this.dbKey = this.dbCurrentIndex
        }
    }

    /**
     * 执行后退操作发射DB数据集
     */
    public acquireBackDBData(): void {
        if( this.isBack ) {
            this.dbCurrentIndex -= 1
            this.db.getByKey('panelItem', this.dbCurrentIndex).then(res=>{
                this.launchDBDataValue$.next(res)
            },()=>{ })
        }
    }

    /**
     * 执行前进操作发射DB数据集
     */
    public acquireMoveDBData(): void {
        if( this.isMove ) {
            this.dbCurrentIndex += 1
            this.db.getByKey('panelItem', this.dbCurrentIndex).then(res => {
                this.launchDBDataValue$.next(res)
            }, () => { })
        }
    }

    /**
     * 清除DB集合panelItem
     */
    public dbClear(): void {
        this.db.clear('panelItem').then(_e => {})
    }
}</object></boolean></boolean></boolean></idbdata></idbdata>

ここでは怠惰で、自動インクリメントされた ID をキーとして直接使用します。検索に便利です。

各操作に対して保存されるデータは次のとおりです。

最後に、取り消しと操作のシナリオを確認できます。私が実装した転送操作

以上がWeb アプリケーションでのリッチインタラクティブな取り消しおよび転送操作の実装方法の紹介 (コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。