Для своего четвертого проекта я разработал приложение Калькулятор с использованием Vue.js. Это был ценный опыт понимания того, как обрабатывать вводимые пользователем данные, отображать динамические результаты и выполнять вычисления с помощью JavaScript. Вот краткий обзор основных уроков, которые я извлек при создании этого приложения.

1. Обработка пользовательского ввода и обновление дисплея

Калькулятор должен принимать вводимые пользователем данные (числа и операторы) и динамически обновлять отображение. Я использовал реактивные свойства Vue, чтобы отслеживать текущий ввод и результат. Функция ref во Vue упростила сохранение и изменение этих значений:

const result = ref('');
const calculated = ref(false);

Каждый раз, когда пользователь нажимает на число или оператор, свойство результата обновляется, гарантируя, что на дисплее отображаются самые последние введенные данные. Функция handleClick используется для добавления значений к результату:

const handleClick = (value) => {
    if (calculated.value) {
        result.value = value; // Reset the result if a calculation was just completed
        calculated.value = false;
    } else {
        result.value  = value;
    }
}

Это был важный урок по обработке взаимодействия с пользователем и обновлению интерфейса на основе реактивных свойств.

2. Управление операторами: избежание избыточного ввода

Одной из ключевых проблем при создании калькулятора является обеспечение того, чтобы несколько операторов не добавлялись последовательно (например, избегая ввода типа 3 4). Чтобы решить эту проблему, я добавил проверку на замену оператора, если последний символ уже является оператором:

const handleOperatorClick = (operator) => {
    if (/[ */-]$/.test(result.value)) {
        result.value = result.value.slice(0, -1)   operator; // Replace the last operator
    } else {
        result.value  = operator; // Add the new operator
    }
    calculated.value = false; // Reset flag
};

Этот метод гарантирует, что в конце входной строки присутствует только один оператор, что повышает надежность калькулятора.

3. Очистка и удаление введенных данных

Калькулятор должен иметь функцию очистки всех введенных данных (с помощью кнопки AC) или удаления последнего введенного символа (с помощью кнопки DEL). Я реализовал эти два действия с помощью методовclearAll иclear:

• Очистить все (AC): Сбрасывает весь ввод.

const clearAll = () => {
    result.value = '';
    calculated.value = false;
};

• Удалить последний символ (DEL): удаляет последний символ входной строки.

const clear = () => {
    if (result.value && result.value.length > 0) {
        result.value = result.value.slice(0, -1); // Remove the last character
        if (result.value.length === 0) {
            clearAll(); // If the input is empty, reset everything
        }
    } else {
        clearAll();
    }
};

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

4. Выполнение вычислений

Одной из основных функций калькулятора является вычисление выражений, введенных пользователем. Я использовал встроенную функцию eval() JavaScript для вычисления результата входного выражения:

const calculate = () => {
    let stringifiedResult = new String(result.value);
    result.value = eval(String(stringifiedResult)); // Evaluate the expression
    calculated.value = true; // Set flag to indicate the calculation is done
};

Хотя функция eval() проста и эффективна для этого базового калькулятора, я узнал о потенциальных рисках безопасности, которые она представляет при обработке произвольного пользовательского ввода. В будущих проектах я, возможно, рассмотрю возможность написания собственного синтаксического анализатора для повышения безопасности и гибкости.

5. Пользовательский интерфейс с Vue и Bootstrap

Для создания интерфейса калькулятора я использовал Bootstrap для быстрого и адаптивного дизайна. Кнопки расположены в виде сетки с соответствующей цветовой кодировкой цифр и операторов:

    
7
    
8
    
9
    
-

Я научился сочетать обработку событий Vue с классами Bootstrap, чтобы создать визуально привлекательный и адаптивный интерфейс калькулятора.

6. Обработка крайних случаев и улучшение UX

При создании калькулятора я столкнулся с несколькими крайними случаями. Например, если после выполнения расчета пользователь вводит новое число, калькулятору необходимо сбросить предыдущий результат. Это было решено путем проверки вычисляемого флага:

if (calculated.value) {
    result.value = value; // Replace the result with the new value
    calculated.value = false; // Reset the calculated flag
}

Другой полезной функцией стало форматирование дисплея, чтобы сделать его более интуитивно понятным, например автоматическая замена последнего оператора, если пользователь передумал, что улучшило пользовательский опыт.

Заключительные мысли: что я получил от создания калькулятора

Этот проект позволил глубоко погрузиться в обработку динамического ввода, управление состоянием и создание понятного пользовательского интерфейса с использованием Vue.js. Я получил практические знания в следующих областях:

• Управление состоянием: как динамически отслеживать и обновлять вводимые пользователем данные и результаты.
• Обработка событий: реагирование на действия пользователя (количество кликов, кликов оператора и расчет результатов).
• Аспекты пользовательского интерфейса и пользовательского интерфейса: обеспечение того, чтобы калькулятор корректно обрабатывал крайние случаи и обеспечивал понятный и интуитивно понятный пользовательский интерфейс.
• Манипулирование строками: анализ входных строк и манипулирование ими для создания допустимых математических выражений.

Создание этого калькулятора стало полезным опытом, который укрепил мои способности управлять пользовательским вводом и создавать динамические интерактивные веб-приложения с использованием Vue.js. С нетерпением ждем возможности применить эти навыки в более сложных проектах!