Javascript DOM 最佳实践

Question

 if (index === 0) {
      const image = document.createElement('img');
      image.alt = 'image';
      image.src = 'https://media.s-bom.com';
      image.width = '100';
      li.appendChild(image);
    }
    if (index === 1) {
      const image = document.createElement('img');
      image.alt = 'image';
      image.src =
        'https://images-na.ssl-images-amazon.com';
      image.width = '100';
      li.appendChild(image);
    }
    if (index === 2) {
      const image = document.createElement('img');
      image.alt = 'image';
      image.src =
        'https://upload.wikimedia.orgmmer.jpg/220px-The_pragmatic_programmer.jpg';
      image.width = '100';
      li.appendChild(image);
    }

嘿，我在 if 条件下有上面的代码，我希望它更清晰而不是重复，所以任何人都知道如何更干净。

Answer 1

如果唯一将图像区分开来的是图像的路径，我会将所有这些添加到一个数组中，然后使用索引查找它们。

let imageSources = ['https://media.s-bom.com', 'https://images-na.ssl-images-amazon.com', 'https://upload.wikimedia.orgmmer.jpg/220px-The_pragmatic_programmer.jpg'];

const image = document.createElement('img');
image.alt = 'image';
image.src = imageSources[index];
image.width = '100';
li.appendChild(image);