基于页面语言从API数据生成HTML的重复代码优化方案咨询

嘿，我懂你现在的痛点——重复的代码块不仅维护起来麻烦，看着也不优雅对吧？咱们把这段代码彻底重构一下，既能解决多语言渲染的问题，又能完全符合DRY（Don't Repeat Yourself）原则。

先分析现有代码的问题 #

你当前的实现里，判断语言后分别写了几乎一模一样的删除键和生成HTML的逻辑，这不仅重复，而且以后要新增键（比如KeyDEN/KeyDFR）或者新语言时，得在两个分支里都改一遍，很容易出错。另外，delete操作会修改原data数组，这其实没必要，我们完全可以直接根据语言取值，不用改动原数据。

重构后的代码 #

// 1. 简化页面语言获取逻辑，增加默认值容错
const urlMatch = window.location.href.match(/\.eu\/(\w{2})\//);
const pageLangCode = urlMatch ? urlMatch[1].toUpperCase() : 'EN'; // 没有匹配到默认用英文

// 2. 定义语言与键后缀的映射，方便后续扩展多语言
const langSuffixMap = {
  EN: 'EN',
  FR: 'FR'
};
// 获取当前语言对应的键后缀，默认 fallback 到英文
const currentLangSuffix = langSuffixMap[pageLangCode] || 'EN';

// 3. 定义需要渲染的键前缀列表——以后新增键只需要在这里加！
const keyPrefixes = ['KeyA', 'KeyB', 'KeyC'];

const pickContainer = document.querySelector('#container');

// 4. 动态生成HTML，一套逻辑适配所有语言
const generateHtml = data.map(item => {
  // 对每个键前缀，拼接成当前语言的完整键名，生成对应的<p>标签
  return keyPrefixes.map(prefix => `<p>${item[`${prefix}${currentLangSuffix}`]}</p>`).join('');
}).join('');

pickContainer.insertAdjacentHTML('afterbegin', generateHtml);

为什么这个方案更好？ #

• 完全符合DRY原则：再也没有重复的HTML模板和循环逻辑，所有语言共用一套渲染代码
• 可维护性拉满：以后要新增键（比如KeyDEN/KeyDFR），只需要在keyPrefixes数组里加个'KeyD'；要加新语言（比如西班牙语），只需要在langSuffixMap里加一行配置，不用动渲染逻辑
• 不污染原数据：去掉了delete操作，不会修改原始的data数组，避免潜在的副作用
• 逻辑更清晰：把配置（语言映射、键前缀）和渲染逻辑分离，代码可读性更高

扩展小技巧 #

如果以后要支持更多语言（比如德语DE），只需要扩展langSuffixMap：

const langSuffixMap = {
  EN: 'EN',
  FR: 'FR',
  DE: 'DE'
};

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