Как сократить условие IF в списке динамиков c? - PullRequest
Новая
       4

Как сократить условие IF в списке динамиков c?

1 голос
/ 01 августа 2020

В будущем у меня будет много if условие , есть ли идея сократить условие if для (Render Badge items)?

Сегодня у меня только 4 элемента, если в будущем у меня будет 20 или, может быть, 100 элементов, мне нужно кодировать if 20 или 100 раз?

Я пробовал много методов, но не знаю, как это сделать.

Визуализация Dynami c Список 

const medals = productItem.goldmedal || productItem.newitem || productItem.freedelivery;
        if (medals) {
            const iconBadge = $("<ul>", { class: 'icons' });
            function createMedal(src, text) {
                const badge =
                    $("<li>", { class: 'icon' })
                        .append($('<a>', { class: 'tpsTooltip skeleton_hide', href: '###', 'data-tippy-content': text })
                            .append($('<img>', { src: src, alt: text })))
                        .append($('<div>', { class: 'pl-placeholder_skeleton pl-placeholder_liIcon' }));
                iconBadge.append(badge);
            }
            createFeatureIcon.append(iconBadge);

            //Render Badge items (Below is the if condition code)
            if (productItem.goldmedal) {
                createMedal(plSettings.goldMetalSrc, plSettings.goldMetalText)
            }
            if (productItem.newitem) {
                createMedal(plSettings.newItemSrc, plSettings.newItemText)
            }
            if (productItem.newshop) {
                createMedal(plSettings.newShopSrc, plSettings.newShopText)
            }
            if (productItem.freedelivery) {
                createMedal(plSettings.freeDeliverySrc, plSettings.freeDeliveryText)
            }
        }

Настройки 

//Settings
var plSettings = $.extend({
    mainClass: 'item-wrapper',
    itemWrapperClass: 'item ripple-effect ripple-joya itemShadowLight',

    goldMetalSrc: '/img/tps/gold.png',
    goldMetalText: 'Gold Medal sellers stand out from millions of sellers, bringing more trust and peace of mind to your shopping experience',

    newItemSrc: '/img/tps/new.png',
    newItemText: 'New item',

    sellermedalSrc: '/img/tps/seller.png',
    sellermedalText: 'Top Seller',
       
    newShopSrc: '/img/tps/newshop.png',
    newShopText: 'New Shop In Joyacart',

    freeDeliverySrc: '/img/tps/freedelivery.png',
    freeDeliveryText: 'Free Delivery'
});

пример данных ниже: 

var data = {
    productList: [
        {
            id: "62276197-6059-4c21-9b40-c5b1d277e85d",
            link: "javascript:void(0)",
            imgurl: "/img/upload/png/joyacart_000001_12032019.png",
            text: 'Product 001',
            goldmedal: false,
            newitem: true,
            newshop: true,
            freedelivery: true
        },
        {
            id: "59de8216-052d-4e51-9f7d-7e96642ded62",
            link: "javascript:void(0)",
            imgurl: "/img/upload/png/joyacart_000002_12032019.png",
            text: 'Product 002',
            goldmedal: true,
            newitem: false,
            newshop: true,
            freedelivery: true
        }]
}

1 Ответ

1 голос
/ 01 августа 2020

Итак, у вас есть товарный элемент, который выглядит следующим образом (я полагаю, вы не можете это изменить): 

{
  id: "62276197-6059-4c21-9b40-c5b1d277e85d",
  link: "javascript:void(0)",
  imgurl: "/img/upload/png/joyacart_000001_12032019.png",
  text: 'Product 001',
  goldmedal: false,
  newitem: true,
  newshop: true,
  freedelivery: true
},

Давайте создадим массив ключей из этого объекта, которые сообщают вам, следует ли вам показывать медаль за это: 

const medalItems = ['goldmedal', 'newitem', 'newshop', 'freedelivery'];

Теперь вместо нескольких операторов if вы можете перебирать эти ключи и вызывать createMedal для всех тех, которые истинны в productItem. Передавая этот ключ медали (например, «goldmedal» или «freedelivery») в createMedal function 

for (const medal of medalItems) {
  if(productItem[medal]) {
    createMedal(medal);
  }
}

Теперь в createMedal вы можете получить sr c и текст на основе этого ключа медали, но вы: Вам нужно будет соответствующим образом отрегулировать настройки (например, sr c для goldmedal должно быть меньше plSettings.goldmedalSrc) 

function createMedal(medal) {
  const src = plSettings[medal + "Src"];
  const text = plSettings[medal + "Text"];
  ...
}

Не идеально, потому что вам нужно синхронизировать plSettings c с productItems но он должен работать с вашими текущими структурами данных. И все, что вам нужно сделать, чтобы новый заработал, - это добавить его в настройки и массив medalItems

...