Web应用中富交互的撤销与前进 *** 作的实现方法介绍（代码）

概述Web应用中富交互的撤销与前进 *** 作的实现方法介绍（代码） 本篇文章给大家带来的内容是关于Web应用中富交互的撤销与前进 *** 作的实现方法介绍（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

在web应用中，用户在进行一些富交互行为的 *** 作时难免会出现误 *** 作，比如在富文本编辑器设置错了字体颜色就需要撤回，做H5活动页面的时候不小心删了一个图片也需要撤回，更比如在线设计原型图应用的时候不小心删了一个页面等，总之在交互场景非常复杂的情况下，用户 *** 作失误的可能性非常大，这时候‘撤销’和‘前进’这两个 *** 作就很有必要了，而且用户体验也很好

思路

不管是任何场景下的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 < this.dbKey    }    // 是否允许后退    public get isBack() : 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) {            for (let i = this.dbCurrentIndex + 1; i <= this.dbKey; i++) {                this.db.delete('panelitem', i).then(() => {})            }            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 => {})    }}

这里我偷懒了一下，直接采用自增的ID作为key了，也方便查找
每一次 *** 作所存储的数据如下

最后可以看一下我实现好了的撤销和前进 *** 作的场景

总结

以上是内存溢出为你收集整理的Web应用中富交互的撤销与前进 *** 作的实现方法介绍（代码）全部内容，希望文章能够帮你解决Web应用中富交互的撤销与前进 *** 作的实现方法介绍（代码）所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。