|
1 | 1 | # С орбитальной высоты |
2 | 2 |
|
3 | | -Этот раздел описывает набор современных стандартов для "web компонентов". |
| 3 | +Этот раздел описывает набор современных стандартов для "веб-компонентов". |
4 | 4 |
|
5 | 5 | На текущий момент, эти стандарты находятся в процессе разработки. Некоторые фичи имеют хорошую поддержку и интеграцию в современный стандарт HTML/DOM, в то время как другие пока еще в черновиках. Вы можете попробовать примеры в любом современном браузере (возможно, Google Chrome поддерживает самые последние фичи, так как ребята из Google предположительно стоят за большинством спецификаций по этой теме). |
6 | 6 |
|
|
12 | 12 |
|
13 | 13 |  |
14 | 14 |
|
15 | | -Это Международная Космическая Станция (МКС). |
| 15 | +Это международная космическая станция (МКС). |
16 | 16 |
|
17 | 17 | А это то, как она устроена (приблизительно): |
18 | 18 |
|
19 | 19 |  |
20 | 20 |
|
21 | | -Международная Космическая Станция: |
| 21 | +Международная космическая станция: |
22 | 22 | - Состоит из множества компонентов. |
23 | 23 | - Каждый компонент в свою очередь, состоит из множества более мелких деталей. |
24 | 24 | - Компоненты имеют очень сложное устройство, и гораздо сложнее большинства сайтов. |
|
40 | 40 |
|
41 | 41 | Мы можем разделить пользовательский интерфейс на визуальные компоненты: каждый из них занимает свое место на странице, может "выполнять" хорошо описанную задачу, и отделен от остальных. |
42 | 42 |
|
43 | | -Рассмотрим какой-нибудь вебсайт, например Twitter. |
| 43 | +Рассмотрим какой-нибудь сайт, например Twitter. |
44 | 44 |
|
45 | 45 | Он естественным образом разделен на компоненты: |
46 | 46 |
|
|
56 | 56 |
|
57 | 57 | Как мы определяем, что является компонентом? Это приходит из соображений здравого смысла, а также с интуицией и опытом. Обычно это объект, отделимый визуально, который мы можем описать с точки зрения того, что он делает и как он взаимодействует со страницей. В примере выше, страница сожержит блоки, каждый из которых играет свою роль, и логично выделить их в компоненты. |
58 | 58 |
|
59 | | -- Компонент имеет свой собственный JavaScript класс. |
60 | | -- DOM структура управляется исключительно своим классом, и внешний код не имеет к ней доступа (принцип "инкапсуляции"). |
61 | | -- CSS стили, примененные к компоненту. |
| 59 | +- Компонент имеет свой собственный JavaScript-класс. |
| 60 | +- DOM-структура управляется исключительно своим классом, и внешний код не имеет к ней доступа (принцип "инкапсуляции"). |
| 61 | +- CSS-стили, примененные к компоненту. |
62 | 62 | - API: события, методы класса и т.п., для взаимодействия с другими компонентами. |
63 | 63 |
|
64 | 64 | Опять же, компонент в целом не представляет ничего особенного. |
65 | 65 |
|
66 | | -Существует множество фреймворков и методов разработки для их создания, каждый из которых со своими плюсами и минусами. Обычно особые CSS классы и условности используются для обеспечения "ощущения компонентов" -- области видимости CSS и инкапсуляция DOM. |
| 66 | +Существует множество фреймворков и методов разработки для их создания, каждый из которых со своими плюсами и минусами. Обычно особые CSS классы и соглашения используются для обеспечения "ощущения компонентов" -- области видимости CSS и инкапсуляция DOM. |
67 | 67 |
|
68 | 68 | "Веб-компоненты" предоставляют встроенные возможности браузера для этого, поэтому нам больше не нужно имитировать их. |
69 | 69 |
|
70 | 70 | - [Пользовательские элементы](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements) -- для определения пользовательских HTML-элементов. |
71 | 71 | - [Теневой DOM](https://dom.spec.whatwg.org/#shadow-trees) -- для создание внутреннего DOM компонента, скрытого от остальных. |
72 | | -- [CSS области видимости](https://drafts.csswg.org/css-scoping/) -- для определения стилей, которые применяются только внутри теневого DOM компонента. |
| 72 | +- [Области видимости CSS](https://drafts.csswg.org/css-scoping/) -- для определения стилей, которые применяются только внутри теневого DOM компонента. |
73 | 73 | - [Перенаправление событий](https://dom.spec.whatwg.org/#retarget) и другие мелочи для создания более удобных в разработке пользовательских компонентов. |
74 | 74 |
|
75 | | -В следующей главе мы погрузимся в детали "Пользовательских Элементов" -- основа и хорошо поддерживаемая особенность веб-компонентов, которая и сама по себе хороша. |
| 75 | +В следующей главе мы погрузимся в детали "пользовательских элементов" -- основа и хорошо поддерживаемая особенность веб-компонентов, которая и сама по себе хороша. |
0 commit comments