Продвинутые методы для уменьшения веса страницы скрытых HTML-форм

Question

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

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

Я ищу способы уменьшить вес страницы и уменьшить количество элементов dom.Я ищу баланс производительности и ремонтопригодности, так как есть много страниц с множеством различных объектов, которые нужно учитывать.

1. Используйте ajax для динамической загрузки модальной заполненной формы.Это значительно уменьшает вес страницы, но вызывает задержку при нажатии кнопки редактирования и является худшим для пользователя.Также требуется, чтобы каждая форма имела обработчик ajax для этой конкретной функции.
2. Сохраняйте параметры формы в виде данных json и заполняйте значения формы из клонированной формы шаблона при редактировании элемента.Это значительно уменьшает элементы dom, а также немного увеличивает вес страницы.Для вставки данных json во входные элементы необходимо написать общий фрагмент javascript.
3. Сохранение всей формы HTML в виде объекта json внутри атрибута данных элемента dom.Это никак не влияет на вес страницы, но уменьшает количество элементов dom.При редактировании HTML может быть введен в модальный диалог.Его также проще всего реализовать.
4. Очистите содержимое страницы для значений формы и вставьте их в клонированную шаблонную форму.Это уменьшает дублирование контента и максимально уменьшает вес страницы и dom-элементы.Несмотря на то, что это кажется хрупким и навязчивым, для контента требуется координация идентификаторов, и необходимо соблюдать особую осторожность, чтобы скрытые поля ввода также вводились на страницу.

Это параметры, которые я выбралпридумать.Решения JSON являются наиболее привлекательными для меня в настоящее время.Мне интересно, есть ли у кого-то другие решения или понимание любого из них?

Answer 1

Если вы стремитесь к скорости, и у вас нет удобной платформы, не думайте «HTML», думайте «элемент DOM». Храните как можно больше данных в «глобальном» объекте данных и обращайтесь к серверу только за информацией, которой у вас нет. Инициализируйте модальный

либо по требованию, либо асинхронно после загрузки формы и заполните его параметры с помощью JavaScript в ответ на обработанное событие от каждого элемента .

Для повышения производительности рассмотрите возможность сохранения категориальной информации в некотором параметре localStorage.

Реально, однако, вы хотите рамки. (Если вы не используете тот, который написал кто-то другой, вы должны написать свой.) Я фанат Enyo framework от WebOS лично, но есть другие, которые помогут вам сделать это .

Answer 2

Самым легким является, вероятно, сохранение всего определения формы в формате JSON и создание своего рода движка, который бы динамически создавал HTML-форму на лету. Затем вы будете использовать другой файл JSON для представления слоя данных, который заполняет / содержит данные формы.

Самое интересное, с чем вы сталкиваетесь, это как управлять макетом формы поверх всего этого. Для стандартного двухколоночного макета это просто. Кроме того, это ужасно много работы.

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

Если вы посмотрите на расширенные клиентские библиотеки, такие как ext.js , то вот как они это делают.