Создание визуализации активности (перетаскивание для создания страниц)

внешний интерфейс

предисловие

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

основной дизайн

Общий процесс таков:

Создать -> Редактировать -> Сохранить -> Опубликовать -> Показать

основной:

Поддерживайте объект, который сохраняет отношения родитель-потомок компонента, напримерnode树, каждый компонент имеет уникальный идентификатор, например, следующий

const nodeTree = {
    id: 'component0',
    name: 'rootContainer',
    children: [
        {
            id: 'component1',
            name: 'header'
        },
        {
            id: 'component2',
            name: 'content',
            children: [],
        }
    ]
}

  1. Создайте объект, не управляйте домом при редактировании, просто добавляйте, удаляйте, изменяйте и проверяйте массив объектов, чтобы обновить представление.

  2. При сохранении объект существует в базе данных, а файл html, статический ресурс,

obj монтируется в окно посредством передачи шаблона и генерирует уникальный путь доступа

  1. Изменить текущую активную страницу статус доступности при публикации

  2. При отображении сгенерируйте страницу на основе указанного пользовательского компонента, отображаемого obj

фокус

1. Работа узла

Не работайте с узлом dom, обновляйте представление, добавляя, удаляя, изменяя и запрашивая объект массива.

2. Перетащите и оцените

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

  • Перетаскивание: вместо того, чтобы полностью использовать события перетаскивания (Drag and drop) HTML5, он использует их для прослушивания действий пользователя, вdragStart(перетащите, чтобы начать),dragOver(перетащите в освободившуюся область),dragEnd(перетащить конец),drop(проставить), выполнить соответствующую передачу данных и добавить, удалить, изменить и проверить действия

  • Оценка того, что точка пересекает прямоугольник: при перетаскивании компонента и наведении курсора на область размещаемого компонента пользователь может захотеть поместить его сверху, снизу, слева, справа и внутри парящего компонента (элементы уровня блока находятся вверху). и вниз, элементы уровня линии слева и справа) Нам нужно разделить соответствующие области для различных вариантов выбора и четких подсказок

Пожалуйста, посмотрите демо ниже

3. Компоненты и рендеринг

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

Пройдите по дереву узлов, чтобы рекурсивно вызвать основной файл визуализации и визуализировать соответствующий компонент в соответствии с именем компонента и соответствующими данными.

4. Адаптация и предварительный просмотр мобильного терминала

  • Из-за больших различий в стилях и стилях между мобильными и ПК набор адаптации кода не рассматривается.Каждый пользовательский компонент соответствует двум файлам ПК и h5.При рендеринге и отображении оценивается текущая платформа и производится соответствующее отображение .
  • Предварительный просмотр h5 использует iframe, а предварительный просмотр h5 занимает отдельный маршрут, который назначается атрибуту src iframe.

5. Быстрое редактирование текста

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

  1. Отредактируйте кнопку, превратите ее в поле ввода, когда закончите, сохраните кнопку,

  2. Поместите поле ввода на панели свойств для сопоставления отношений,

Вышеупомянутые два могут быть менее интуитивными и более хлопотными.

подумал об использованииcontenteditableАтрибут, после добавления тега вы можете напрямую изменить текст, вы можете установить изменение двойного щелчка, отложить сохранение и установить защиту от сотрясений, большинство компонентов будут иметь это требование, более проблематично напрямую привязать событие тега, поэтому установить глобальное событие привязки Монитор, контроль регистрации и своевременное уничтожение

Пожалуйста, посмотрите демо ниже

Функции

Редактировать откат и отменить откат

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

Компонент перемещается вверх и вниз и указывает на функциональность родительского компонента

  • Когда пользователь редактирует, положение компонента может быть скорректировано, а когда слишком много уровней вложенности компонентов, может быть трудно выбрать родительский компонент текущего компонента, Исходя из этого, эти две функции предусмотрены.

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

Думай и оптимизируй

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

вопрос:

  • Код не чистый, объем кода большой, включая все шаблоны пользовательских компонентов

  • Проблема с проектом затрагивает все страницы

  • Изменения в проектах или компонентах учитывают влияние на онлайн-активность.

Таким образом, эта идея PASS.Каждый раз, когда активная страница создается и сохраняется, на сервере будет генерироваться уникальный html-файл и статические ресурсы, чтобы гарантировать, что это не будет затронуто.

  1. Идея оптимизации: напрямую передать отредактированный html-фрагмент активной страницы в бэкэнд, а бэкенд напрямую сгенерирует отрендеренную активную страницу.

преимущество:

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

  • Сокращение кода

Суммировать

В целом, требования к продукту соблюдены, и одновременно учитываются три аспекта.

  1. Повысьте эффективность операторов при создании страниц и улучшите удобство использования продукта.

  2. Сократите сложность написания пользовательских компонентов и начните работу с разработчиками, а также улучшите ремонтопригодность и масштабируемость проекта.

  3. Оптимизация взаимодействия с пользователем, повышение эффективности загрузки страниц (другие аспекты, такие как удобочитаемость, видимость, удобство использования)

Категории