登录查看更多内容

How can you implement undo and redo functionality with the Command pattern in your web app?

由人工智能和领英社区提供技术支持

Have you ever used a web app that allows you to undo and redo your actions, such as editing a document, drawing a sketch, or filling a form? If you have, you may have wondered how the developers implemented this feature. One common way to do it is by using the Command pattern, a design pattern that encapsulates the details of an action as an object. In this article, you will learn how to use the Command pattern to create a simple web app that lets you add, delete, and modify items on a list, and how to enable undo and redo functionality with a stack.

此文章中的业界达人

由社区从 5 条内容中精选。了解更多

Amit De

Founder & CEO driving IT Transformational success at Arobit Business Solutions

1 What is the Command pattern?

The Command pattern is a behavioral design pattern that decouples the sender of a request from the receiver of the request by wrapping the request as an object. This object, called a command, has an execute method that performs the action, and optionally an undo method that reverses the action. The sender of the request, called an invoker, holds a reference to the command object and calls its execute method when needed. The receiver of the request, called a receiver, is the object that actually performs the action. The Command pattern allows you to store, pass, and invoke commands as objects, making your code more flexible, modular, and testable.

添加您的观点

Amit De

Founder & CEO driving IT Transformational success at Arobit Business Solutions
举报内容
In a JavaScript, React, and Redux stack, implement the Command pattern for undo/redo functionality by encapsulating actions as command objects with `execute()` and `undo()` methods. Maintain a command history stack and a separate stack for undone commands. On `execute()`, push the command onto the history stack. For undo, pop the last command and invoke `undo()`, pushing it onto the redo stack. Conversely, for redo, pop the command from the redo stack, and call `execute()`, returning it to the history stack.

已翻译

赞
Jalal Khan

Project Manger...
举报内容
Implementing undo and redo functionality with the Command pattern involves encapsulating each user action as a command object. Store executed commands in a stack for undoing and redoing actions. When a user performs an action, create a corresponding command object, execute it, and push it onto the undo stack. For undo, pop the last command, revert its action, and push it onto the redo stack. Similarly, for redo, pop the last command from the redo stack, re-execute it, and push it back onto the undo stack. This pattern allows seamless reversal and repetition of user actions in the web app.

已翻译

赞
Arash Farahmandi

Senior Development Team Lead at Perxact
举报内容
1. Create a Command interface that defines the execute and undo methods. This interface should be implemented by all command classes that represent actions that can be undone. 2. Create concrete command classes that implement the Command interface. Each command class should represent a specific action that can be executed and undone, such as adding an item, deleting an item, or updating an item. 3. Implement an invoker class that keeps track of the commands executed and allows for undoing and redoing actions. This invoker class should have methods for executing a command, undoing the last command, and redoing the last undone command.

已翻译

赞

2 How to create a command object?

To create a command object, you need to define a class that implements the execute and undo methods. The class should also have a constructor that takes the receiver object and any other parameters needed for the action as arguments. For example, if you want to create a command object that adds an item to a list, you can write something like this in JavaScript:

class AddCommand {
  constructor(list, item) {
    this.list = list;
    this.item = item;
  }
  execute() {
    this.list.push(this.item);
  }
  undo() {
    this.list.pop();
  }
}

添加您的观点

3 How to create an invoker object?

To create an invoker object, you need to define a class that has a reference to the command object and a method that calls its execute method. The invoker object can also have a stack that stores the executed commands, so that it can undo and redo them later. For example, if you want to create an invoker object that handles the commands for a list, you can write something like this in JavaScript:

class ListInvoker {
  constructor() {
    this.command = null;
    this.undoStack = [];
    this.redoStack = [];
  }
  setCommand(command) {
    this.command = command;
  }
  executeCommand() {
    if (this.command) {
      this.command.execute();
      this.undoStack.push(this.command);
      this.redoStack = [];
      this.command = null;
    }
  }
  undoCommand() {
    if (this.undoStack.length > 0) {
      let command = this.undoStack.pop();
      command.undo();
      this.redoStack.push(command);
    }
  }
  redoCommand() {
    if (this.redoStack.length > 0) {
      let command = this.redoStack.pop();
      command.execute();
      this.undoStack.push(command);
    }
  }
}

添加您的观点

4 How to create a receiver object?

To create a receiver object, you need to define a class that has the state and behavior that the command object needs to manipulate. For example, if you want to create a receiver object that represents a list, you can write something like this in JavaScript:

class List {
  constructor() {
    this.items = [];
  }
  push(item) {
    this.items.push(item);
  }
  pop() {
    this.items.pop();
  }
  getItems() {
    return this.items;
  }
}

添加您的观点

5 How to use the Command pattern in a web app?

