Как организовать код для виджета JavaScript пользовательского интерфейса?

Question

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

1) Некоторые данные, необходимые для инициализации виджета, должны поступать с сервера
2) Некоторые данные поступают от клиента (в зависимости от того, какой из спискаэлементы выбраны)
3) Состояние некоторых разделов виджета необходимо запомнить при его закрытии и повторном открытии
4) Состояние других разделов необходимо забыть и сбросить до первоначальной настройки
5) Страница должна полностью рендериться очень быстро, поэтому AJAX-вызовы должны быть сведены к минимуму

Итак, мой вопрос: как вы организуете код для этого виджета?В настоящее время у меня есть отправка HTML-кода для виджета с некоторыми данными (то есть # 1), заполненными на стороне сервера (чтобы избежать отправки данных с помощью дополнительного вызова AJAX).Затем у меня есть куча JQuery-кода, который заполняет содержимое на стороне клиента специальным образом.А затем еще код для сброса всего обратно в желаемое состояние при втором вызове.Конечно, есть более декларативный способ сделать это?

Answer 1

Я думаю, вы были бы очень рады, используя Javascript MVC .Это значительно облегчает управление состоянием компонентов и позволяет довольно просто управлять данными на стороне клиента, вместо того, чтобы совершать повторные вызовы ajax.Пройдите урок, и я думаю, что вы будете весьма счастливы.

РЕДАКТИРОВАТЬ

Мой оригинальный ответ не касается скорости рендеринга страницы.

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

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

Answer 2

Если вы собираетесь свернуть свой собственный виджет и хотите сохранить его состояние, назначьте каждому виджету GUID / UUID и используйте его как часть «имени контейнера» виджета (Я беру последние 13 цифр для своей случайности, чтобы обеспечить некоторую случайность. Я не утверждаю, что она никогда не сломается.) Вы можете достаточно легко выполнить эту часть во время создания объекта, либо на стороне сервера, либо на стороне клиента.Вы также можете сохранить GUID / UUID в качестве идентификатора виджета, так что это вряд ли когда-либо изменится.

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

В противном случаесм. комментарии выше.