renovations
This commit is contained in:
Ilya Kantor
parent
a62682e188
commit
35081a779a
115 changed files with 439 additions and 325 deletions
|
|
@ -1,19 +1,21 @@
|
|||
# Веб-компоненты
|
||||
# Свои элементы: Custom Elements
|
||||
|
||||
Сердцем платформы "веб-компоненты" является стандарт [Web Components](http://w3c.github.io/webcomponents/explainer/), который находится в разработке и позволяет описывать свои элементы.
|
||||
Платформа "веб-компоненты" включает в себя несколько стандартов [Web Components](http://www.w3.org/standards/techs/components#w3c_all), которые находятся в разработке.
|
||||
|
||||
Начнём мы со стандарта [Custom Elements](http://www.w3.org/TR/custom-elements/), который позволяет создавать свои типы элементов.
|
||||
[cut]
|
||||
## Зачем Web Components?
|
||||
## Зачем Custom Elements?
|
||||
|
||||
Критично настроенный читатель скажет: "Зачем ещё стандарт для создания своих элементов? Я могу создать любой элемент и прямо сейчас! В любом из современных браузеров можно писать любой HTML, используя свои теги. В чём же разница?"
|
||||
Критично настроенный читатель скажет: "Зачем ещё стандарт для создания своих элементов? Я могу создать любой элемент и прямо сейчас! В любом из современных браузеров можно писать любой HTML, используя свои теги: `<mytag>`. Или создавать элементы из JavaScript при помощи `document.createElement('mytag')`. В чём же разница?"
|
||||
|
||||
Она в том, что обычно элемент с нестандартным названием (например `<message>`) воспринимается браузером, как нечто неопределённо-непонятное. Ему соответствует класс [HTMLUnknownElement](http://www.w3.org/TR/html5/dom.html#htmlunknownelement), и у него нет каких-либо особых методов.
|
||||
Она в том, что обычно элемент с нестандартным названием (например `<mytag>`) воспринимается браузером, как нечто неопределённо-непонятное. Ему соответствует класс [HTMLUnknownElement](http://www.w3.org/TR/html5/dom.html#htmlunknownelement), и у него нет каких-либо особых методов.
|
||||
|
||||
**Стандарт Web Components позволяет описывать для новых элементов свои свойства, методы, объявлять свой DOM, подобие конструктора и многое другое.**
|
||||
**Стандарт Custom Elements позволяет описывать для новых элементов свои свойства, методы, объявлять свой DOM, подобие конструктора и многое другое.**
|
||||
|
||||
Давайте посмотрим это на примерах.
|
||||
|
||||
[warn header="Только Chrome"]
|
||||
Так как спецификация не окончательна, то для запуска примеров рекомендуется использовать Chrome Canary.
|
||||
[warn header="Для примеров рекомендуется Chrome"]
|
||||
Так как спецификация не окончательна, то для запуска примеров рекомендуется использовать Google Chrome, лучше -- последнюю сборку [Chrome Canary](https://www.google.ru/chrome/browser/canary.html), в которой, как правило, отражены последние изменения.
|
||||
[/warn]
|
||||
|
||||
## Новый элемент
|
||||
|
|
@ -22,7 +24,7 @@
|
|||
|
||||
Здесь:
|
||||
<ul>
|
||||
<li>`имя` -- имя нового тега, например `"mega-select"`. Оно обязано содержать дефис `-`. Спецификация требует дефис, чтобы избежать в будущем конфликтов со стандартными элементами HTML. Нельзя создать элемент `timer` или `myTimer` -- будет ошибка.</li>
|
||||
<li>`имя` -- имя нового тега, например `"mega-select"`. Оно обязано содержать дефис `"-"`. Спецификация требует дефис, чтобы избежать в будущем конфликтов со стандартными элементами HTML. Нельзя создать элемент `timer` или `myTimer` -- будет ошибка.</li>
|
||||
<li>`прототип` -- объект-прототип для нового элемента, он должен наследовать от `HTMLElement`, чтобы у элемента были стандартные свойства и методы.</li>
|
||||
</ul>
|
||||
|
||||
|
|
@ -62,7 +64,7 @@
|
|||
</script>
|
||||
```
|
||||
|
||||
**Метод `registerElement` может быть вызван в любое время, даже и после появления `<my-timer>` в HTML.**
|
||||
Использовать новый элемент в HTML можно и до его объявления через `registerElement`.
|
||||
|
||||
Для этого в браузере предусмотрен специальный режим "обновления" существующих элементов.
|
||||
|
||||
|
|
@ -72,7 +74,7 @@
|
|||
<li>При вызове `registerElement` такие элементы автоматически обновятся до нужного класса.</li>
|
||||
</ul>
|
||||
|
||||
Вот демо того, что происходит, когда регистрация элемента происходит после его появления в разметке:
|
||||
В примере ниже регистрация элемента происходит через 2 секунды после его появления в разметке:
|
||||
|
||||
```html
|
||||
<!--+ run -->
|
||||
|
|
@ -85,7 +87,7 @@
|
|||
}
|
||||
|
||||
hello-world {
|
||||
transition: color 5s;
|
||||
transition: color 3s;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -103,12 +105,15 @@
|
|||
}
|
||||
});
|
||||
|
||||
*!*
|
||||
// у нового типа элементов есть метод sayHi
|
||||
*/!*
|
||||
hello.sayHi();
|
||||
}, 2000);
|
||||
</script>
|
||||
```
|
||||
|
||||
Создание таких элементов в JavaScript никак не отличается от обычных:
|
||||
Можно создавать такие элементы и в JavaScript -- обычным вызовом `createElement`:
|
||||
|
||||
```js
|
||||
var timer = document.createElement('my-timer');
|
||||
|
|
@ -116,9 +121,11 @@ var timer = document.createElement('my-timer');
|
|||
|
||||
## Расширение встроенных элементов
|
||||
|
||||
Выше мы видели пример создания элемента на основе базового `HTMLElement`. Но можно расширить и другие, более конкретные HTML-элементы.
|
||||
|
||||
Для расширения встроенных элементов у `registerElement` предусмотрен параметр `extends`, в котором можно задать, какой тег мы расширяем.
|
||||
|
||||
Например:
|
||||
Например, кнопку:
|
||||
|
||||
```html
|
||||
<!--+ run -->
|
||||
|
|
@ -167,7 +174,7 @@ var timer = document.createElement("button", "my-timer");
|
|||
|
||||
## Жизненный цикл
|
||||
|
||||
Следующие методы автоматически вызываются во время жизненного цикла элемента:
|
||||
В прототипе своего элемента мы можем задать специальные методы, которые будут вызываться при создании, добавлении и удалении элемента из DOM:
|
||||
|
||||
<table>
|
||||
<tr><td>`createdCallback`</td><td>Элемент создан</td></tr>
|
||||
|
|
@ -176,9 +183,9 @@ var timer = document.createElement("button", "my-timer");
|
|||
<tr><td>`attributeChangedCallback(name, prevValue, newValue)`</td><td>Атрибут добавлен, изменён или удалён</td></tr>
|
||||
</table>
|
||||
|
||||
Как вы, наверняка, заметили, `createdCallback` является подобием конструктора. Можно добавить к элементу свойства, запросить с сервера данные и так далее.
|
||||
Как вы, наверняка, заметили, `createdCallback` является подобием конструктора. Он вызывается только при создании элемента, поэтому всю дополнительную инициализацию имеет смысл описывать в нём.
|
||||
|
||||
Давайте используем `attachedCallback`, чтобы автоматически запускать таймер при вставке в документ:
|
||||
Давайте используем `createdCallback`, чтобы инициализовать таймер, а `attachedCallback` -- чтобы автоматически запускать таймер при вставке в документ:
|
||||
|
||||
```html
|
||||
<!--+ run -->
|
||||
|
|
@ -186,9 +193,16 @@ var timer = document.createElement("button", "my-timer");
|
|||
var MyTimerProto = Object.create(HTMLElement.prototype);
|
||||
|
||||
MyTimerProto.tick = function() {
|
||||
this.innerHTML++;
|
||||
this.timer++;
|
||||
this.innerHTML = this.timer;
|
||||
};
|
||||
|
||||
*!*
|
||||
MyTimerProto.createdCallback = function() {
|
||||
this.timer = 0;
|
||||
};
|
||||
*/!*
|
||||
|
||||
*!*
|
||||
MyTimerProto.attachedCallback = function() {
|
||||
setInterval(this.tick.bind(this), 1000);
|
||||
|
|
@ -203,10 +217,9 @@ var timer = document.createElement("button", "my-timer");
|
|||
<my-timer id="timer">0</my-timer>
|
||||
```
|
||||
|
||||
Спецификация:
|
||||
<ul>
|
||||
<li>[Introduction to Web Components](http://w3c.github.io/webcomponents/explainer/)</li>
|
||||
<li>[Custom Elements](http://w3c.github.io/webcomponents/spec/custom/)</li>
|
||||
</ul>
|
||||
## Итого
|
||||
|
||||
Мы рассмотрели, как создавать свои DOM-элементы при помощи стандарта [Custom Elements](http://www.w3.org/TR/custom-elements/).
|
||||
|
||||
Далее мы перейдём к изучению дополнительных возможностей по работе с DOM.
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue