Introduction to the implementation method of rich interactive undo and forward operations in web applications (code)

The content of this article is about the implementation method (code) of rich interactive undo and forward operations in web applications. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. help.

In web applications, users will inevitably make misoperations when performing some rich interactive actions. For example, if they set the wrong font color in the rich text editor and need to withdraw it, they may accidentally make an H5 activity page. Deleting a picture also requires undoing it. For example, accidentally deleting a page when designing a prototype application online. In short, when the interaction scene is very complex, the possibility of user error is very high. At this time, 'undo' and The two operations of 'forward' are very necessary, and the user experience is also very good

Thoughts

No matter it is a web application in any scenario, every user's We can regard an operation as changing the state and properties of a certain component or object. Once the continuous action operation is completed and the next action is being prepared, the state at this moment is a brand new state

A —— B —— C
When the user does not operate, the global state is A
The user operates a component to move it to position X. After releasing the mouse, the global state is B
The user operates another component to move it After deletion, the global state is C

. Therefore, the undo operation is to return the global state to B when the user operation state reaches C, and return to the time when the last operation is completed.
Then you need a list or index that can store such a large amount of status to record the actions of each operation

But is it slightly inappropriate if I use an array variable to store such a huge amount of data? The larger the amount of data, the memory will probably burst, right? So here I recommend everyone to use IndexedDB
The following is a service class encapsulated using Angular, Rxjs and 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>

I am lazy here and directly use the auto-incremented id as the key, which is also convenient for searching
The data stored for each operation is as follows

Finally, you can take a look at the scenario of the undo and forward operations that I have implemented

The above is the detailed content of Introduction to the implementation method of rich interactive undo and forward operations in web applications (code). For more information, please follow other related articles on the PHP Chinese website!