To use the Command pattern in a web app, you need to create the command, invoker, and receiver objects as described above, and then connect them with the user interface. For example, if you want to create a web app that lets you add, delete, and modify items on a list, and also undo and redo your actions, you can do something like this in HTML and JavaScript:

<html>
<head>
  <script src="command.js"></script>
</head>
<body>
  <h1>Command Pattern Demo</h1>
  <input type="text" id="itemInput" placeholder="Enter an item" />
  <button id="addButton">Add</button>
  <button id="deleteButton">Delete</button>
  <button id="undoButton">Undo</button>
  <button id="redoButton">Redo</button>
  <ul id="list"></ul>
  <script>
    // Create the receiver object
    let list = new List();
    // Create the invoker object
    let listInvoker = new ListInvoker();
    // Create the command objects
    let addCommand = new AddCommand(list, null);
    let deleteCommand = new DeleteCommand(list);
    // Get the UI elements
    let itemInput = document.getElementById("itemInput");
    let addButton = document.getElementById("addButton");
    let deleteButton = document.getElementById("deleteButton");
    let undoButton = document.getElementById("undoButton");
    let redoButton = document.getElementById("redoButton");
    let listElement = document.getElementById("list");
    // Add event listeners
    addButton.addEventListener("click", function () {
      // Set the item parameter for the add command
      addCommand.item = itemInput.value;
      // Set and execute the add command
      listInvoker.setCommand(addCommand);
      listInvoker.executeCommand();
      // Update the UI
      updateList();
      // Clear the input field
      itemInput.value = "";
    });
    deleteButton.addEventListener("click", function () {
      // Set and execute the delete command
      listInvoker.setCommand(deleteCommand);
      listInvoker.executeCommand();
      // Update the UI
      updateList();
    });
    undoButton.addEventListener("click", function () {
      // Undo the last command
      listInvoker.undoCommand();
      // Update the UI
      updateList();
    });
    redoButton.addEventListener("click", function () {
      // Redo the last command
      listInvoker.redoCommand();
      // Update the UI
      updateList();
    });
    // Update the UI with the list items
    function updateList() {
      // Clear the list element
      listElement.innerHTML = "";
      // Get the list items from the receiver object
      let items = list.getItems();
      // Loop through the items and create list items
      for (let item of items) {
        let li = document.createElement("li");
        li.textContent = item;
        listElement.appendChild(li);
      }
    }
  </script>
</body>
</html>

添加您的观点

6 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?

添加您的观点

Shivendra Saurav

Staff Consultant @ Oracle FSS | UI/UX Developer | MERN, FRAPPE Stack Developer | CSS Expert | Tech Enthusiast
举报内容
(1/2) The first thing I thought when reading the article was, why not use a list? There is no real performance advantage of using two stacks. Infact, it takes more initial memory than a list. And I came up with a simple implementation as well, take a look: cmdList = [], index=0 onExec - execute command, push into cmdList, index++, splice(cmdList, 0, thisIndex) //to reset all redo states if any onUndo - (if index>0) index--, execute command onRedo - (if index<len(cmdList)) index++, execute command On paper this looks good, but there are two issues with this approach. 1. Managing list indices can be tricky for new developers 2. splice() has a time complexity of O(n) which is higher than just resetting the redo stack with an empty stack O(1)

已翻译

赞
Shivendra Saurav

Staff Consultant @ Oracle FSS | UI/UX Developer | MERN, FRAPPE Stack Developer | CSS Expert | Tech Enthusiast
举报内容
(2/2) But, a list has some advantages as well like 1. A history feature can be implemented and let users undo/redo to any of the previous/future states without any overheads 2. The state of the app remains consistent across undo/redo operations, as the state is determined by the position of index in cmdList 3. Performance wise, a list implementation will potentially use less memory and use list operations which usually are faster than stack operations This highlights that there's more than one way to solve a problem. And, I came up with the history feature while writing this post which I might not have considered if I just let stacks be the status quo. So consider different approaches, their pros and cons, and use one most suitable for you

已翻译

赞

Web Applications

+ 关注

给文章评分

我们借助人工智能创建了此文章。您认为这篇文章怎么样？

很棒不太好

举报此文章

查看全部

How can you implement undo and redo functionality with the Command pattern in your web app?

1

2

3

4

5

6

1 What is the Command pattern?

2 How to create a command object?

3 How to create an invoker object?

4 How to create a receiver object?

5 How to use the Command pattern in a web app?

6 Here’s what else to consider

Web Applications

给文章评分

感谢您的反馈

更多Web Applications相关文章

更多相关阅读内容

How can you implement undo and redo functionality with the Command pattern in your web app?

1

2

3

4

5

6

1 What is the Command pattern?

2 How to create a command object?

3 How to create an invoker object?

4 How to create a receiver object?

5 How to use the Command pattern in a web app?

6 Here’s what else to consider

Web Applications

给文章评分

感谢您的反馈

查看其他技能