Introduction à la méthode d'implémentation d'opérations d'annulation et de transfert interactives riches dans les applications Web (code)

Le contenu de cet article concerne la méthode d'implémentation (code) des opérations interactives riches d'annulation et de transfert dans les applications Web. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. aide.

Dans les applications Web, les utilisateurs feront inévitablement des erreurs lors de l'exécution de certaines opérations interactives riches. Par exemple, si la mauvaise couleur de police est définie dans l'éditeur de texte enrichi, elle doit être retirée, ou accidentellement lors de la création d'un H5. page d'activité. La suppression d'une image nécessite également de l'annuler. Par exemple, supprimer accidentellement une page lors de la conception d'un prototype d'application en ligne. En bref, lorsque la scène d'interaction est très complexe, le risque d'erreur de l'utilisateur est très élevé. annuler' et Les deux opérations « avancer » sont très nécessaires, et l'expérience utilisateur est également très bonne

Les choses

Peu importe qu'il s'agisse d'une application Web dans n'importe quel scénario, celui de chaque utilisateur Nous pouvons considérer une opération comme un changement de l'état et des propriétés d'un composant ou d'un objet. Une fois l'opération d'action continue terminée et l'action suivante est en cours de préparation, l'état à ce moment est un tout nouvel état

A —— B —— C
Lorsque l'utilisateur n'opère pas, l'état global est A
L'utilisateur actionne un composant pour le déplacer en position X. Après avoir relâché la souris, l'état global est B
L'utilisateur en exploite un autre. Le composant est supprimé et l'état global une fois terminé est C

Par conséquent, l'opération d'annulation consiste à renvoyer l'état global à B lorsque l'état de fonctionnement de l'utilisateur atteint C, et à revenir. jusqu'au moment où la dernière opération est terminée.
Ensuite, vous avez besoin d'une liste ou d'un index capable de stocker une si grande quantité de statuts pour enregistrer les actions de chaque opération

Mais est-ce légèrement inapproprié si j'utilise une variable de tableau pour stocker une telle quantité de données? Plus la quantité de données est grande, la mémoire va probablement exploser, n'est-ce pas ? Donc ici, je recommande à tout le monde d'utiliser IndexedDB
Ce qui suit est une classe de service encapsulée à l'aide d'Angular, Rxjs et 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>

Je suis paresseux ici et j'utilise directement l'identifiant auto-incrémenté comme clé Easy. trouver
Les données stockées dans chaque opération sont les suivantes

Enfin, vous pouvez jeter un œil aux scénarios d'opération d'annulation et de transfert I ont mis en œuvre

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!