Sample code for implementing snapshots in JavaScript front-end

Introduction

snapshotTranslated as a snapshot, used to intuitively obtain the status of the page at a certain runtime, and store the snapshots before and after the operation, which can easily realize the redo and undo the page state.

This article mainly introducessnapshotThe principle of tool implementation and its use in projects.

design

To implement the history, redo, and undo of page status, the following attributes and methods need to be supported

property

History: Stores the page status of the history, including the page initialization status to the previous page status
Undo records: Stores every redone operation record for recovery after undoing
Current record: Temporarily store the current page status, mainly used for the next operation, it needs to be stored in the history record
Last time of inserting data: The insertion time interval is too small and additional processing is required

 // History recordList: string[] = []
 
 // Undo the record, used to redo redoList: string[] = []
 
 // The current record is temporarily stored using the currentRecord variable. When the user changes it, it will be stored in the recordList currentRecord = ''
 
 // Last time the data was inserted time = 0

method

Store history push

When the user operates, update the history. The following points need to be considered.

When the current operation time is less than 100 ms from the last insertion time, replace the current record and cancel the addition
If the current record has a value, it means that the last operation was manually inserted, pushing the previous cached current record intorecordList, and need to clear the redo record
Store the current state to the current record
Set the maximum historical capacity, when it exceeds, delete the first inserted data

 push(record: PageData) {
   const nowTime = ()
   // Prevent the time of adding duplication. When the addition interval is less than 100ms, replace the current record and cancel the addition   if ( + 100 &gt; nowTime) {
     try {
       // Convert json to string storage        = (record)
     } catch (error) {
       return false
     }
 
     return false
   }
 
    = nowTime
 
   // Determine whether the currentRecord record has existed before, and if it is stored in the recordList   if () {
     ()
     // After adding records, you should clear and re-do records     (0, )
   }
 
   //Storage the current record    = (record)
 
   // Store up to 30 records, if the previous records exceed, delete them   if ( &gt; 30) {
     ()
   }
   return true
 }

Undo

When the user operates, depend onpushThe history list stored in the time to fall back to the previous state, the following points need to be paid attention to:

When the history is not available, return directly
Take out the last stored data from the history
If the current record exists, it needs to be stored in the redo record list
The current record needs to be cleared to prevent duplicate additions, because after undoing, it will also be executed.pushHow to store history

 undo() {
   // Return false when there is no record   if ( === 0) {
     return null
   }
 
   const record = ()
 
   // Add the current record to the redo record   if () {
     ()
   }
 
   //Discard the current record to prevent repeated additions    = ''
   return (record as string) as PageData
 }

Redo operation redo

When the user operates, depend onredoListList, to fall back to the status before undoing, the following points need to be paid attention to:

When the redo record is not available, return directly
Take out the last stored data from the redo record
If the current record has a value, it needs to be placed in the history list
The current record needs to be cleared to prevent repeated additions, because after redoing, it will also be executed.pushHow to store history

 redo() {
   // Return false when there is no redo record   if ( === 0) {
     return null
   }
 
   const record = ()
   // Add to redo record   if () {
     ()
   }
 
   //Discard the current record to prevent repeated additions    = ''
   return (record as string) as PageData
 }

Process Demo

Assume that the data list is[1, 2, 3, 4], the current attribute values are:

 recordList = [1, 2, 3]
 redoList = []
 currentRecord = 4

1. Add 5 manually and it will be executedpushAfter execution, the attribute values are

 recordList = [1, 2, 3, 4]
 redoList = []
 currentRecord = 5

2. If you execute 1 revocation, it will be executed first.undo, after execution, the attribute values are

 recordList = [1, 2, 3]
 redoList = [5]
 currentRecord = ''

Then executepush, will 4pushAfter execution, the attribute values are

 recordList = [1, 2, 3]
 redoList = [5]
 currentRecord = 4

3. Execute the second revocation, and then execute it first.undo, after execution, the attribute values are

 recordList = [1, 2]
 redoList = [5, 4]
 currentRecord = ''

Then executepush, will 3pushAfter execution, the attribute values are

 recordList = [1, 2]
 redoList = [5, 4]
 currentRecord = 3

4. If you perform a redo, you will first execute it.redo, after execution, the attribute values are

 recordList = [1, 2, 3]
 redoList = [5]
 currentRecord = ''

Then executepush, will 4pushAfter execution, the attribute values are

 recordList = [1, 2, 3]
 redoList = [5]
 currentRecord = 4

5. Add 6 manually and it will be executedpushAfter execution, the attribute values are

 recordList = [1, 2, 3, 4]
 redoList = []
 currentRecord = 6

Complete code

 export default class Snapshot {
     // History     recordList: string[] = []
 
     // Undo the record, used to redo     redoList: string[] = []
 
     // The current record is temporarily stored using the currentRecord variable. When the user changes it, it will be stored in the recordList     currentRecord = ''
 
     // Last time the data was inserted     time = 0
 
     push(record: PageData) {
         const nowTime = ()
         // Prevent the time of adding duplication. When the addition interval is less than 100ms, replace the current record and cancel the addition         if ( + 100 &gt; nowTime) {
             try {
                 // Convert json to string storage                  = (record)
             } catch (error) {
                 return false
             }
 
             return false
         }
 
          = nowTime
 
         // Determine whether the currentRecord record has existed before, and if it is stored in the recordList         if () {
             ()
             // After adding records, you should clear and re-do records             (0, )
         }
 
         try {
             // Convert json to string storage              = (record)
         } catch (error) {
             return
         }
 
         // Store up to 30 records, if the previous records exceed, delete them         if ( &gt; 30) {
             ()
         }
         return true
     }
 
     undo() {
         // Return false when there is no record         if ( === 0) {
             return null
         }
 
         const record = ()
 
         // Add the current record to the redo record         if () {
             ()
         }
 
         //Discard the current record to prevent repeated additions          = ''
         return (record as string) as PageData
     }
 
     redo() {
         // Return false when there is no redo record         if ( === 0) {
             return null
         }
 
         const record = ()
         // Add to redo record         if () {
             ()
         }
 
         //Discard the current record to prevent repeated additions          = ''
         return (record as string) as PageData
     }
 }

This is the article about the sample code for implementing snapshots in front-end JavaScript. For more related JavaScript snapshot content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!