Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как улучшить данный код? (https://javascript.ru/forum/dom-window/74654-kak-uluchshit-dannyjj-kod.html)

delgus 27.07.2018 10:14

Как улучшить данный код?
 
https://jsfiddle.net/ta86zyfq/41/

Заранее благодарю. Там в коде в методе initStartButton я на кнопку на событие click вешаю анонимную функцию, и так как внутри функции this - это уже startButtonElement, мне приходится делать дикие запилы
типа var quiz = this(строка 25). Есть способ делать это попроще и красивее и правильно ли я вообще создаю класс QuizForm, не нарушаю ли существующие стандарты?

Спасибо что дочитали до конца)

Nexus 27.07.2018 11:26

Не знаю насколько корректно переопределять полностью прототип объекта, но я бы просто добавил в него свои методы, чтобы точно ничего нужного не затереть, т.е. так:
Object.prototype.someMethod=function(){};


Все DOM-узлы, которые нужны объекту для работы лучше принимать из вне (в параметрах конструктора либо через дополнительные методы-сеттеры).
Все текста из методов объекта также стоит выпилить, добавив в объект их методы-сеттеры.

Это все мое имхо.

delgus 27.07.2018 11:39

Спасибо за ответ. Это все таки демоверсия, потому текст и внутри для простоты примера)
Насчет прототипа не знаю, мне вообще где-то советовали использовать синтаксический сахар тоесть "class" и "constructor", но я не вижу огромной разницы, а вы как считаете?)

рони 27.07.2018 11:57

delgus,
https://javascript.ru/forum/events/6...tml#post448856

Nexus 27.07.2018 11:59

delgus, если не нужны браузеры, которые не поддерживают классы или вы будете использовать транспайлер, то лучше использовать син. сахар.

SuperZen 27.07.2018 14:13

<body>
  <div id="message"></div>
  <button id="button"></button>
</body>
<script>
  function QuizForm() {
    this.message = document.getElementById('message')
    this.button = document.getElementById('button')
    this.messages = {
      start: 'Привет. ответишь на вопрос?',
      questions: [
        'Это вопрос',
        'Это еще вопрос'
      ],
      button: {
        start: 'Начать',
        next: 'Сделующий',
        stop: 'Кончить'
      }
    }
    this.start = false
    this.question = 0
  }
  QuizForm.prototype = {
    init: function () {
      this.button.onclick = () => { // если тут functin(), тогда нужно var self = this...
        if (!this.start) this.start = true
        else if (this.start && this.question !== this.messages.questions.length - 1) this.question++
        else {
          this.start = false
          this.question = 0
        }
        this.setState();
      }
      this.setState();
    },
    setText: function (text, el) {
      el.innerText = text
    },
    setState: function () {
      if (!this.start) {
        this.setText(this.messages.start, this.message)
        this.setText(this.messages.button.start, this.button)
      } else if (this.start && this.question !== this.messages.questions.length - 1) {
        this.setText(this.messages.questions[this.question], this.message)
        this.setText(this.messages.button.next, this.button)
      } else {
        this.setText(this.messages.questions[this.question], this.message)
        this.setText(this.messages.button.stop, this.button)
      }
    }
  }
  quiz = new QuizForm();
  quiz.init();
</script>


у меня так получилось ) + есть следующий вопрос

delgus 27.07.2018 22:59

Спасибо за ответ) Действительно, у стрелочных функций отсутствует связывание с this. Буду теперь их юзать почаще) Благодарче)

Aetae 28.07.2018 05:18

Если пишете в ООП, то юзайте навешивание обработчика на объект:
QuizForm.prototype = {
    init: function () {
      this.button.addEventListener('click', this);
      this.setState();
    },
    handleEvent: function (event) { 
      switch(event.type){
        case 'click':
          this.click(event);
          break;
          
        /...
          
      }
    },
    click: function(){
      if (!this.start) this.start = true
      else if (this.start && this.question !== this.messages.questions.length - 1) this.question++
      else {
        this.start = false
        this.question = 0
      }
      this.setState();
    }
    /,,,
  }
Одна из самых недооценённых фич, ИМХО. =\

delgus 28.07.2018 15:56

Aetae, Прикольная фича) Обязательно поразмыслю над её использованием) Тогда уж надо для класса QuizForm свои события создавать, тогда вообще крутяк будет. Хотелось бы именно по максимуму абстрагироваться и работать именно с объектом.

delgus 28.07.2018 16:04

Благодарен всем кто поучаствовал в теме

Если кому интересно - у меня примерно такое жуткое безобразие получилось :lol:
https://github.com/Delgus/Delgus.git...js/QuizForm.js
Документация и демки здесь :write:
https://delgus.github.io/quizform/

До будущих побед)


Часовой пояс GMT +3, время: 10:35.