jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

up

Browse source
This commit is contained in:
Ilya Kantor 2016-11-14 23:41:18 +03:00
parent f99574f53b
commit b0976b5253
153 changed files with 590 additions and 533 deletions
Download patch file Download diff file Expand all files Collapse all files

2
1-js/9-object-inheritance/10-class-inheritance/5-menu-timer-animated/solution.md Normal file
View file

@ -0,0 +1,2 @@
Обратите внимание: константы состояний перенесены в прототип, чтобы `AnimatingMenu` их тоже унаследовал.

64
1-js/9-object-inheritance/10-class-inheritance/5-menu-timer-animated/solution.view/index.html Normal file
View file

@ -0,0 +1,64 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="menu.js"></script>
<script>
function AnimatingMenu() {
Menu.apply(this, arguments);
}
AnimatingMenu.prototype = Object.create(Menu.prototype);
AnimatingMenu.prototype.STATE_ANIMATING = 2;
AnimatingMenu.prototype.open = function() {
var self = this;
this._state = this.STATE_ANIMATING;
this._timer = setTimeout(function() {
Menu.prototype.open.call(self);
}, 1000);
};
AnimatingMenu.prototype.close = function() {
clearTimeout(this._timer);
Menu.prototype.close.apply(this);
};
AnimatingMenu.prototype._stateAsString = function() {
switch (this._state) {
case this.STATE_ANIMATING:
return 'анимация';
default:
return Menu.prototype._stateAsString.call(this);
}
};
// тест, использование..
var menu = new AnimatingMenu();
menu.showState(); // закрыто
menu.open();
menu.showState(); // анимация
setTimeout(function() { // через 1 секунду
menu.showState(); // открыто
menu.close();
menu.showState(); // закрыто
}, 1000);
</script>
</body>
</html>

28
1-js/9-object-inheritance/10-class-inheritance/5-menu-timer-animated/solution.view/menu.js Normal file
View file

@ -0,0 +1,28 @@
function Menu(state) {
this._state = state || this.STATE_CLOSED;
};
Menu.prototype.STATE_OPEN = 1;
Menu.prototype.STATE_CLOSED = 0;
Menu.prototype.open = function() {
this._state = this.STATE_OPEN;
};
Menu.prototype.close = function() {
this._state = this.STATE_CLOSED;
};
Menu.prototype._stateAsString = function() {
switch (this._state) {
case this.STATE_OPEN:
return 'открыто';
case this.STATE_CLOSED:
return 'закрыто';
}
};
Menu.prototype.showState = function() {
alert(this._stateAsString());
}

33
1-js/9-object-inheritance/10-class-inheritance/5-menu-timer-animated/source.view/index.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="menu.js"></script>
<script>
var AnimatingMenu = Menu; // замените на ваш код для AnimatingMenu
// использование..
var menu = new AnimatingMenu();
menu.showState(); // закрыто
menu.open();
menu.showState(); // анимация
setTimeout(function() {
menu.showState(); // открыто
menu.close();
menu.showState(); // закрыто (закрытие без анимации)
}, 1000);
</script>
</body>
</html>

28
1-js/9-object-inheritance/10-class-inheritance/5-menu-timer-animated/source.view/menu.js Normal file
View file

@ -0,0 +1,28 @@
function Menu(state) {
this._state = state || Menu.STATE_CLOSED;
};
Menu.STATE_OPEN = 1;
Menu.STATE_CLOSED = 0;
Menu.prototype.open = function() {
this._state = Menu.STATE_OPEN;
};
Menu.prototype.close = function() {
this._state = Menu.STATE_CLOSED;
};
Menu.prototype._stateAsString = function() {
switch (this._state) {
case Menu.STATE_OPEN:
return 'открыто';
case Menu.STATE_CLOSED:
return 'закрыто';
}
};
Menu.prototype.showState = function() {
alert(this._stateAsString());
};

15
1-js/9-object-inheritance/10-class-inheritance/5-menu-timer-animated/task.md Normal file
View file

@ -0,0 +1,15 @@
importance: 5
---
# Меню с таймером для анимации
Есть класс `Menu`. У него может быть два состояния: открыто `STATE_OPEN` и закрыто `STATE_CLOSED`.
Создайте наследника `AnimatingMenu`, который добавляет третье состояние `STATE_ANIMATING`.
- При вызове `open()` состояние меняется на `STATE_ANIMATING`, а через 1 секунду, по таймеру, открытие завершается вызовом `open()` родителя.
- Вызов `close()` при необходимости отменяет таймер анимации (назначаемый в `open`) и передаёт вызов родительскому `close`.
- Метод `showState` для нового состояния выводит `"анимация"`, для остальных -- полагается на родителя.
[edit src="source" title="Исходный документ, вместе с тестом"]