Как написать калькулятор используя обьектно-ориентированную парадигму программирования?

Question

[kiberlain]

Наваял калькулятор, кнопочки нажимаются, результат выводится.

const calculator = document.getElementById('calculator');
    const nums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
    const operations = ['=', '+', '-', '*', '/'];

const generateHTML = () => {
  const digits = nums.map(n => `<button class="number" value="${n}">${n}</button>`)
  const ops = operations.map(op => `<button class="action" value="${op}">${op}</button>`)

  const html = digits.concat(ops)

  html.push('<input type="text" value="0" id="output">');

  calculator.innerHTML = html.join('')
};

let tempValue, newValue, action
    const calc = (value) => {
        const output = document.getElementById('output')
        switch (value) {
            case '+':
                action = '+'
                tempValue = newValue
                newValue = 0
                output.value = '0'
                console.log(tempValue + '_' + action + '_' + newValue)
                break

            case '-':
                action = '-'
                tempValue = newValue
                newValue = 0
                output.value = '0'
                console.log(tempValue + '_' + action + '_' + newValue)
                break
            case '*':
                action = '*'
                tempValue = newValue
                newValue = 0
                output.value = '0'
                console.log(tempValue + '_' + action + '_' + newValue)
                break
            case '/':
                action = '/'
                tempValue = newValue
                newValue = 0
                output.value = '0'
                console.log(tempValue + '_' + action + '_' + newValue)
                break
            case '=':
                tempValue = parseFloat(tempValue)
                newValue = parseFloat(newValue)
                console.log(tempValue + '_' + action + '_' + newValue)
                switch (action) {
                    case '+':
                        output.value = tempValue + newValue
                        break
                    case '-':
                        output.value = tempValue - newValue
                        break
                    case '*':
                        output.value = tempValue * newValue
                        break
                    case '/':
                        output.value = tempValue / newValue
                        break
                }
                break

            default:
                output.value += value
                newValue = output.value
                console.log(tempValue + '_' + action + '_' + newValue)
        }
    }


    const display = () => {
        document.querySelectorAll('button').forEach(button => {
            button.addEventListener('click', function(event) {
                calc(event.target.value)
            })
        });
    }

    const init = () => {
        generateHTML();
        display();
    }

    init();

вопрос к профессионалам, как это переписать на ООП? Какие классы и методы должны быть?
Класс калькулятор? Класс кнопочка? Класс Вычисление?

Comments

[good_beginer]

вместо const - функции, вместо init- constructor и всё в какой то class Caliculeator

[Василий Банников]

good_beginer, ну и ещё по-хорошему вынести операторы в отдельные классы или функции

Answer 1

[12rbah]

Я бы посоветовал вам использовать ООП для тех задач, в которых оно нужно, хотя конечно всегда можно натягивать сову на глобус.
Вот популярный калькулятор для js.
https://github.com/WebDevSimplified/Vanilla-JavaSc...

Answer 2

[acwartz]

Напиши класс Expression который будет иметь методы:
Add(value) - добавить value значение к выражению
Substract(value) - отнять value от значения выражения
Divide(value) - разделить значение у выражения на число value
Multiply(value) - умножить значение выражения на число value
Result: Float - свойство, возвращающее итог внутри котрого происходит проверка что выражение корректно.

Сам класс имеет внутренне поле currentValue с которым и производит операции.
Каждый метод класса выполняет операцию над currentValue и в качестве результата возвращает сам себя.

т.е. код калькулятора будет простым:

let calc: Calculator = new Calculator(0); //значение currentValue по умолчанию
let result: number = calc
.Add(1) //0+1 = 1
.Substract(5) //1 - -5 = -4
.Multiply(4) //-4 * 4 = -16
.Result; //-16
alert(result);

можно добавить туда скобки:
OpenBrackets: Expression
CloseBrackets: Expression
Другие мат. операции и прочее.

в UI же классу передать callback'функцию когда изменяется выражение, когда ошибка и т.д.

Answer 3

[Dmtm]

>Класс калькулятор? Класс кнопочка? Класс Вычисление?
ООП это не про классы, ООП это про абстракции
сегодня мы складываем числа, а завтра понадобятся векторы или множества,
числа тоже бывают разные - дискретные, комплексные, римские, шумерские, ...
или вообще котики из пространства котиков с заданной алгеброй
хорошее ОО решение позволяет любую реализацию в рамках заданной системы абстракций