富互動Web應用中的撤銷和前進

2021-09-13 03:45:04 字數 1703 閱讀 7897

不管是任何場景下的web應用,使用者的每一次操作我們都可以看成是對某個元件或某個物件的狀態和屬性進行改變,一旦連續的動作操作完成正準備進行下乙個動作之前,此刻的狀態就是乙個全新的狀態

a —— b —— c

使用者未操作的時候全域性狀態是a

使用者操作某個元件使其移動到位置x,鬆開滑鼠之後全域性狀態是b

使用者操作另乙個元件使其刪除,完成後全域性狀態是c

所以,撤銷的操作就是在使用者操作狀態到c的時候讓全域性的狀態回到b,回到上一次操作完的時候。

那麼就需要可以存放這種大量狀態的列表或索引來記錄每一次操作的動作

但如果我用某乙個陣列變數來儲存如此龐大的資料是不是略顯不妥?資料量越大記憶體應該會爆吧?所以這裡我推薦大家使用indexeddb

下面是利用angular、rxjs和indexeddb封裝好的乙個服務類

import  from "@angular/core";

import from "indexeddb-angular";

import from "rxjs";

export inte***ce idbdata

// 前進和後退的服務

@inject()

export class panelextendmovebackservice

// 是否允許後退

public get isback() : boolean

constructor() {}

/*** 建立db集合

*/public createcollections(): observable).then(()=>)

return _sub.asobservable()

}/**

* 往集合裡新增資料

* 同時把新新增的key賦值給dbcurrentindex,

*/public dbadd(): void , this.dbkey).then(

_e => ;

},() => )}

/*** 在執行新增資料集操作的時候判斷dbcurrentindex當前指引的下標是否低於dbkey

* 如果是說明執行了後退操作之後後續動作執行了dbadd的操作,則清空dbcurrentindex索引之後的資料重新新增

*/public handledbcurrentrefreshdb(): void )

}this.dbkey = this.dbcurrentindex}}

/*** 執行後退操作發射db資料集

*/public acquirebackdbdata(): void ,()=>)}}

/*** 執行前進操作發射db資料集

*/public acquiremovedbdata(): void , () => )}}

/*** 清除db集合panelitem

*/public dbclear(): void )}}

這裡我偷懶了一下,直接採用自增的id作為key了,也方便查詢

每一次操作所儲存的資料如下

最後可以看一下我實現好了的撤銷和前進操作的場景

WDM驅動和應用的互動

deviceiocontrol的同步和非同步呼叫方式 上層應該可以以同步或非同步的方式.ov ov.hevent createevent null,true,false,null deviceiocontrol ov 執行其它操作.等待驅動事件 handle aevents 2 aevents 0 ...

Winform應用和Web應用的比較

比較winform應用和web應用 整理 2007 08 17 23 55 比較winform應用和web應用 整理 html具有完善的布局能力,包括能夠基於文字流進行布局,包括各種段落 段落中文字的左中右對齊,段首的縮排,行間距,避頭尾字元 html的 具有極強的布局功能,可以將ui分割成不同比例...

spring在web中的應用

示例 contextconfiglocation springcontextservlet org.springframework.web.context.contextloaderservlet1 action org.apache.struts.action.actionservlet conf...