ダイナミックアレイに基づく画像の表示

Question

私はサーバーで生成された配列を持っています。これは、最大6つの配列アイテムを返すことができます。これらの配列アイテムはカテゴリに基づいて「カテゴリ」であり、異なるイメージを表示します（カテゴリごとに選択できる8つのカスタムイメージがありますが、これは裏で起こります）。カテゴリーごとに1つのイメージしか確立されていません。しかし、アップロードされた「カスタム」画像も存在する可能性があります（存在する場合）。実際には、サーバーはカテゴリーごとに1つまたは2つのイメージを返します。その上、ユーザは複数のカテゴリに分類することができるので、カテゴリに基づいてプライオリティレベルを追加する必要があります。したがって、これを効率的に処理して苦労する方法を理解しようとしています。特に優先分野では、配列に別の名前空間を追加して優先順位を指定し、最低値に基づいて指定する必要がありますか？配列の値を比較して結果を返す最も効率的な方法は何ですか？

編集：効率的であれば、スケーラビリティとメンテナンス性があり、必ずしもパフォーマンスが良いとは限りません。

console.clear(); 
 
// banner element 
 
var banner = document.getElementById('banner'); 
 
// 3s timout 
 
window.setTimeout(function() { 
 
    // add class (class handles fade transition) 
 
    banner.classList.add('fade-in'); 
 
}, 3000); 
 

 
// Array generated from "Architecture Priorities" field, not all will display, but more than one can. 
 
var arc = [ 
 
    'Collaboration', 
 
    'Data Center',/* 
 
    'Enterprise Networks', 
 
    'Security', 
 
    'Services',*/ 
 
    'Cross Architecture' 
 
    ], 
 
    
 
    // manual array and image defaults (will need to utilize zval() for "path") 
 
    img = [{ 
 
    name: 'Collaboration', 
 
    path: '//placehold.it/1200x400/fa4/fff', // value returned from server based on user input. 
 
    customPath: '' // value returned from server based on user input 
 
    }, { 
 
    name: 'Data Center', 
 
    path: '//placehold.it/1200x400/4af/fff', 
 
    customPath: '' 
 
    }, { 
 
    name: 'Enterprise Networks', 
 
    path: '//placehold.it/1200x400/af4/fff', 
 
    customPath: '' 
 
    }, { 
 
    name: 'Security', 
 
    path: '//placehold.it/1200x400/4fa/fff', 
 
    customPath: '' 
 
    }, { 
 
    name: 'Services', 
 
    path: '//placehold.it/1200x400/f4a/fff', 
 
    customPath: '' 
 
    }, { 
 
    name: 'Cross Architecture', 
 
    path: '//placehold.it/1200x400/a4f/fff', 
 
    customPath: '//placehold.it/1200x400/222/fff?text=custom' 
 
    }]; 
 

 
for (var prop in img) { 
 
    if (img.hasOwnProperty(prop)) { 
 
    for(var i = 0; i < arc.length; i++) { 
 
     if(img[prop].name === arc[i]){ 
 
     if (img[prop].customPath !== '') { 
 
     \t banner.setAttribute('src', img[prop].customPath); 
 
     } else { 
 
      banner.setAttribute('src', img[prop].path); 
 
     } 
 
     } 
 
    } 
 
    } 
 
}

.banner-wrapper { 
 
    max-width: 1200px; 
 
    background: transparent url('//placehold.it/1200x400/222/fff') no-repeat center center/cover; 
 
} 
 

 
img { 
 
    vertical-align: baseline; 
 
    display: block; 
 
    max-width: 100%; 
 
    height: auto; 
 
    opacity: 0; 
 
    transition: opacity 2s; 
 
    transform: translate3d(0, 0, 0); 
 
    backface-visibility: hidden; 
 
} 
 

 
img.fade-in { 
 
    opacity: 1; 
 
}

<div class="banner-wrapper"> 
 
    <img src="//placehold.it/1200x400/fff/222" width="1200" height="400" id="banner"> 
 
</div>

Answer 1

私はそれをしようとするだろう。 あなたのimgコレクションに優先キーを追加してから、imgを最高の優先順位で取得します。

var arc = [ 
    "Collaboration", 
    "Data Center" /* 
    'Enterprise Networks', 
    'Security', 
    'Services',*/, 
    "Cross Architecture" 
]; 
var imgs = [ 
    { 
    name: "Collaboration", 
    path: "//placehold.it/1200x400/fa4/fff", // value returned from server based on user input. 
    customPath: "", // value returned from server based on user input, 
    priority: 0 
    }, 
    { 
    name: "Data Center", 
    path: "//placehold.it/1200x400/4af/fff", 
    customPath: "", 
    priority: 1 
    }, 
    { 
    name: "Enterprise Networks", 
    path: "//placehold.it/1200x400/af4/fff", 
    customPath: "", 
    priority: 0 
    }, 
    { 
    name: "Security", 
    path: "//placehold.it/1200x400/4fa/fff", 
    customPath: "", 
    priority: 1 
    }, 
    { 
    name: "Services", 
    path: "//placehold.it/1200x400/f4a/fff", 
    customPath: "", 
    priority: 1 
    }, 
    { 
    name: "Cross Architecture", 
    path: "//placehold.it/1200x400/a4f/fff", 
    customPath: "//placehold.it/1200x400/222/fff?text=custom", 
    priority: 0 
    }, 
    { 
    name: "Collaboration", 
    path: "//placehold.it/1200x400/fa4/fff", // value returned from server based on user input. 
    customPath: "", // value returned from server based on user input, 
    priority: 1 
    }, 
    { 
    name: "Data Center", 
    path: "//placehold.it/1200x400/4af/fff", 
    customPath: "", 
    priority: 0 
    }, 
    { 
    name: "Enterprise Networks", 
    path: "//placehold.it/1200x400/af4/fff", 
    customPath: "", 
    priority: 1 
    }, 
    { 
    name: "Security", 
    path: "//placehold.it/1200x400/4fa/fff", 
    customPath: "", 
    priority: 0 
    }, 
    { 
    name: "Services", 
    path: "//placehold.it/1200x400/f4a/fff", 
    customPath: "", 
    priority: 0 
    }, 
    { 
    name: "Cross Architecture", 
    path: "//placehold.it/1200x400/a4f/fff", 
    customPath: "//placehold.it/1200x400/222/fff?text=custom", 
    priority: 1 
    } 
]; 
var priotiziredImgs = {}; 
imgs.forEach(img => { 
    if (arc.indexOf(img.name) > -1) { 
    let name = img.name; 
    if (priotiziredImgs[name]) { 
     priotiziredImgs[name] = 
     img.priority > priotiziredImgs[name].priority 
      ? img 
      : priotiziredImgs[name]; 
    } else { 
     priotiziredImgs[name] = img; 
    } 
    } 
}); 

これにより、特定のカテゴリの画像の優先度が最も高くなります。そして、あなたは ループを再度実行して、それらをdomに追加することができます。

Object.keys(priotiziredImgs).forEach(name => { 
    let src = priotiziredImgs[name].customPath.length 
    ? priotiziredImgs[name].customPath 
    : priotiziredImgs[name].path; 
    banner.setAttribute("src", src); 
});