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请求，获取每个问候语的所有数据。然后，您将数据映射到单独的阵列，每个阵列都有特定的每个guest虚拟机数据。如果你真的想使用类，可以将其重构为：

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

JavaScript重构为OOP

1 个答案: