JavaScript 重构为 OOP

Question

如何将下面的代码重构为 OOP？

我不希望您在这里给我一个完整的重写，而是我正在寻求有关如何处理我的代码并将其转换为 OOP 的建议。

这对我来说是新鲜事。如果你能展示背后的思考过程，也许只是添加一个初始代码重构，我将开始进一步研究和实现它。也欢迎提供有关最佳做法的见解。

$(function() {
$.ajax({
    type: "GET",
    url: "/data",
    success: res => {
        console.log(res);
        let data = res;
        //console.log(data.guests[0].firstName);

        let Greeting = () => {

            let getFirstName = data.guests.map(name => name.firstName);
            let getHotelName = data.hotels.map(name => name.company);
            let getRoomNumber = data.guests.map(number => number.reservation.roomNumber);

            let handleSubmit = () => {
                $("#form").submit(function(e) {
                    e.preventDefault();
                    let room = $('#selectRoom').val();
                    let name = $('#selectName').val();
                    let hotel = $('#selectHotel').val();
                    let greetGuest = `${time} ${name} and welcome to ${hotel} your ${room} is now ready for you. Enjoy your stay, let us know if you need anything.`;
                    console.log(greetGuest);
                    //append to Dom
                    $('#message').append(greetGuest);
                });
            };
            handleSubmit()

        };
        Greeting();
    }, //success ends
    error: err => console.log(err)
});
});

Answer 1

OOP 的全部要点是将功能封装到对象中，这样每个对象都具有一组特定的属性和附加到它的行为。可以修改所提供的代码片段，使其具有一个 Greeting 类，该类具有一个 handleSubmit 方法，其属性在 AJAX 回调的箭头函数中描述。但是，根据布局，您可能只有一个实例，基本上使 OOP 在这里无用。

您执行一个 AJAX 请求，该请求为每个问候语获取所有数据。然后，您将数据映射到单独的数组中，每个数组都有特定的每个客人数据。如果您真的想使用类，可以将其重构为:

class HotelGuest {
  constructor(a, b, c) {
    this.firstName = a;
    this.hotelName = b;
    this.roomNum = c;
  }

  // Add ${time} as necessary, because I only see it once and do not know its purpose
  get greeting(){
    return this.firstName + " and welcome to " + this.hotelName +
      " your " + this.roomNum + " is now ready for you. Enjoy your stay, let us know if you need anything.";
  }
}

var guestsInfo = [];

$(function(){
  $.ajax({
    type: "GET",
    url: "/data",

    success: data => {
      data.guests.forEach((guest, i) => guestsInfo.push(new HotelGuest(guest.firstName, data.hotels[i].company, guest.reservation.roomNumber)));
    },

    error: err => console.log(err)
  });
});

所有客人和重要信息都可以在 guestsInfo 中找到。每个元素都遵循 HotelGuest 类的布局。要获得客人的问候语，只需访问 .greeting 属性。它会根据客人的数据而改变。

有关 ES6 中的类及其语法的更多信息，请访问:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes