Привет, друзья.
Сей час занимаюсь средней сложности проектом - созданием конструктора формы. Цель банальна, содать удобный юзерфрендли) конструктор html форм, с использованием jquery.
Проект не сложный, но он ощутимо разрастается с наращиванием функционала. Думаю, выбранный способ реализации далек от совершенства и хочется услышать советы по его рационализации и модификации, а возможно и вовсе раскроете мне глаза и я все перепишу заново
Итак, способ реализации.
Есть некоторое количество кнопок, которые соответствуют конкретному элементу формы (text, radio, checkbox, select и т.д.). У каждой кнопки есть атрибут
params, который содержит json-данные с параметрами, вот, например:
<div class="toolbar-textfield btn" params="{"wid":"8","title":"Текстовое поле","required":"0","type":"textfield","icon":"toolbar-textfield","description":"","options":null,"expert":{"name":"","regexp":"","error_message":""}}"></div>
При клике на кнопку, она передается в функцию обработки и JSON данные парсятся по соответствующим свойствам объекта:
..
Config.addSettingsWindow = function (element) {
Config.thisParams = $.parseJSON($(element).attr('params'));
description = Config.thisParams.description ? '<dl id="field-description"><dt>Описание: </dt><dd><textarea>' + Config.thisParams.description + '</textarea></dd></dl>' : ''
..
после этого функция генерирует всплывающее окно настроек(JQueryUI) из парсеных свойств. Эти настройки позволяют управлять параметрами поля. После внесения изменений, все параметры считываются и сохраняются обратно в JSON. т.е. в атрибут params текущего поля.
Существует 3 блока генерируемого html-кода:
1) Окно параметров элемента формы
2) Краткая версия элемента формы (грубо говоря - это прямоугольный блок, содержащий данные и типе элемента и его название. Например, группа из 10 чекбоксов или радио, будет представлена одним блоком краткой версии. Это дает возможность быстро понять структуру формы при ее большом объеме)
3)Полная версия элемента формы
То есть в итоге в js-коде получается много html-шаблонов для построения всех необходимых элементов конструктора
И отсюда вопрос, каким образом организовать код? Оставить все как есть, т.е. в едином js-файле или мэй би отделить js-код от html, а может быть еще как-то. Как обычно подходят к разработке подобных задач? Буду очень рад если поделитесь вашим опытом или ссылками на хорошие статьи на эту тему.
Спасибо!
