Question

我有一个服务器生成的数组，最多可以返回六个数组项。这些数组项目是“类别”，基于类别，它们将显示不同的图像（可以从每个类别中选择八个自定义图像，但这发生在幕后）。因此，每个类别只建立一个图像。但是，也可以上传“自定义”图像，如果存在则优先。所以实际上，服务器将返回每个类别一个或两个图像。最重要的是，用户可以分为多个类别，因此我需要根据类别添加优先级，以便一个覆盖另一个，我正在试图找出如何有效地处理这个问题并努力解决。特别是在优先领域;我应该在数组中添加另一个命名空间来指定优先级并根据最低值指定吗？比较数组值和返回结果的最有效方法是什么？

编辑：通过高效，我的意思是，可扩展和可维护，不一定是高性能。

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 !== '') {
        	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);
});

基于动态数组显示图像

1 个答案: