如何在我的计算器中存储结果并查看以前的计算？

Question

我正在尝试创建一个计算器来存储我的结果以查看以前的计算。我正在努力学习并获得一份实习生职位。任何帮助将不胜感激！计算器目前工作正常，我的想法是要么有一个单独的部分来记录历史记录，要么修改计算器的顶行以显示以前的计算。我一直在学习 youtube 教程，这就是我努力添加其他内容的原因。

class Calculator {
constructor(previousOperandTextElement, currentOperandTextElement) {
    this.previousOperandTextElement = previousOperandTextElement;
    this.currentOperandTextElement = currentOperandTextElement;
    this.clear();
}

//clear all, default to empty string
clear() {
    this.currentOperand = '';
    this.previousOperand = '';
    this.operation = undefined;
}

//delete single number using slice method
delete() { 
    this.currentOperand = this.currentOperand.toString().slice(0,-1);
}

//add number and only allow a single period
appendNumber(number) {
    if (number === '.' && this.currentOperand.includes('.')) return;
    this.currentOperand = this.currentOperand.toString() + number.toString();
}

//if operand is empty return
//sum is carried out if you have 2 operands and placed in previous operand  
//changes operand from current to previous
chooseOperation(operation) {
    if (this.currentOperand === '') return;
    if (this.previousOperand !== '') {
        this.compute();
    }
    this.operation = operation;
    this.previousOperand = this.currentOperand;
    this.currentOperand = '';
}

//calculate 
//dont compute if previous or current operand is empty
//switch statement for which operation is selected
compute() {
    let computation;
    const prev = parseFloat(this.previousOperand);
    const current = parseFloat(this.currentOperand);
    if (isNaN(prev) || isNaN(current)) return;
    switch(this.operation) {
        case '+':
            computation = prev + current;
            break;
        case '-':
            computation = prev - current;
            break;
         case '*':
            computation = prev * current;
            break;
        case '÷':
            computation = prev / current;
            break;
        default:
            return;
    }
    this.currentOperand = computation;
    this.operation = undefined;
    this.previous = '';
}

//update display and handles 
//if operation is not null then show previous operand and operation
//remove previous operand when calculated
updateDisplay() {
    this.currentOperandTextElement.innerText = this.currentOperand;    
    if (this.operation != null) {
        this.previousOperandTextElement.innerText = 
            `${this.previousOperand} ${this.operation}`;
    } else {
        this.previousOperandTextElement.innerText = '';
    }

}
}

//variables
const numberButtons = document.querySelectorAll('[data-number]')
const operationButtons = document.querySelectorAll('[data-operation]')
const equalsButton = document.querySelector('[data-equals]')
const deleteButton = document.querySelector('[data-delete]')
const previousButton = document.querySelector('[data-previous]')
const allClearButton = document.querySelector('[data-all-clear]')
const previousOperandTextElement = document.querySelector('[data-previous-        operand]')
const currentOperandTextElement = document.querySelector('[data-current-   operand]')

//create a new class and pass everything into it
const calculator = new Calculator(previousOperandTextElement,     currentOperandTextElement);

//Loop over all buttons and add event listener
numberButtons.forEach(button => {
button.addEventListener('click', () => {
    calculator.appendNumber(button.innerText);
    calculator.updateDisplay();
})
})

//Loop over operation buttons and add event listener
operationButtons.forEach(button => {
button.addEventListener('click', () => {
    calculator.chooseOperation(button.innerText);
    calculator.updateDisplay();
})
})

//equals button
equalsButton.addEventListener('click', button => {
calculator.compute();
calculator.updateDisplay();
})

//clear button
allClearButton.addEventListener('click', button => {
calculator.clear();
calculator.updateDisplay();
})


//delete button
deleteButton.addEventListener('click', button => {
calculator.delete();
calculator.updateDisplay();
})

//previous button
previousButton.addEventListener('click', button => {

calculator.updateDisplay();
})

Answer 1

您可以使用 memento 设计模式来保存操作日志并允许您撤消操作：https://www.dofactory.com/javascript/memento-design-pattern。您可以在此处找到适用于计算器的示例：https://dev.to/shikaan/design-patterns-in-web-development---2-memento-253j，以便您调整代码。

您也可以使用结合命令存储的命令模式来记录操作：https://www.dofactory.com/javascript/command-design-pattern