JavaScript рефакторинг как ООП

1

Как я могу реорганизовать код ниже как ООП?

Я не ожидаю, что вы дадите мне полную переписку здесь, скорее я ищу совет о том, как подойти и преобразовать свой код в ООП.

Это что-то новое для меня. Если вы можете просто показать мыслительный процесс и, возможно, просто добавить исходный код рефакторинга, я начну изучать и внедрять его дальше. Также приветствуется понимание лучшей практики.

$(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)
});
});
  • 0
    Итак, в чем вопрос?
  • 2
    Это больше вопрос проверки кода, чем вопрос переполнения стека.
Показать ещё 12 комментариев
Теги:
ecmascript-6
oop

1 ответ

4
Лучший ответ

Вся точка ООП заключается в инкапсуляции функциональности в объекты, так что каждый объект имеет определенный набор свойств и поведения, связанных с ним. Предоставляемый фрагмент может быть изменен, чтобы иметь класс Greeting который имеет метод handleSubmit со свойствами, описанными внутри функции стрелки обратного вызова AJAX. Однако, основываясь на макете, у вас, вероятно, будет только экземпляр, по существу делающий ООП бесполезным здесь.

Вы выполняете запрос 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 класса HotelGuest. Чтобы получить приветствие гостей, просто войдите в свойство .greeting. Он изменится на основе гостевых данных.

Дополнительные сведения о классах и их синтаксисе в ES6 см. на странице https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню