Я понимаю, что контент, презентация и поведение должны быть разделены с помощью HTML, CSS и JS для их независимой реализации.Есть ли лучшая практика для конкретного связывания этих элементов при сохранении слабой связи в динамическом веб-приложении?Это вообще возможно?Оптимально, без зависимости от jQuery?
Чтобы пояснить, о чем я говорю: в HTML нет механизма определения новых тегов, поэтому, когда вашей модели JavaScript требуется генерировать контент, теги и структура для ее представленияобязательно определяется в JS или каким-то образом становится доступным для него, тесно связывая поведение с контентом.
Прежде чем кто-то вызывает over-OOP, я хочу не использовать теги и CSS-классы в JS, потому что я даже нехочу зафиксировать HTML в качестве внешнего интерфейса.Есть как минимум пять разных представлений моей базовой модели, которые я в конечном итоге захочу, и тесная связь модели с HTML исключает как минимум два из них.
Есть ли какой-нибудь способ позднего связывания модели сцелевое представление без ущерба для динамики или слабой связи?Как XML-документ, соответствующий элементам модели фрагментам HTML-кода шаблона?
ОБНОВЛЕНИЕ
Хотя представляется не совсем понятным предоставление конкретных подробностей вопроса о факторинге и наилучшей практике ОО, я хочу предоставить более свежую информацию.пример запутанности формы и функции, свойственной HTML.Проблема запутывания контента и поведения между HTML и JS - это проблема, а не пример, и я хочу получить ответ, который не ломается, когда я меняю детали.Это совсем другой проект, чем тот, над которым я работал, когда я впервые задал этот вопрос, но суть та же:
У меня есть некоторый HTML для виджета пользовательского интерфейса.Это представление, представляющее объект модели - выбор палитр - пользователю.Сами палитры являются частью задачи приложения, поэтому они не являются представлениями, они являются моделями.
Я хочу использовать этот виджет как минимум в 2 различных диалоговых окнах (и любойхочу в будущем).Во-первых, мне нужно изменить выделение, чтобы вызвать немедленное действие - перекрашивание набора изображений в элементах холста, которые являются частью одного и того же диалога.В другом мне просто нужно иметь два разных набора для выбора - по одному в каждом наборе.
Я не хочу копировать и вставлять форму HTML этого виджета или поведение JS, потому что яхочу, чтобы обслуживание и ревизия распространялись от одной базовой вещи до всех ее экземпляров.Таким образом, в моем источнике может существовать только один экземпляр виджета, какой бы он ни был.
Я не хочу, чтобы мой JS отображал HTML-теги напрямую, потому что это приведет к потерепроверка ошибок в моей среде IDE и помощь с контентом в HTML.Кроме того, если есть проблемы с выводом HTML, их источник в моем JS будет менее понятным, потому что процесс генерации HTML не похож на HTML или обязательно отражает его структуру.Наконец, я хочу проверить влияние изменений CSS и HTML виджета независимо от моего JS.
Я не хочу включать в свой источник дополнительные зависимости, например, отдельные языки шаблонов и параметризациипотому что изменения в различных стандартах или возникающие потребности могут нарушить их совместимость, или они сами могут стать необслуживаемыми в будущем, оставляя меня с огромным количеством бесполезного источника.В зависимости от jQuery все в порядке, потому что он делает больше для нормализации между браузерами (не говоря уже об удобстве), чем, вероятно, когда-либо сломается, учитывая его повсеместность, но другие библиотеки будут рассматриваться с крайним подозрением.
Я хочу указать детали изменения и получения состояния виджета (какие цвета составляют палитры, как пользователь выбирает среди них) в JS, который ссылается только на виджет и его составные части, так как он будет частьюнесколько диалогов, которые используют эту информацию по-разному.
Одновременно другой JS-код (поведение диалога) должен иметь возможность наблюдать и инициализировать состояние виджета - но без включения каких-либо конкретных ссылок на внутреннюю структуру виджета, которая может когда-нибудь измениться, чтобы приспособиться к новым функциям,исправлять ошибки и т. д.
Чтобы просто сделать несколько копий HTML-кода виджета, я могу остановиться на вызове jquery.clone на узле шаблона, который существует в файле HTML, и вставке содержимогогде они мне нужны, из функции, которая устанавливает диалог.HTML усложняет ситуацию, когда любой из клонированных элементов имеет атрибуты id или name, но тщательная обработка во время клонирования может создавать уникальные идентификаторы, указывать их соответствующие атрибуты label и href на новые идентификаторы и сохранятьстарые доступны в атрибутах данных.Таким образом, все хорошо для структуры и контента, и, очевидно, представление CSS распространяется на клон просто отлично.
Проблема возникает, когда я пытаюсь реализовать интерфейс виджета с помощью контроллера его диалога.Какой самый перспективный способ раскрыть абстракцию состояния виджета?Т.е. я не хочу использовать widgetJquery.find('input:checked').val(), чтобы получить выбранный цвет из кода, который не обязательно должен фиксировать выделение на основе проверенного элемента ввода, атрибут значения которого представляет собой набор сериализованных цветов.
Надеюсь, это прояснит, что я ищу, не путая вопрос с деталями.