Как сделать задачу телефонная книга на js с использованием ООП?

Question

[Spinto89]

Нужно сделать страницу телефонная книга
В верхней части окна распологается 3 текстовых поля(имя,телефон,почта) и кнопка добавить
пользователь заполняет поля и нажимает на кнопку добавить
и новый контакт добавляется в таблицу расположенную под формой добавления контакта
над таблицей с контактами есть текстовое поле для поиска
в котором пользователь начинает печатать текст и происходит фильтрация элементов
в самой таблице напротив каждого контакта есть кнопка удалить и редактировать(сейчас не будетм делать, это на потом)
по нажатию на кнопку удалить контакт должен удаляться

Приложение должно состоять из 3х классов.

Подскажите плиз правильную логику, в какую сторону копать. Или похожие примеры.

На данном этапе есть такое видение:

//уровень данных
class GetContact {
  constructor(name,phone,email){
    this.name = name;
    this.phone = phone;
    this.email = email;
  }
};

//уровень логики
class ContactEdit extends GetContact {
  //массив контактов
  //методы для добавления и удаления классов
  //метод для поиска по подстроке
};

//уровень графики
class TableEdit extends ContactEdit {
  //метод для добавления данных в таблицу
};

function submitForm(form) {
  let name = form.name.value;
  let phone = form.phone.value;
  let email = form.email.value;
  let newUser = new GetContact(name,phone,email);
  //вызываем методы классов
};

Comments

[Roman]

ООП?
Каким образом глагол (class GetContact) вписывается в концепцию класса.

class ContactEdit extends GetContact {
//массив контактов
и наследуется, то есть ContactEdit является разновидностью GetContact и дополнительно еще включает в себя этот же GetContact?

Подскажите плиз правильную логику, в какую сторону копать. Или похожие примеры.

Возьмите в руки телефонную книгу PhoneBook посмотрите как она устроена, после этого (упрощенно) смоделируйте ее. У вас есть контакты, которые хранятся в книге, их можно искать/смотреть, можно добавлять/редактировать и (допустим) удалять. С поправками на особенности воплощения этой абстракции в коде.

Так, как основное это поиск и хранение - то нужно особое внимание уделить вопросу выбора структуры данных для организации поиска/хранения информации

похожие примеры источник гугл

[Stockholm Syndrome]

ой, лишь бы впихнуть ооп туда куда не надо

Answer 1

[grinat]

Ты сделала репозиторий, но у тебя нет ни одной сущности. Если по простому:

class Contact {
   id
   name
   phone
   remove()
   save()
   render() => `<form></form>`
}
class PhoneBook {
   contacts
   render() => `<table></table>`
}

Comments

[Михаил]

Плохой вариант. Один класс отвечает и за сохранение, и за рендер дпнных. Надо бы отдельно сделать:

class User {
  name
  phone
  email
}

class UserRepository {
  save(User)
  remove(User)
}

class PhoneBook {
  contacts
  render()
}

Answer 2

[McBernar]

Класса getcontact быть не может. Класс — это описание объекта.

Пробуйте просто мыслить объектами — объект человека, объект телефонной книги. Соответственно, у объекта телефонной книги будет как раз метод getcontact, который вернет объект (экземпляр класса) человека.

Куда тут засунуть третий класс — я не знаю. Разве что только какой-нибудь search, который умеет искать и вызывать методы объекта книги для рендера найденного.