27.07.2018, 10:14
|
|
Интересующийся
|
|
Регистрация: 27.07.2018
Сообщений: 21
|
|
|
Как улучшить данный код?
https://jsfiddle.net/ta86zyfq/41/
Заранее благодарю. Там в коде в методе initStartButton я на кнопку на событие click вешаю анонимную функцию, и так как внутри функции this - это уже startButtonElement, мне приходится делать дикие запилы
типа var quiz = this(строка 25). Есть способ делать это попроще и красивее и правильно ли я вообще создаю класс QuizForm, не нарушаю ли существующие стандарты?
Спасибо что дочитали до конца)
|
|
27.07.2018, 11:26
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,726
|
|
Не знаю насколько корректно переопределять полностью прототип объекта, но я бы просто добавил в него свои методы, чтобы точно ничего нужного не затереть, т.е. так:
Object.prototype.someMethod=function(){};
Все DOM-узлы, которые нужны объекту для работы лучше принимать из вне (в параметрах конструктора либо через дополнительные методы-сеттеры).
Все текста из методов объекта также стоит выпилить, добавив в объект их методы-сеттеры.
Это все мое имхо. |
|
27.07.2018, 11:39
|
|
Интересующийся
|
|
Регистрация: 27.07.2018
Сообщений: 21
|
|
|
Спасибо за ответ. Это все таки демоверсия, потому текст и внутри для простоты примера)
Насчет прототипа не знаю, мне вообще где-то советовали использовать синтаксический сахар тоесть "class" и "constructor", но я не вижу огромной разницы, а вы как считаете?)
|
|
27.07.2018, 11:57
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,070
|
|
|
|
|
27.07.2018, 11:59
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,726
|
|
|
delgus, если не нужны браузеры, которые не поддерживают классы или вы будете использовать транспайлер, то лучше использовать син. сахар.
|
|
27.07.2018, 14:13
|
 |
Профессор
|
|
Регистрация: 08.11.2017
Сообщений: 642
|
|
<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>
у меня так получилось ) + есть следующий вопрос
|
|
27.07.2018, 22:59
|
|
Интересующийся
|
|
Регистрация: 27.07.2018
Сообщений: 21
|
|
|
Спасибо за ответ) Действительно, у стрелочных функций отсутствует связывание с this. Буду теперь их юзать почаще) Благодарче)
|
|
28.07.2018, 05:18
|
 |
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,492
|
|
Если пишете в ООП, то юзайте навешивание обработчика на объект:
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();
}
/,,,
}
Одна из самых недооценённых фич, ИМХО. =\
__________________
29375, 35
Последний раз редактировалось Aetae, 28.07.2018 в 05:20.
|
|
28.07.2018, 15:56
|
|
Интересующийся
|
|
Регистрация: 27.07.2018
Сообщений: 21
|
|
|
Aetae, Прикольная фича) Обязательно поразмыслю над её использованием) Тогда уж надо для класса QuizForm свои события создавать, тогда вообще крутяк будет. Хотелось бы именно по максимуму абстрагироваться и работать именно с объектом.
|
|
|
|
