在软件开发中，代码重复是一个常见且需要避免的问题，它不仅增加了代码量，降低了可读性，更重要的是，使得维护和扩展变得异常困难。当面对多个结构相似但数据不同的代码块时，我们应该遵循dry（don't repeat yourself）原则，将其重构为更高效、更灵活的形式。本教程将以一个具体的leaflet地图标记创建为例，演示如何利用javascript的对象数组和循环机制来优化重复代码。
识别重复模式
观察以下原始代码片段，它创建了多个Leaflet地图标记：
var city_valkeakoski = new L.marker([61.2712, 24.0333], {
icon: new L.divIcon({
html: 'Valkeakoski',
iconSize: [20, 20],
className: 'myicon city'
}),
title: "Valkeakoski",
name: "valkeakoski"
}).on('click', function(e) {
cityInfo(this)
});
var city_rovaniemi = new L.marker([66.4979, 25.7199], {
icon: new L.divIcon({
html: 'Rovaniemi',
iconSize: [20, 20],
className: 'myicon city'
}),
title: "Rovaniemi",
name: "rovaniemi"
}).on('click', function(e) {
cityInfo(this)
});
// ... 更多类似代码
cities.addLayer(city_valkeakoski);
cities.addLayer(city_rovaniemi);
// ...我们可以清晰地识别出重复模式：
- 所有标记都使用 new L.marker() 创建。
- 它们都包含一个 icon 属性，其中 L.divIcon 的 html 内容、iconSize 和 className 结构相同。
- title 和 name 属性的设置方式相似。
- 都绑定了相同的点击事件处理函数 cityInfo(this)。
不同之处在于：
- 地理坐标（[lat, long]）。
- 城市名称，它出现在 html 内容、title 和 name 属性中（name 属性通常是小写）。
构建数据驱动结构
为了消除这些重复，我们将所有可变的数据集中到一个JavaScript对象数组中。每个对象代表一个独立的城市标记所需的所有信息。这种结构与JSON数据格式非常相似，易于理解和处理。
立即学习“Java免费学习笔记（深入）”；
const city_data = [{
city: 'Valkeakoski',
lat: 61.2712,
long: 24.0333
},
{
city: 'Rovaniemi',
lat: 66.4979,
long: 25.7199
},
{
city: 'Oulu',
lat: 65.0127,
long: 25.4714
}
// ... 更多城市数据
];在这个 city_data 数组中，每个对象都包含了一个城市的 city 名称、lat 纬度、long 经度。这种结构清晰地分离了数据和逻辑，为后续的动态创建奠定了基础。
动态生成与迭代
有了结构化的数据，我们就可以使用循环来动态创建每个标记，而不是手动复制粘贴代码。JavaScript的 forEach 方法非常适合遍历数组，并对每个元素执行相同的操作。
// 假设 cities 是一个 L.layerGroup 或类似的容器
// 假设 cityInfo(marker) 是一个已定义的函数，用于处理点击事件
city_data.forEach(({city, lat, long}) => {
// 使用对象解构赋值，直接获取 city, lat, long 变量
let marker = new L.marker([lat, long], {
icon: new L.divIcon({
// 使用模板字符串（反引号 ``）动态插入城市名称
html: `${city}`,
iconSize: [20, 20],
className: 'myicon city'
}),
title: city,
name: city.toLowerCase() // 确保 name 属性是小写
}).on('click', function(e) {
// 绑定点击事件，调用 cityInfo 函数
cityInfo(this)
});
// 将创建的标记添加到地图层组
cities.addLayer(marker);
});在这个优化后的代码中：
- city_data.forEach(...) 遍历了 city_data 数组中的每一个城市对象。
- ({city, lat, long}) 是ES6的对象解构赋值语法，它允许我们从当前迭代的 city_data 对象中直接提取 city、lat 和 long 属性作为独立的变量，使代码更简洁。
- L.marker([lat, long], {...}) 动态地使用了从数据中提取的 lat 和 long。
- html:${city}使用了**模板字符串**（Template Literals，用反引号 ` `` 定义），这是一种非常方便的方式来构建包含变量的字符串，避免了繁琐的字符串拼接。
- name: city.toLowerCase() 确保 name 属性是小写的城市名。
- on('click', function(e) { cityInfo(this) }) 确保了每个动态创建的标记都绑定了正确的点击事件。
优势与实践考量
通过这种数据驱动和迭代的方式，我们获得了显著的优势：
- 代码简洁性与可读性： 极大地减少了冗余代码，使逻辑更加清晰，易于理解。
- 维护性提升： 如果需要修改标记的创建逻辑（例如，改变图标样式或点击行为），只需修改 forEach 循环内部的代码，而不是逐个修改每个标记的定义。
- 扩展性增强： 添加新的城市标记变得异常简单，只需向 city_data 数组中添加新的对象即可，无需编写任何新的JavaScript代码。这使得应用程序更容易适应未来的需求变化。
- 数据管理集中化： 所有相关数据集中管理，便于统一维护和更新。
在实际应用中，还需要考虑以下几点：
- 数据源： 在更复杂的应用中，city_data 可能不是硬编码在JavaScript文件中，而是从外部API、JSON文件或数据库中动态加载。此时，你需要确保数据加载机制能将数据转换为类似的JavaScript对象数组结构。
- 错误处理： 考虑数据可能不完整或格式不正确的情况，添加适当的错误处理机制。
- 性能考量： 对于包含成千上万个元素的超大数据集，直接一次性渲染所有标记可能会导致性能问题。在这种情况下，可以考虑使用虚拟化列表、分页加载或集群（如Leaflet.markercluster插件）等高级技术。
- 通用性： 确保抽象出来的函数或循环逻辑足够通用，能够处理所有预期的变体。如果不同元素的差异较大，可能需要更复杂的配置对象或工厂函数。
总结
将重复的相似功能合并为一个统一的函数或循环，并结合结构化的数据（如JavaScript对象数组），是JavaScript编程中一种非常重要的优化策略。它不仅遵循了DRY原则，显著提升了代码的可读性、可维护性和可扩展性，更是现代前端开发中构建动态、数据驱动应用的基础。掌握这种模式，将使你的代码更健壮、更易于管理。
