웹 애플리케이션(코드)에서 풍부한 대화형 실행 취소 및 전달 작업 구현 방법 소개

이 글은 웹 애플리케이션에서 풍부한 대화형 실행 취소 및 전달 작업의 구현 방법(코드)을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

웹 애플리케이션에서 사용자는 일부 풍부한 대화형 작업을 수행할 때 필연적으로 잘못된 작업을 수행하게 됩니다. 예를 들어 서식 있는 텍스트 편집기에서 잘못된 글꼴 색상을 설정한 경우 이를 취소해야 하거나 H5를 만들 때 실수로 이미지를 삭제합니다. 온라인에서 프로토타입 애플리케이션을 디자인할 때 실수로 페이지를 삭제하는 등의 활동 페이지도 철회해야 합니다. 즉, 상호 작용 장면이 매우 복잡할 경우 이 때 '실행 취소'가 발생할 가능성이 매우 높습니다. '와 'forward' 두 가지 작업이 매우 필요하며 사용자 경험도 매우 좋습니다

Thinking

어떤 시나리오에서든 웹 애플리케이션이더라도 사용자의 모든 작업은 하나의 작업으로 간주될 수 있습니다. 특정 구성 요소 또는 객체의 상태 및 속성이 변경됩니다. 연속 작업 작업이 완료되고 다음 작업을 준비하기 전인 이 순간의 상태는 완전히 새로운 상태입니다

A —— B —— C
사용자가 수행할 때 동작하지 않으면 전역 상태는 A
User 컴포넌트를 동작시켜 위치로 이동합니다. 전역 상태를 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  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>

여기서 게으른데 자동 증가 ID를 키로 직접 사용하므로 검색에도 편리합니다
모든 작업 매장 데이터는 다음과 같습니다

마지막으로 제가 구현한 Undo 및 Forward 작업 장면을 보실 수 있습니다

위 내용은 웹 애플리케이션(코드)에서 풍부한 대화형 실행 취소 및 전달 작업 구현 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!