Концепция дизайна

Интерфейс, Редактор, Плеер

Интерфейс — это дерево компонентов.

Редактор интерфейса — это инструмент для редактирования и сохранения этого дерева компонентов.

Редактор поддерживает данные этого дерева и открывает для внешнего мира такие интерфейсы, как добавления, удаления, изменения и отмена.

Дерево компонентов ввода интерфейса плеера, вы можете получить отображение интерфейса

В будущем его даже можно будет адаптировать под разные платформы через разных плееров.

компоненты

Каждому компоненту дерева передается входАтрибутырешить самостоятельно

экспонат
взаимодействовать

Компонент может узнать, находится ли он в состоянии редактирования, через интерфейс редактора компонентов. В состоянии редактирования компонент может обеспечивать интерактивное редактирование собственных входных свойств.

В этом есть два преимущества

Редактор всегда заботится только о дереве компонентов и свойствах компонента, и ему не нужно обращать внимание на то, как редактировать свойства компонента
Компоненты могут адаптировать наиболее подходящие взаимодействия для редактирования свойств в соответствии со своими бизнес-потребностями.

Пример: разработка логики текстового компонента В состоянии редактирования отображается курсор, и текст можно редактировать.

Не в состоянии редактирования, отображать текстовое содержимое

Поразительно — отличный продукт для практики этой концепции [www.sxl.cn].

компонент просмотра

Далее мы можем воспользоваться тем свойством, что компонент может предоставлять собственную логику взаимодействия для редактирования собственных свойств в состоянии редактирования, и мы можем спроектировать специальный компонент — компонент представления.

компонент просмотраСуть – это составляющая. Просто свойство компонента представления представляет собой список компонентов. Порядок добавления, удаления и корректировки компонентов можно визуализировать в компоненте представления.Благодаря компоненту представления мы получаем возможность упорядочивать компоненты. Взаимодействие компонентов представления во многом определяет то, как в конечном итоге будет выглядеть визуальный редактор и как им пользоваться.

Например:

Мы можем поместить поле ввода в компонент представления, добавить компонент, введя имя компонента и нажав Enter, или добавить компонент более удобным, обнаружив перетаскиваемый компонент.
Компонент представления может быть блоком по умолчанию, а добавленные компоненты основаны на макете потока по умолчанию. Это также может быть расширенная область с определенной длиной и шириной.Вы можете перетащить компонент в любое место в области, чтобы получить положение координат и стать контейнером с абсолютным позиционированием.

Различные компоненты представления могут быть разработаны в соответствии с конкретными целями, и даже несколько компонентов представления могут сосуществовать.

посмотреть точку впрыска

С компонентом представления мы можем начать «внедрять» компоненты в компонент представления и находить необходимые компоненты для настройки нашего собственного интерфейса. Многие редакторы интерфейсов могут быть не такими гибкими внутри, но якобы делают то, что указано выше. До этого шага можно получить достаточно хороший редактор интерфейса. Такие как поразительно, structor и т.д.

[https://github.com/ipselon/structor] Structor — редактор пользовательского интерфейса ReactЭто очень распространенный набор идей: редактор отвечает за то, чтобы сообщить компоненту, где он должен быть и какую схему персонализации выбрал пользователь. Что может быть достигнуто в итоге, определяется библиотекой компонентов. Это на самом деле представляет очень большую проблему для дизайна компонентов: редактор назначает вам поле, и вы должны быть максимально гибкими, чтобы удовлетворить больше потребностей пользователей.

Вот вопрос, который я считаю очень показательным: как гибко спроектировать панель навигации.

По сравнению с приведенным выше рисунком мы можем разработать следующую структуру данных атрибутов, заменив предыдущие идеи дизайна:{logo, [{icon, name}]}

Текст меню можно свободно выбирать независимо от того, есть ли значок или нет, и он будет отображаться. Обеспечивает некоторую гибкость вперед. Далее рассмотрим, как реализовать нажатие на меню для запуска соответствующих изменений интерфейса.

…

Это слишком сложно, так что даже не думай об этом.

Поразительно этого не делает. Поразительно, что весь шаблон представляет собой завершенную программу, и меню также является частью этой программы, поэтому эффект привязки страниц к щелчкам меню может быть легко достигнут. Однако, если вы хотите сохранить это меню, но замените раздел содержимого страницы чем-то другим. Ну, поразительно не обеспечивает эту функциональность.

В конечном счете, как компонент, мне очень сложно взять землю в один акр и три балла, выделенную мне редактором, и очень сложно удовлетворить потребности пользователей на собственном сайте. Я должен управлять, как отображать его в других местах? -слишком трудно.

Итак, просто дайте мне землю, которой вы хотите управлять. Когда пользователь нажимает на меню 1, я создаю большой участок земли под дисплеем меню № 1, нажимаю на меню 2 и отображаю № 2... Тогда я не знаю, что делать с конкретным отображением земли 1 и земли 2? Другими словами, позвольте редактору назначать новые компоненты для управления ими.

Поговорив много, я наконец успешно перешел к теме - инъекция точки зрения.

Любой компонент может предоставить точку внедрения представления, отобразив компонент представления, и позволить пользователю дополнительно упорядочить компонент.

Взяв приведенный выше пример панели навигации, компонент панели навигации заполняет весь экран, а большая пустая область, оставленная под панелью, является компонентом представления.Пользователи могут использовать возможности компонента макета этого компонента представления, чтобы заполнить пустую область другими компонентами. Полный. Панель навигации отвечает только за управление тем, отображает ли пустая область компонент представления 1 или компонент представления 2. Что касается того, какие компоненты представления 1 и 2 отображаются, это вообще не имеет значения.

Еще одна деталь по Nav Bar: положение отображения меню также можно обрабатывать размещением компонента представления.Пользователь добавляет Text в компонент представления для отображения текста, а затем добавляет к нему Icon, то есть текст + значок . Вы также можете изменить положение текста и значка и стать необычным левым и правым значком или даже двумя левыми и правыми значками с текстом посередине. Делай что хочешь.

Суммировать

Визуальное редактирование разделено на два функциональных блока: редактор и проигрыватель.
Интерфейс представляет собой дерево компонентов, и что делает редактор, так это редактирует это дерево и сохраняет данные.
Компонент определяет, как отображать и взаимодействовать через свойства ввода, что также относится к процессу редактирования.
Для редактора требуется по крайней мере один компонент, который управляет компонентом — компонент представления, а компонент представления является заменяемым, тем самым реализуя расширяемость редактора.
Любой компонент может добиться большей гибкости путем встраивания компонентов представления.