Как лучше и правильно написать js OOP код?

Question

Немного почитал , посмотрел ООП по js. Попробовал сделать небольшой пример кода. Правильно ли так писать? Можно ли совмещать простые, разные функции с классами и т.д. как в моем коде, или совсем плохо я уже написал? Можете подсказать что может не так написал, или что то добавить для простоты?

Еще чуть вопросов. Если у меня 3 разных паб-окна, то можно написать все методы в одном классе или написать только главные функции (открыть,закрыть) и уже наследовать его для каждого нового класса с новыми методами?

class PupMenu {
   constructor(pubuP, classActive) {
      this.pubuP = pubuP;
      this.classActive = classActive;
   }

   exit() {
      //ЗАКРЫВАЕТ ОКНО
   }

   open() {
      //ОТКРЫВАЕТ ОКНО
   }

   slideLeft() {
      //Переключить фото назад
   }
   slideRigth() {
      //Переключить фото вперед
   }

   sendRequest() {
      //Отправить сообщения
   }
}

const btn1 = document.querySelector('.btn1')
const btn2 = document.querySelector('.btn2')
const btn3 = document.querySelector('.btn3')

const pub1 = document.querySelector('.pub1')
const pub2 = document.querySelector('.pub2')
const pub3 = document.querySelector('.pub3')

const arrowLeft = document.querySelector('.arrowLeft')
const arrowRigth = document.querySelector('.arrowRigth')

const send = document.querySelector('.send')

let pupWindowOne = new PupMenu(pub1, 100)
let pupWindowTwo = new PupMenu(pub2, 400)
let pupWindowThree = new PupMenu(pub3, 40)

btn1.addEventListener('click', () => {
   pupWindowOne.open()
})

btn2.addEventListener('click', () => {
   pupWindowTwo.open()
})

btn3.addEventListener('click', () => {
   pupWindowThree.open()
})

arrowLeft.addEventListener('click', pupWindowTwo.slideLeft)

arrowRigth.addEventListener('click', pupWindowTwo.slideRigth)

function sendMs(e) {
   if (e.target...) {
      pupWindowThree.sendRequest()
   }
}

Answer 1

Я бы делал код примерно таким (его еще можно улучшить - cделать короче и гибче):

class PupMenu {
   constructor(options) {
      const {btnClass, pubClass, send, classActive} = options
      this.classActive = classActive;
      this.btn = document.querySelector(btnClass)
      this.pub = document.querySelector(pubClass)
      this.send = send;
      btn.addEventListener('click', () => {
         this.open()
      })
   }
   exit() {/*ЗАКРЫВАЕТ ОКНО*/}
   open() { /*ОТКРЫВАЕТ ОКНО*/}
   slideLeft() {/*Переключить фото назад */}
   slideRigth() {/*Переключить фото вперед*/}
   sendRequest() {/*Отправить сообщения */}
}

const send = document.querySelector('.send')

let pupWindowOne = new PupMenu({
   buttonClass:'.btn1',
   pubClass: '.pub1',
   send,
   classActive: 100 
})

let pupWindowTwo = new PupMenu({
    buttonClass: '.btn2',
    pubClass: '.pub2', 
    send,
    classActive: 400
 })

let pupWindowThree = new PupMenu({
   buttonClass:'.btn3',
   pubClass: '.pub3',
   send,
   classActive: 40
})

const arrowLeft = document.querySelector('.arrowLeft')
const arrowRigth = document.querySelector('.arrowRigth')
arrowLeft.addEventListener('click', pupWindowTwo.slideLeft)
arrowRigth.addEventListener('click', pupWindowTwo.slideRigth)

function sendMs(e) {
   if (e.target...) {
      pupWindowThree.sendRequest()
   }
}

по второй части вопроса: https://javascript.info/static-properties-methods

БЛОГ НА HUSL

Как лучше и правильно написать js OOP код?

Ответы (1 шт):