Web利用中富交互的撤销与前进操纵的实现办法介绍（代码）-百分百源码网

Web利用中富交互的撤销与前进操纵的实现办法介绍（代码）

发布时间：09/01 来源：未知浏览：关键词：

本篇文章给大家带来的内容是关于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了，也利便查寻
每一次操纵所储备的数据如下