Как организовать код для виджета javascript UI?

Веб-приложение, над которым я работаю, имеет несколько довольно сложных и устойчивых элементов клиентского интерфейса. Я пытаюсь сохранить здравый смысл, организовав их в составные виджеты javascript. Некоторые из требований являются:Как организовать код для виджета javascript UI?

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

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

источник

2010-09-23 Abhijit Rao

Почему бы использовать AJAX для этого подхода слишком медленно? Я реализовал именно то, что вы описываете здесь, и мое невероятно быстро.Я также склонен строить свои объекты в JSON для более быстрого транзита и потому, что я могу быстро управлять ими в JS ... Имейте это в виду. – jcolebrand

@drachenstern, я склонен согласиться, но это зависит от количества данных, времени, необходимого для генерации данных, и производительности сети. Большинство моих вызовов AJAX настолько быстренько, что пользователи не заметят, если я обновляю данные каждый раз, когда это необходимо, но есть достаточно случаев, когда это происходит значительно медленнее, чем мне нужно решать в каждом конкретном случае. – mikerobi

Я хотел избежать последовательности: (1) запросить страницу с сервера, (2) запустить мой код document.onload, (3) решить, что мне нужно больше данных с сервера и сделать вызов AJAX. Шаг 3 - это потраченная впустую поездка туда и обратно на сервер, так как я мог бы отправить эти данные на шаге 1 (я знаю, что он понадобится клиенту). Итак, как бы вы это сделали? Вставить объект JSON где-нибудь в разметке и выловить его из DOM с помощью jquery? Или просто предварительно заполнить разметку данными? –

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

EDIT

Мой первоначальный ответ не касается скорости отображения страниц.

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

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

источник

2010-09-23 17:30:46 mikerobi

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

_So Я хотел что-то более легкое. Вот что я сделал. – jcolebrand

Abhijit Rao, очевидно, я не знаю, в какой работе это будет связано, но я часто ошибался, изобретая колесо, когда было более надежное стороннее решение, просто потому, что оно не идеально подходит для моего необходимо. – mikerobi

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

Все это было дано в рамках «как я сочиняю виджет» ради модульности, особенно во время операции Javascript (наклонным раздел, что я думал, что должен был ... далее разговор заставляет меня верить, что я возможно, были неправильными, оставив их для потомков)

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

источник

2010-09-23 17:40:02 jcolebrand

Как организовать код для виджета javascript UI?

ответ

Смежные вопросы