如何将JS函数改造为面向对象，新增地点无需修改逻辑？

需求说明 #

原JavaScript代码中submitted函数通过多个if/else分支判断选中的地点来实现地图定位。希望将其改造为面向对象形式，后续新增地点时，只需在latLong对象中添加对应经纬度数据、在HTML中新增对应选择元素，无需修改函数逻辑即可自动完成地图定位，避免每次新增地点都添加额外分支判断。

改造后的完整代码 #

class AnimalMapHandler {
  constructor() {
    // 存储地点经纬度，新增地点直接在此添加键值对
    this.latLong = {
      Berlin: { lat: 52.5159, lng: 13.3777 },
      SanFrancisco: { lat: 37.773972, lng: -122.431297 },
      Beijing: { lat: 39.916668, lng: 116.383331 }
    };
    // 存储表单数据
    this.animalData = {
      name: '',
      age: '',
      habitat: ''
    };
    // 绑定事件
    this.bindEvents();
  }

  // 页面切换方法
  goToPage(page) {
    const p1 = document.getElementById("p1");
    const mapEl = document.getElementById("map");
    const p2 = document.getElementById("p2");
    const newAnimal = document.getElementById("newAnimal");

    if (page === "p1") {
      p1.hidden = false;
      mapEl.hidden = true;
      p2.hidden = true;
      newAnimal.hidden = true;
    } else if (page === "p2") {
      p1.hidden = true;
      mapEl.hidden = false;
      p2.hidden = false;
      newAnimal.hidden = false;

      // 渲染表单数据到页面
      document.getElementById("animalNameD").textContent = this.animalData.name;
      document.getElementById("animalAgeD").textContent = this.animalData.age;
      document.getElementById("animalHabitatD").textContent = this.animalData.habitat;
    }
  }

  // 表单提交处理方法
  submitForm() {
    // 获取表单输入值
    this.animalData.name = document.getElementById("animalName").value;
    this.animalData.age = document.getElementById("animalAge").value;
    
    // 获取选中的栖息地
    const checkedHabitat = Array.from(document.querySelectorAll('input[name="habitat"]'))
      .find(habitat => habitat.checked);
    
    if (checkedHabitat) {
      this.animalData.habitat = checkedHabitat.value;
      // 直接通过对象属性访问获取经纬度，无需if分支
      const targetLocation = this.latLong[this.animalData.habitat];
      if (targetLocation) {
        map.setCenter(targetLocation);
        map.setZoom(9);
      }
    }

    // 切换到结果页面
    this.goToPage("p2");
  }

  // 绑定DOM事件
  bindEvents() {
    const submitBtn = document.querySelector('#submit');
    submitBtn.addEventListener('click', () => this.submitForm());
  }
}

// 初始化实例
new AnimalMapHandler();

关键改造说明 #

1. 面向对象封装：用AnimalMapHandler类封装所有相关状态（地点经纬度、表单数据）和方法（页面切换、表单处理、事件绑定），避免全局变量污染，代码结构更清晰。
2. 移除冗余分支：通过this.latLong[this.animalData.habitat]直接从对象中获取对应经纬度，无需再写if/else判断，新增地点时只需在latLong中添加键值对即可。
3. 优化DOM操作：统一获取DOM元素，使用textContent替代innerHTML（更安全，避免XSS风险）。
4. 事件绑定优化：使用addEventListener绑定事件，配合箭头函数确保this指向类实例。
5. 扩展性提升：后续新增地点时，只需两步：
   • 在latLong对象中添加新地点的经纬度（如Tokyo: { lat: 35.6762, lng: 139.6503 }）
   • 在HTML中添加对应选择元素（如<input type="radio" name="habitat" value="Tokyo"> Tokyo）
     无需修改任何函数逻辑，即可自动实现地图定位。

内容的提问来源于stack exchange，提问作者displayName is undefined