refactor 3-more into separate books
This commit is contained in:
Ilya Kantor
parent
bd1d5e4305
commit
87639b2740
423 changed files with 9 additions and 9 deletions
225
3-webcomponents/2-webcomponent-core/article.md
Normal file
225
3-webcomponents/2-webcomponent-core/article.md
Normal file
|
|
@ -0,0 +1,225 @@
|
|||
# Свои элементы: Custom Elements
|
||||
|
||||
Платформа "веб-компоненты" включает в себя несколько стандартов [Web Components](http://www.w3.org/standards/techs/components#w3c_all), которые находятся в разработке.
|
||||
|
||||
Начнём мы со стандарта [Custom Elements](http://www.w3.org/TR/custom-elements/), который позволяет создавать свои типы элементов.
|
||||
[cut]
|
||||
## Зачем Custom Elements?
|
||||
|
||||
Критично настроенный читатель скажет: "Зачем ещё стандарт для создания своих элементов? Я могу создать любой элемент и прямо сейчас! В любом из современных браузеров можно писать любой HTML, используя свои теги: `<mytag>`. Или создавать элементы из JavaScript при помощи `document.createElement('mytag')`. В чём же разница?"
|
||||
|
||||
Она в том, что обычно элемент с нестандартным названием (например `<mytag>`) воспринимается браузером, как нечто неопределённо-непонятное. Ему соответствует класс [HTMLUnknownElement](http://www.w3.org/TR/html5/dom.html#htmlunknownelement), и у него нет каких-либо особых методов.
|
||||
|
||||
**Стандарт Custom Elements позволяет описывать для новых элементов свои свойства, методы, объявлять свой DOM, подобие конструктора и многое другое.**
|
||||
|
||||
Давайте посмотрим это на примерах.
|
||||
|
||||
[warn header="Для примеров рекомендуется Chrome"]
|
||||
Так как спецификация не окончательна, то для запуска примеров рекомендуется использовать Google Chrome, лучше -- последнюю сборку [Chrome Canary](https://www.google.ru/chrome/browser/canary.html), в которой, как правило, отражены последние изменения.
|
||||
[/warn]
|
||||
|
||||
## Новый элемент
|
||||
|
||||
Для описания нового элемента используется вызов `document.registerElement(имя, { prototype: прототип })`.
|
||||
|
||||
Здесь:
|
||||
<ul>
|
||||
<li>`имя` -- имя нового тега, например `"mega-select"`. Оно обязано содержать дефис `"-"`. Спецификация требует дефис, чтобы избежать в будущем конфликтов со стандартными элементами HTML. Нельзя создать элемент `timer` или `myTimer` -- будет ошибка.</li>
|
||||
<li>`прототип` -- объект-прототип для нового элемента, он должен наследовать от `HTMLElement`, чтобы у элемента были стандартные свойства и методы.</li>
|
||||
</ul>
|
||||
|
||||
Вот, к примеру, новый элемент `<my-timer>`:
|
||||
|
||||
```html
|
||||
<!--+ run -->
|
||||
<script>
|
||||
*!*
|
||||
// прототип с методами для нового элемента
|
||||
*/!*
|
||||
var MyTimerProto = Object.create(HTMLElement.prototype);
|
||||
MyTimerProto.tick = function() { // *!*свой метод tick*/!*
|
||||
this.innerHTML++;
|
||||
};
|
||||
|
||||
*!*
|
||||
// регистрируем новый элемент в браузере
|
||||
*/!*
|
||||
document.registerElement("my-timer", {
|
||||
prototype: MyTimerProto
|
||||
});
|
||||
</script>
|
||||
|
||||
*!*
|
||||
<!-- теперь используем новый элемент -->
|
||||
*/!*
|
||||
<my-timer id="timer">0</my-timer>
|
||||
|
||||
<script>
|
||||
*!*
|
||||
// вызовем метод tick() на элементе
|
||||
*/!*
|
||||
setInterval(function() {
|
||||
timer.tick();
|
||||
}, 1000);
|
||||
</script>
|
||||
```
|
||||
|
||||
Использовать новый элемент в HTML можно и до его объявления через `registerElement`.
|
||||
|
||||
Для этого в браузере предусмотрен специальный режим "обновления" существующих элементов.
|
||||
|
||||
Если браузер видит элемент с неизвестным именем, в котором есть дефис `-` (такие элементы называются "unresolved"), то:
|
||||
<ul>
|
||||
<li>Он ставит такому элементу специальный CSS-псевдокласс `:unresolved`, для того, чтобы через CSS можно было показать, что он ещё "не подгрузился".</li>
|
||||
<li>При вызове `registerElement` такие элементы автоматически обновятся до нужного класса.</li>
|
||||
</ul>
|
||||
|
||||
В примере ниже регистрация элемента происходит через 2 секунды после его появления в разметке:
|
||||
|
||||
```html
|
||||
<!--+ run -->
|
||||
<style>
|
||||
*!*
|
||||
/* стиль для :unresolved элемента (до регистрации) */
|
||||
*/!*
|
||||
hello-world:unresolved {
|
||||
color: white;
|
||||
}
|
||||
|
||||
hello-world {
|
||||
transition: color 3s;
|
||||
}
|
||||
</style>
|
||||
|
||||
<hello-world id="hello">Hello, world!</hello-world>
|
||||
|
||||
<script>
|
||||
*!*
|
||||
// регистрация произойдёт через 2 сек
|
||||
*/!*
|
||||
setTimeout(function() {
|
||||
document.registerElement("hello-world", {
|
||||
prototype: {
|
||||
__proto__: HTMLElement.prototype,
|
||||
sayHi: function() { alert('Привет!'); }
|
||||
}
|
||||
});
|
||||
|
||||
*!*
|
||||
// у нового типа элементов есть метод sayHi
|
||||
*/!*
|
||||
hello.sayHi();
|
||||
}, 2000);
|
||||
</script>
|
||||
```
|
||||
|
||||
Можно создавать такие элементы и в JavaScript -- обычным вызовом `createElement`:
|
||||
|
||||
```js
|
||||
var timer = document.createElement('my-timer');
|
||||
```
|
||||
|
||||
## Расширение встроенных элементов
|
||||
|
||||
Выше мы видели пример создания элемента на основе базового `HTMLElement`. Но можно расширить и другие, более конкретные HTML-элементы.
|
||||
|
||||
Для расширения встроенных элементов у `registerElement` предусмотрен параметр `extends`, в котором можно задать, какой тег мы расширяем.
|
||||
|
||||
Например, кнопку:
|
||||
|
||||
```html
|
||||
<!--+ run -->
|
||||
<script>
|
||||
var MyTimerProto = Object.create(*!*HTMLButtonElement.prototype*/!*);
|
||||
MyTimerProto.tick = function() {
|
||||
this.innerHTML++;
|
||||
};
|
||||
|
||||
document.registerElement("my-timer", {
|
||||
prototype: MyTimerProto,
|
||||
*!*
|
||||
extends: 'button'
|
||||
*/!*
|
||||
});
|
||||
</script>
|
||||
|
||||
<button *!*is="my-timer"*/!* id="timer">0</button>
|
||||
|
||||
<script>
|
||||
setInterval(function() {
|
||||
timer.tick();
|
||||
}, 1000);
|
||||
|
||||
timer.onclick = function() {
|
||||
alert("Текущее значение: " + this.innerHTML);
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
Важные детали:
|
||||
<dl>
|
||||
<dt>Прототип теперь наследует не от `HTMLElement`, а от `HTMLButtonElement`</dt>
|
||||
<dd>Чтобы расширить элемент, нужно унаследовать прототип от его класса.</dd>
|
||||
<dt>В HTML указывается при помощи атрибута `is="..."`</dt>
|
||||
<dd>Это принципиальное отличие разметки от обычного объявления без `extends`. Теперь `<my-timer>` работать не будет, нужно использовать исходный тег и `is`.</dd>
|
||||
<dt>Работают методы, стили и события кнопки.</dt>
|
||||
<dd>При клике на кнопку её не отличишь от встроенной. И всё же, это новый элемент, со своими методами, в данном случае `tick`.</dd>
|
||||
</dl>
|
||||
|
||||
При создании нового элемента в JS, если используется `extends`, необходимо указать и исходный тег в том числе:
|
||||
|
||||
```js
|
||||
var timer = document.createElement("button", "my-timer");
|
||||
```
|
||||
|
||||
## Жизненный цикл
|
||||
|
||||
В прототипе своего элемента мы можем задать специальные методы, которые будут вызываться при создании, добавлении и удалении элемента из DOM:
|
||||
|
||||
<table>
|
||||
<tr><td>`createdCallback`</td><td>Элемент создан</td></tr>
|
||||
<tr><td>`attachedCallback`</td><td>Элемент добавлен в документ</td></tr>
|
||||
<tr><td>`detachedCallback`</td><td>Элемент удалён из документа</td></tr>
|
||||
<tr><td>`attributeChangedCallback(name, prevValue, newValue)`</td><td>Атрибут добавлен, изменён или удалён</td></tr>
|
||||
</table>
|
||||
|
||||
Как вы, наверняка, заметили, `createdCallback` является подобием конструктора. Он вызывается только при создании элемента, поэтому всю дополнительную инициализацию имеет смысл описывать в нём.
|
||||
|
||||
Давайте используем `createdCallback`, чтобы инициализовать таймер, а `attachedCallback` -- чтобы автоматически запускать таймер при вставке в документ:
|
||||
|
||||
```html
|
||||
<!--+ run -->
|
||||
<script>
|
||||
var MyTimerProto = Object.create(HTMLElement.prototype);
|
||||
|
||||
MyTimerProto.tick = function() {
|
||||
this.timer++;
|
||||
this.innerHTML = this.timer;
|
||||
};
|
||||
|
||||
*!*
|
||||
MyTimerProto.createdCallback = function() {
|
||||
this.timer = 0;
|
||||
};
|
||||
*/!*
|
||||
|
||||
*!*
|
||||
MyTimerProto.attachedCallback = function() {
|
||||
setInterval(this.tick.bind(this), 1000);
|
||||
};
|
||||
*/!*
|
||||
|
||||
document.registerElement("my-timer", {
|
||||
prototype: MyTimerProto
|
||||
});
|
||||
</script>
|
||||
|
||||
<my-timer id="timer">0</my-timer>
|
||||
```
|
||||
|
||||
## Итого
|
||||
|
||||
Мы рассмотрели, как создавать свои DOM-элементы при помощи стандарта [Custom Elements](http://www.w3.org/TR/custom-elements/).
|
||||
|
||||
Далее мы перейдём к изучению дополнительных возможностей по работе с DOM.
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue