MVC-подобные обновления пользовательского интерфейса в Javascript / jQuery: лучшие практики?

Question

Я сталкиваюсь с некоторой неловкой проблемой. У меня есть веб-страница с несколькими кнопками, которые нужно отключить и включить в разных точках. Теперь, если бы это был Swing (или любой другой интерфейс пользовательского интерфейса рабочего стола), это было бы довольно тривиально: я бы просто добавил слушателей для изменений модели, которые меня интересовали, и соответственно обновил бы пользовательский интерфейс.

Это действительно базовые вещи MVC.

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

РЕДАКТИРОВАТЬ: Позвольте мне привести более конкретный пример.

Пример

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

Я сделал это, чтобы вы могли выбрать один (или несколько) из этих заказов, щелкнув по строкам. Это добавляет «выбранный» класс, который изменяет стиль, почти как список.

Что касается поведения, если пользователь выбирает один ордер, становятся доступными определенные действия, такие как «Открыть ордер» (для просмотра деталей), «Взять на себя ответственность», «Отмена» и т. Д. Атрибуты заказа также могут влиять на то, какие действия доступны, например, если заказ уже принадлежит кому-то другому, некоторые действия будут отключены.

Некоторые из этих параметров (например, открытие ордера) недоступны, если вы выбрали несколько ордеров.

Дополнительно через фоновый вызов Ajax список периодически обновляется новыми заказами. Пользователь также может нажать «Обновить» или отфильтровать заказы (по имени, диапазону дат и т. Д.), А затем перезагрузить заказы. Во время перезагрузки ордеров некоторые кнопки отключаются.

Я собирался сделать второй пример, но я думаю, что он достаточно сложен, чтобы проиллюстрировать тип проблемы. Теперь я начал это, давая различные классы управления. Например, элементы с классом «select» могут быть отключены / включены / стилизованы при выборе элемента.

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

В Swing я имел тенденцию обрабатывать подобные вещи, используя некий метод updateUI (), который вызывался бы всякий раз, когда изменялось состояние соответствующего элемента управления или модели. Затем он явно установит состояние всех элементов управления. Сейчас это, возможно, не самый эффективный способ (например, если у вас есть 30 элементов управления и вам нужно обновить только один из них, это немного напрасно), но я обнаружил, что простота того стоила. Альтернатива заключалась в том, что элементы управления / модели в конечном итоге были слишком информированы о том, от каких элементов управления они зависели или от каких элементов. Это идет с точки зрения связи.

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

Answer 1

Если вы хотите сохранить свое здравомыслие, используйте конечный автомат.

Вы не очень подробно рассказываете о том, что делает ваш пользовательский интерфейс, поэтому я приведу пример. Допустим, у вас есть страница загрузки файла. Пользователь должен иметь возможность выбрать файл, нажать кнопку загрузки, а затем вернуться на страницу, с которой он пришел, после завершения загрузки. Таким образом, у вас может быть три состояния: «Выбрать файл», «Загрузка», «Завершено». В состоянии «SelectFile» должны быть включены элементы управления, чтобы пользователь мог выбрать файл. В состоянии «Загрузка» эти элементы управления должны быть отключены, и пользователь должен увидеть индикатор выполнения. В состоянии «Готово» пользователь должен быть перенаправлен.

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

Когда вы хотите изменить включенные / отключенные элементы в пользовательском интерфейсе, вы просто изменяете состояние конечного автомата. Сам конечный автомат сообщает различным элементам управления пользовательского интерфейса обновить себя в зависимости от текущего состояния. Вы можете использовать предложение Бхарани (хорошо, с большим количеством голосов) об использовании классов, чтобы сделать это. Или какой механизм работает для вас.

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

Answer 2

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

Для управления элементами формы во время вызова ajax - вы можете добавить ajaxStart и ajaxEnd или использовать ajaxComplete и обрабатывать весь свой код внутри обратных вызовов.

Answer 3

Я думаю, что моделирование данных важно для приложений JavaScript. Я работаю над этим проектом планирования для медицинских клиник, и у меня есть структура данных JSON, которая моделирует стулья / пациентов в офисе. Ember обновляет представления (виджеты пользовательского интерфейса) автоматически при изменении бизнес-логики в моделях. Таким образом, сразу много кода sphagetti устраняется. Если вы делаете что-то графически интенсивное с взаимодействием с пользователем, почти преступно не использовать существующий шаблон MVC или создавать свои собственные классы JS MVC. Поначалу структурированная дисциплина перестала быть полезной, но когда вы увидите позже, как она снижает ваше кровяное давление и делает обслуживание намного более приятным, оно того стоит. Я бы не использовал его для простых одноразовых проектов, если они маленькие. Это лучше для средней сложности или повышенной сложности. Все, что займет у меня больше недели, я использую Ember. Я использовал knockout.js и Angular, и мне действительно нравится Ember с синтаксисом шаблонов Handlebars. Легко для глаз и эффективно.

Answer 4

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