Как я могу реорганизовать код ниже как ООП?
Я не ожидаю, что вы дадите мне полную переписку здесь, скорее я ищу совет о том, как подойти и преобразовать свой код в ООП.
Это что-то новое для меня. Если вы можете просто показать мыслительный процесс и, возможно, просто добавить исходный код рефакторинга, я начну изучать и внедрять его дальше. Также приветствуется понимание лучшей практики.
$(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)
});
});
Вся точка ООП заключается в инкапсуляции функциональности в объекты, так что каждый объект имеет определенный набор свойств и поведения, связанных с ним. Предоставляемый фрагмент может быть изменен, чтобы иметь класс 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.