在web應(yīng)用中，用戶在進(jìn)行一些富交互行為的操作時(shí)難免會(huì)出現(xiàn)誤操作，比如在富文本編輯器設(shè)置錯(cuò)了字體顏色就需要撤回，做H5活動(dòng)頁面的時(shí)候不小心刪了一個(gè)圖片也需要撤回，更比如在線設(shè)計(jì)原型圖應(yīng)用的時(shí)候不小心刪了一個(gè)頁面等，總之在交互場景非常復(fù)雜的情況下，用戶操作失誤的可能性非常大，這時(shí)候‘撤銷’和‘前進(jìn)’這兩個(gè)操作就很有必要了，而且用戶體驗(yàn)也很好

思路

不管是任何場景下的web應(yīng)用，用戶的每一次操作我們都可以看成是對某個(gè)組件或某個(gè)對象的狀態(tài)和屬性進(jìn)行改變，一旦連續(xù)的動(dòng)作操作完成正準(zhǔn)備進(jìn)行下一個(gè)動(dòng)作之前，此刻的狀態(tài)就是一個(gè)全新的狀態(tài)

A —— B —— C
用戶未操作的時(shí)候全局狀態(tài)是A
用戶操作某個(gè)組件使其移動(dòng)到位置X，松開鼠標(biāo)之后全局狀態(tài)是B
用戶操作另一個(gè)組件使其刪除，完成后全局狀態(tài)是C

所以，撤銷的操作就是在用戶操作狀態(tài)到C的時(shí)候讓全局的狀態(tài)回到B，回到上一次操作完的時(shí)候。
那么就需要可以存放這種大量狀態(tài)的列表或索引來記錄每一次操作的動(dòng)作

但如果我用某一個(gè)數(shù)組變量來存儲(chǔ)如此龐大的數(shù)據(jù)是不是略顯不妥？數(shù)據(jù)量越大內(nèi)存應(yīng)該會(huì)爆吧？所以這里我推薦大家使用IndexedDB
下面是利用Angular、Rxjs和IndexedDB封裝好的一個(gè)服務(wù)類

import { Inject } from "@angular/core"; import { IndexedDBAngular } from "indexeddb-angular"; import { Subject, Observer, Observable } from "rxjs";export interface IDBData {widgetList: string }// 前進(jìn)和后退的服務(wù) @Inject({providedIn: 'root' }) export class PanelExtendMoveBackService {/*** 發(fā)射DB集合存儲(chǔ)的數(shù)據(jù)，可訂閱*/public launchDBDataValue$: Subject<IDBData> = new Subject<IDBData>()/*** 創(chuàng)建一個(gè)叫panelDataDB的本地?cái)?shù)據(jù)庫，版本號(hào)為1*/public db = new IndexedDBAngular('panelDataDB', 1)/*** 記錄前進(jìn)和后退的存儲(chǔ)集合項(xiàng)的下標(biāo)key* 默認(rèn)為0*/public dbCurrentIndex: number = 0/*** 自增的DBkey*/public dbKey: number = -1// 是否允許前進(jìn)public get isMove() : boolean {return this.dbCurrentIndex < this.dbKey}// 是否允許后退public get isBack() : boolean {return this.dbCurrentIndex > 0}constructor() {}/*** 創(chuàng)建DB集合*/public createCollections(): Observable<boolean> {const _sub: Subject<boolean> = new Subject<boolean>()this.dbKey = -1this.db.createStore(1, (db: any) => {db.currentTarget.result.createObjectStore('panelItem')}).then(()=>{this.dbClear()_sub.next(true)})return _sub.asObservable()}/*** 往集合里添加數(shù)據(jù)* 同時(shí)把新添加的key賦值給dbCurrentIndex，*/public dbAdd(): void {this.handleDbCurrentRefreshDB();this.dbKey += 1;// 此處存儲(chǔ)你要保存的數(shù)據(jù)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 -= 1throw new Error('添加panelItem集合失敗')})}/*** 在執(zhí)行添加數(shù)據(jù)集操作的時(shí)候判斷dbCurrentIndex當(dāng)前指引的下標(biāo)是否低于dbKey* 如果是說明執(zhí)行了后退操作之后后續(xù)動(dòng)作執(zhí)行了dbAdd的操作，則清空dbCurrentIndex索引之后的數(shù)據(jù)重新添加*/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}}/*** 執(zhí)行后退操作發(fā)射DB數(shù)據(jù)集*/public acquireBackDBData(): void {if( this.isBack ) {this.dbCurrentIndex -= 1this.db.getByKey('panelItem', this.dbCurrentIndex).then(res=>{this.launchDBDataValue$.next(res)},()=>{ })}}/*** 執(zhí)行前進(jìn)操作發(fā)射DB數(shù)據(jù)集*/public acquireMoveDBData(): void {if( this.isMove ) {this.dbCurrentIndex += 1this.db.getByKey('panelItem', this.dbCurrentIndex).then(res => {this.launchDBDataValue$.next(res)}, () => { })}}/*** 清除DB集合panelItem*/public dbClear(): void {this.db.clear('panelItem').then(_e => {})} }

這里我偷懶了一下，直接采用自增的id作為key了，也方便查找
每一次操作所存儲(chǔ)的數(shù)據(jù)如下

最后可以看一下我實(shí)現(xiàn)好了的撤銷和前進(jìn)操作的場景

與50位技術(shù)專家面對面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的富交互Web应用中的撤销和前进的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。