Блог

Главная - Вопросы по программированию - Лучший способ разбить функцию — JavaScript

Лучший способ разбить функцию — JavaScript

#javascript #function #shopping-cart

#javascript #функция #корзина покупок

Вопрос:

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

 function updateModal() {
let cartProducts = sessionStorage.getItem("foodInCart");
cartProducts = JSON.parse(cartProducts);
let totalPriceValue = 0
totalPriceValue = sessionStorage.getItem("totalPrice")
let cartModalProduct = document.querySelector('.product');
let cartModalPrice = document.querySelector('.price');
let cartModalQuantity = document.querySelector('.quantity');
let cartModalTotalPrice = document.querySelector('.total-price')
if (cartProducts !== null) {
    cartModalProduct.innerHTML = '';
    Object.values(cartProducts).map(food => {
        let productName = `<div class="productName">${food.name}</div>`
        cartModalProduct.innerHTML = productName;

        let productPrice = `<div class="productPrice">${food.price}</div>`
        cartModalPrice.innerHTML = productPrice;

        let productQuantity = `<div class="productQuantity">${food.inCart}</div>`
        cartModalQuantity.innerHTML = productQuantity;

        let totalPrice = `<div class="totalPrice">${totalPriceValue}</div>`
        cartModalTotalPrice.innerHTML = totalPrice
    });
}

}

мой полный js-код здесь = https://jsfiddle.net/Birrellc/3w0shaom /

Спасибо

Комментарии:

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

2. используйте шаблон раскрывающего модуля, который обрабатывает корзину от выборки до рендеринга, или откажитесь от ванили и используйте vue или react.. набор глобальных функций — это не тот путь

Ответ №1:

Пара быстрых вещей:

  1. Переместите подготовку данных в другую функцию.

  2. Возвращает false, если нет данных для предварительной обработки, чтобы избежать вложенных функций.

  3. Используйте упрощенные переменные и свойства объекта.

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

     const getCartData = () => ({
    products: JSON.parse(sessionStorage.getItem("foodInCart")),
    priceValue: sessionStorage.getItem("totalPrice") || 0,
    product: document.querySelector('.product'),
    price: document.querySelector('.price'),
    quantity: document.querySelector('.quantity'),
    totalPrice: document.querySelector('.total-price')
})


function updateModal() {
    let cart = getCartData()
    if (cart.products == null) { return false }
    cart.product.innerHTML = '';
    Object.values(cart.products).map(food => {
        cart.product.innerHTML = `<div class="productName">${food.name}</div>`;
        cart.price.innerHTML = `<div class="productPrice">${food.price}</div>`;
        cart.quantity.innerHTML = `<div class="productQuantity">${food.inCart}</div>`;
        cart.price.innerHTML = `<div class="totalPrice">${cart.totalPrice}</div>`
    });
}

Я раздвоил вашу скрипку с изменениями https://jsfiddle.net/zhy5n8ga /