Код:
// Объявление класса
Class Имя_класса {
// Конструктор
constructor(параметры) {
...
}
// Устанавливает
set метод() {
...
}
// Возвращает
get метод() {
...
}
// Вызов метода
метод() {
...
}
}Пример:
Код:
<!DOCTYPE html>
<html>
<head>
<title>Button Test</title>
<script>
class Button {
// Конструктор, _text - текст кнопки, _id - id родительского элемента
constructor(_text, _id, _cb) {
this._text = _text; // Устанавливаем заголовок кнопки
this._id = _id; // Устанавливаем id родительского элемента
this._cb = _cb; // Устанавливаем callback функцию, при нажатие на кнопку
}
// Устанавливаем текст кнопки
set text(_text) {
if(_text)
this._text = _text;
}
// Получаем текст кнопки
get text() {
return this._text;
}
// Устанавливаем id родительского элемент
set id(_id) {
if(_id)
this._id = _id;
}
// Получаем id родительского элемент
get id() {
return this._id;
}
// Показываем кнопку
show() {
var el = document.getElementById(this._id); // Получаем объект родительского элемента
var new_el = document.createElement('button'); // Добавляем новый элемент, т.е кнопку
new_el.innerHTML = this._text; // Пишим внутрь кнопки текст
new_el.onclick = this._cb; // Устанавливаем вызов callback функции, при нажатие на кнопку
el.appendChild(new_el); // Добавляем кнопку, в родительский элемент
}
}
// При загрузке...
window.onload = function() {
const btn = new Button('Нажми на кнопку!', 'main', function() { alert('Привет!'); }); // Кнопка btn
btn.show(); // Показываем кнопку
}
</script>
</head>
<body id="main">
</body>
</html>