JavaScript函数编写优化：如何用年份参数统一展示选举地图

改成用对象映射统一管理不同年份的图片信息，再写一个接收年份参数的通用函数，就能解决重复代码问题，后续维护也更方便。

1. 用对象存储年份与图片的对应关系 #

把原来分散的图片变量整合到一个对象里，键为年份，值为包含图片路径、宽高的配置：

// 年份-图片信息映射表，新增年份直接加键值对即可
const electionImages = {
  2020: { src: '270towin.png', width: 600, height: 300 },
  2016: { src: '201019164452-2016-election-map.jpg', width: 600, height: 300 }
};

2. 编写通用展示函数 #

写一个接收year参数的函数，从映射表中取对应图片信息，生成HTML插入目标元素：

function showElectionMap(year) {
  const demoEl = document.getElementById('demo');
  // 检查当前年份是否有对应的图片配置
  const imageInfo = electionImages[year];
  
  if (!imageInfo) {
    demoEl.innerHTML = '<p>暂无该年份的选举地图</p>';
    return;
  }
  
  // 用模板字符串生成符合规范的img标签
  const imgHtml = `<img src="${imageInfo.src}" width="${imageInfo.width}" height="${imageInfo.height}">`;
  demoEl.innerHTML = imgHtml;
}

3. 调用方式 #

现在展示对应年份的地图，直接传年份调用函数即可：

// 展示2020年选举地图
showElectionMap(2020);
// 展示2016年选举地图
showElectionMap(2016);

优化优势 #

• 扩展性强：后续新增2012、2008等年份的地图，只需在electionImages里加一条配置，不用写新函数。
• 减少重复代码：合并重复的展示逻辑，只维护一份代码，降低出错概率。
• 结构更清晰：数据（图片配置）与逻辑（展示逻辑）分离，代码可读性更高。

内容的提问来源于stack exchange，提问作者Joseph Foley