Как реализовать JavaScript-фреймворк корпоративного уровня для веб-дизайнеров?

Question

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

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

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

<foo:draggable> 
 ... some HTML here ...
</foo:draggable>

, который обернет HTML в <div> с помощью перетаскивания вверху и кнопки закрытия.

Моя идея состоит в том, чтобы пометить div уникальным именем класса CSS с пространством имен, например foo_draggable, а затем поместить все мои функции в один файл JS. Затем этот JS-файл определяет, есть ли в DOM элементы с классом CSS foo_draggable и, если он их найдет, он подключит необходимые обработчики событий.

Однако меня беспокоит проблема масштабирования, и мне интересно, стоит ли запускать множество запросов селектора, когда они довольно часто не будут использоваться.

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

У кого-нибудь есть опыт с этим?

Answer 1

А как насчет двух имен классов?

<div class='foo fooDragable'></div>
<div class='foo fooSortable'></div>

Вы добавляете класс 'foo' ко всем вашим элементам, которые требуют модификации javascript. Ваш javascript должен проверить дом только один раз на foo.

var $foo = $('.foo');

После этого вы можете искать в этом массиве, который должен быть намного меньше, чем полный дом.

var $dragAble = $foo.filter('.fooDragable');

Answer 2

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

Если у вас есть несколько часто используемых компонентов, а затем набор менее часто используемых, возможно, стоит разделить их. Храните часто используемые компоненты в одном файле JavaScript (минимизированном, обслуживаемом сжатием и агрессивным кэшированием) и загружайте его на каждую страницу независимо от того, нужен он или нет. Кэширование гарантирует, что оно будет загружено только один раз, и это будет только один маленький HTTP-запрос. Для менее распространенных компонентов храните их в отдельных файлах (в идеале, по одному на компонент) и добавьте тег сценария на страницах, которые их используют.

Я не совсем знаком с тем, как работает JSP, но может быть возможно сделать это автоматически - если тег включен в документ, добавьте тег сценария для foo_widget.js в заголовок документа или что-то подобное .

Answer 3

Вы рассматривали или смотрели на JSF ? Я знаю, что это серьезное изменение, если вы еще не используете JSF. Но есть много готовых к использованию библиотек компонентов JSF с аяксичным соусом, например RichFaces , IceFaces , PrimeFaces и т. Д. времени для создания компонентов / тегов для него самостоятельно.

В качестве альтернативы вы можете заменить все Javascript для использования great jQuery JS framework.