|
2 | 2 |
|
3 | 3 | Этот раздел описывает набор современных стандартов для "веб-компонентов". |
4 | 4 |
|
5 | | -На текущий момент, эти стандарты находятся в процессе разработки. Некоторые фичи имеют хорошую поддержку и интеграцию в современный стандарт HTML/DOM, в то время как другие пока еще в черновиках. Вы можете попробовать примеры в любом современном браузере (возможно, Google Chrome поддерживает самые последние фичи, так как ребята из Google предположительно стоят за большинством спецификаций по этой теме). |
| 5 | +На текущий момент, эти стандарты находятся в процессе разработки. Некоторые фичи имеют хорошую поддержку и интеграцию в современный стандарт HTML/DOM, в то время как другие пока еще в черновиках. Вы можете попробовать примеры в любом современном браузере (Google Chrome, скорее всего, имеет наиболее полную поддержку, так как ребята из Google стоят за большинством спецификаций по этой теме). |
6 | 6 |
|
7 | 7 | ## Что общего между... |
8 | 8 |
|
|
36 | 36 |
|
37 | 37 | Если что то становится сложным -- раздели это на более простые части и соедини наиболее очевидным способом. |
38 | 38 |
|
39 | | -**Хороший архитектор -- это тот, кто может сложные вещи сделать простыми.** |
| 39 | +**Хороший архитектор -- это тот, кто может сделать сложное простым.** |
40 | 40 |
|
41 | | -Мы можем разделить пользовательский интерфейс на визуальные компоненты: каждый из них занимает свое место на странице, может "выполнять" хорошо описанную задачу, и отделен от остальных. |
| 41 | +Мы можем разделить пользовательский интерфейс на визуальные компоненты: каждый из них занимает свое место на странице, выполняет определенную задачу, и отделен от остальных. |
42 | 42 |
|
43 | 43 | Рассмотрим какой-нибудь сайт, например Twitter. |
44 | 44 |
|
|
52 | 52 | 4. Форма отправки сообщения. |
53 | 53 | 5. (а так же 6 и 7) -- сообщения. |
54 | 54 |
|
55 | | -Компоненты могут содержать подкомпоненты, например сообщения могут быть частями родительского компонента "список сообщений". Кликабельное пользовательская картинка может быть самостоятельным компонентом и т.д. |
| 55 | +Компоненты могут содержать подкомпоненты, например сообщения могут быть частями родительского компонента "список сообщений". Кликабельное фото пользователя может быть самостоятельным компонентом и т.д. |
56 | 56 |
|
57 | 57 | Как мы определяем, что является компонентом? Это приходит из соображений здравого смысла, а также с интуицией и опытом. Обычно это объект, отделимый визуально, который мы можем описать с точки зрения того, что он делает и как он взаимодействует со страницей. В примере выше, страница содержит блоки, каждый из которых играет свою роль, и логично выделить их в компоненты. |
58 | 58 |
|
59 | | -- Компонент имеет свой собственный JavaScript-класс. |
| 59 | +Компонент имеет: |
| 60 | +- свой собственный JavaScript-класс. |
60 | 61 | - DOM-структура управляется исключительно своим классом, и внешний код не имеет к ней доступа (принцип "инкапсуляции"). |
61 | 62 | - CSS-стили, примененные к компоненту. |
62 | 63 | - API: события, методы класса и т.п., для взаимодействия с другими компонентами. |
63 | 64 |
|
64 | | -Опять же, компонент в целом не представляет ничего особенного. |
| 65 | +Еще раз заметим, в компонентном подходе как таковом нет ничего особенного. |
65 | 66 |
|
66 | | -Существует множество фреймворков и методов разработки для их создания, каждый из которых со своими плюсами и минусами. Обычно особые CSS классы и соглашения используются для обеспечения "ощущения компонентов" -- области видимости CSS и инкапсуляция DOM. |
| 67 | +Существует множество фреймворков и методов разработки для их создания, каждый из которых со своими плюсами и минусами. Обычно особые CSS классы и соглашения используются для имитации компонентов -- области видимости CSS и инкапсуляция DOM. |
67 | 68 |
|
68 | 69 | "Веб-компоненты" предоставляют встроенные возможности браузера для этого, поэтому нам больше не нужно имитировать их. |
69 | 70 |
|
70 | 71 | - [Пользовательские элементы](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements) -- для определения пользовательских HTML-элементов. |
71 | | -- [Теневой DOM](https://dom.spec.whatwg.org/#shadow-trees) -- для создание внутреннего DOM компонента, скрытого от остальных. |
| 72 | +- [Теневой DOM](https://dom.spec.whatwg.org/#shadow-trees) -- для создания внутреннего DOM компонента, скрытого от остальных. |
72 | 73 | - [Области видимости CSS](https://drafts.csswg.org/css-scoping/) -- для определения стилей, которые применяются только внутри теневого DOM компонента. |
73 | 74 | - [Перенаправление событий](https://dom.spec.whatwg.org/#retarget) и другие мелочи для создания более удобных в разработке пользовательских компонентов. |
74 | 75 |
|
75 | | -В следующей главе мы погрузимся в детали "пользовательских элементов" -- основа и хорошо поддерживаемая особенность веб-компонентов, которая и сама по себе хороша. |
| 76 | +В следующей главе мы погрузимся в "пользовательские элементы" -- основополагающую особенность веб-компонентов, имеющую хорошую поддержку, также применяемую и самостоятельно. |
0 commit comments