동적 배열을 기반으로 이미지 표시

Question

서버 생성 배열이있어 최대 6 개의 배열 항목을 반환 할 수 있습니다. 이 배열 항목은 범주를 기반으로하는 "범주"이며, 다른 이미지를 표시합니다 (범주마다 선택할 수있는 8 개의 사용자 지정 이미지가 있지만 장면 뒤에서 발생합니다). 카테고리 당 하나의 이미지 만 설정됩니다. 그러나 업로드 된 "사용자 정의"이미지가있을 수도 있습니다 (있는 경우). 따라서 실제로 서버는 카테고리 당 하나 또는 두 개의 이미지를 반환합니다. 게다가 사용자는 여러 범주로 분류 될 수 있으므로 범주를 기반으로하는 우선 순위 수준을 추가해야 하나가 다른 범주보다 우선 적용되므로 효율적으로 처리하고 문제를 해결하는 방법을 파악하려고합니다. 특히 우선 순위 영역; 배열에 다른 네임 스페이스를 추가하여 우선 순위 수준을 지정하고 최저 값을 기준으로 지정해야합니까? 배열 값을 비교하고 결과를 반환하는 가장 효율적인 방법은 무엇입니까?

편집 : 효율적으로 말하면, 확장 가능하고 유지 보수 가능하며 반드시 수행 할 필요는 없습니다.

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); 
});