Как бы вы упростили эту функцию?

24 февраля 2022, 14:20

Как бы вы упростили эту функцию?
Функции передается массив items, получаемый с сервера (сугубо для вставки текста на кириллице, кириллицу внутри js стараюсь не харкодить).
Кроме того, внутри функции происходит запрос к конструктору shop.viewCart для получения товаров корзины из LS.

function displayCart(items) {
    let arr = shop.viewCart();
    let cart = '<div class="cart">';
        cart += '<span class="cart_close_btn"></span>';
        cart += '<h2>'+items.names.your_cart+':</h2>';
        cart += '<div class="cart_content">';
        for(let i in arr) {
            cart += '<div class="cart_item" data-id='+arr[i].id+'>';
                cart += '<div>';
                    cart += '<img src="'+arr[i].img+'">';
                cart += '</div>';
                cart += '<div>';
                    cart += '<div class="cart_item_info">';
                        cart += '<div class="cart_item_title">' + arr[i].name + '</div>';
                        cart += '<div class="cart_item_size">Размер: XL</div>';
                        cart += '<div class="cart_item_price">' + numWithSpace(arr[i].price) + ' p.</div>';
                    cart += '</div>';
                cart += '</div>';
                cart += '<div>';
                    cart += '<div class="up_down_cart">';
                        cart += '<i class="down_cart">&#8722;</i>';
                        cart += '<span class="item_count">' + arr[i].count + '</span>';
                        cart += '<i class="up_cart">+</i>';
                    cart += '</div>';
                cart += '</div>';
                cart += '<div>';
                    cart += '<div class="item_total">' + numWithSpace(arr[i].total) + ' p.</div>';
                cart += '</div>';
                cart += '<div>';
                    cart += '<i class="remove_cart">&#215;</i>';
                cart += '</div>';
            cart +=  '</div>';
        }
        cart += '</div>'
        cart += '<div class="cart-footer">'
            cart += '<h3>'+items.names.cart_total+': <span class="cart_total">0</span> '+items.names.price_name+'</h3>'
            cart += '<button class="clear_cart">'+items.names.clear_cart+'</button>'
        cart += '</div>'
    cart += '</div>'
    return cart;
}

Answer 1

Первое что можно сделать - разбить на более мелкие части, из которых собирается разметка, для удобства можно вынести их в функцию:

function displayCart(items) {
    let arr = shop.viewCart();
    return `<div class="cart">
                ${cartHeader(items.names.your_cart)}
                ${cartContent(arr)}
                ${cartFooter(items.names)}
            </div>`;
}

Сразу стало видно из каких частей состоит карточка. Далее можно переходить к реализации конкретных функций, например header и footer

function cartHeader(header){
    return `<span class="cart_close_btn"></span><h2>${header}:</h2>`;
}

function cartFooter(names){
    return `<div class="cart-footer">
                <h3>${names.cart_total}: <span class="cart_total">0</span> ${names.price_name}</h3>
                <button class="clear_cart">${names.clear_cart}</button>
            </div>`;
}

Для вставки значений переменных в строки использовались Шаблонные строки

Далее можно переходить к содержимому карточки. Так как разметка довольно сложная можно разбить ее на мелкие кусочки. Вместо цикла, удобно воспользоваться последовательностью вызовов map, join

function cartContent(carts){
    return `<div class="cart_content">
                ${carts.map(function(cart){
                    return contentAva(cart) + 
                           contentInfo(cart) +
                           contentControls(cart) +
                           contentTotal(cart) +
                           contentRemove(cart)
                }).join('')}
            </div>`
}

Далее функции реализуются по аналогии.