Как улучшить данный код?
https://jsfiddle.net/ta86zyfq/41/
Заранее благодарю. Там в коде в методе initStartButton я на кнопку на событие click вешаю анонимную функцию, и так как внутри функции this - это уже startButtonElement, мне приходится делать дикие запилы типа var quiz = this(строка 25). Есть способ делать это попроще и красивее и правильно ли я вообще создаю класс QuizForm, не нарушаю ли существующие стандарты? Спасибо что дочитали до конца) |
Не знаю насколько корректно переопределять полностью прототип объекта, но я бы просто добавил в него свои методы, чтобы точно ничего нужного не затереть, т.е. так:
Object.prototype.someMethod=function(){}; Все DOM-узлы, которые нужны объекту для работы лучше принимать из вне (в параметрах конструктора либо через дополнительные методы-сеттеры). Все текста из методов объекта также стоит выпилить, добавив в объект их методы-сеттеры. Это все мое имхо. |
Спасибо за ответ. Это все таки демоверсия, потому текст и внутри для простоты примера)
Насчет прототипа не знаю, мне вообще где-то советовали использовать синтаксический сахар тоесть "class" и "constructor", но я не вижу огромной разницы, а вы как считаете?) |
|
delgus, если не нужны браузеры, которые не поддерживают классы или вы будете использовать транспайлер, то лучше использовать син. сахар.
|
<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> у меня так получилось ) + есть следующий вопрос |
Спасибо за ответ) Действительно, у стрелочных функций отсутствует связывание с this. Буду теперь их юзать почаще) Благодарче)
|
Если пишете в ООП, то юзайте навешивание обработчика на объект:
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(); } /,,, }Одна из самых недооценённых фич, ИМХО. =\ |
Aetae, Прикольная фича) Обязательно поразмыслю над её использованием) Тогда уж надо для класса QuizForm свои события создавать, тогда вообще крутяк будет. Хотелось бы именно по максимуму абстрагироваться и работать именно с объектом.
|
Благодарен всем кто поучаствовал в теме
Если кому интересно - у меня примерно такое жуткое безобразие получилось :lol: https://github.com/Delgus/Delgus.git...js/QuizForm.js Документация и демки здесь :write: https://delgus.github.io/quizform/ До будущих побед) |
Часовой пояс GMT +3, время: 10:35. |