Как улучшить данный код?
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. |