jQuery, поиск более умного способа инициализации

Question

Я ищу лучший способ управления глобальной инициализацией компонента / плагина / виджета в большом проекте. В нем много компонентов на основе jQuery, которые я хотел бы быстро и эффективно инициализировать, и после изучения Интернета я действительно нашел лишь недальновидные примеры, которые реалистичны / эффективны только на небольших сайтах.

Проблема

Хочу найти умный и элегантный способ избавиться от этого:

$(function() { $('.widget-one').widgetOne(); });
$(function() { $('.widget-two').widgetTwo(); });
$(function() { $('.widget-three').widgetThree(); });
$(function() { $('.widget-four').widgetFour(); });

Теперь перед тем, как вы меня об этом напишите, позвольте мне сказать, что я знаю, что в большинстве случаев (но не во всех) .widget-one является плохим селектором, так как в старых браузерах он получает все элементы в dom и проверяет класс .

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

Итак, следующие решения отсутствуют:

$(function() { $('#WidgetOne').widgetOne(); });

и

<span id="WidgetOne_12345">...</span>
<script type="javascript">
   $(function() { $('#WidgetOne_12345').widgetOne(); });
</script>

Мысли

Это не новая проблема, она существует с первого дня. Я до сих пор сбиваю с толку, как это трудно решить с помощью jQuery даже на этом уровне зрелости. Либо это, либо я упускаю что-то явно очевидное.

К сожалению, google-fu плохо справляется с этой задачей, поскольку все предлагают одну из двух вещей:

• обработчики событий jQuery .live() или .delegate(). Это просто страшно на фундаментальном уровне. .delegate() не так уж и плохо, но для этого требуется, чтобы плагин / виджет / элемент управления / независимо от того был полностью управляем событиями. Это будет работать во многих случаях наверняка, но не в других. Это также усложняет отслеживание и организацию кода. Я даже не буду вдаваться в .live(), для больших сложных сайтов всплывающее окно событий происходит медленно, и когда вы собираете достаточно компонентов вместе, список запросов для сопоставления становится большим, что делает каждое нажатие / фокус / любое событие постепенно медленнее в целом для всей страницы.
• Обходные решения, включающие плагины, такие как liveQuery , который, безусловно, является очень классным плагином, но в первую очередь кажется, что он предназначен для решения другой проблемы (проблема новых элементов, вносимых ajax / создание домена), и все равно будет постепенно увеличиваться по мере увеличения количества запросов, которые необходимо проверить.

Заключение

Там имеет , чтобы быть лучше, я знаю, что он должен быть. Я исчерпал свой гугл-фу по этому вопросу и до сих пор не могу найти идеи / концепции / примеры / обсуждения, которые являются более новыми, чем jQuery 1.3.2, или имеют в виду грандиозную картину. В идеальном мире это не было бы проблемой, потому что каждый использовал бы интеллектуальные браузеры с современными стандартами и приличным движком javascript, и .class запросы не занимали бы эоны и эоны, но, к сожалению, это не так.

Я ищу идеи о том, как справиться с этим, после того, как я разобрался со многими SO-вопросами, похожими на эти, и во многих статьях по различным методам jquery, я чувствую, что если информация там, она скрыта под многими ложными срабатываниями & " 101 лучший плагин jquery ", результаты которого появляются в любом поиске с помощью jQuery. Я знаю, кто-то там столкнулся с этим затруднительным положением.

Идеи, ссылки, примеры, все приветствуется, просто должен быть лучший способ.

Answer 1

просто мозговой штурм на макушке головы Я могу вспомнить одну вещь, которая уменьшит ваше время «выбора и инициализации», но может быть компромиссом боли во время разработки.Более того, вы не можете использовать params с этим методом, но если у вас есть ситуация, точно такая же, как описанная выше, это может стоить сделать.

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

структурируйте классы, как это в вашем HTML:

<div class="widget" widgetFunc="widgetOne"></div>
<div class="widget" widgetFunc="widgetTwo"></div>

и т. д.

и ваша функция инициализации jquery будет выглядеть следующим образом:

var $widgetInitializerElements = $('.widget');

$.each($widgetInitializerElements,function(){ 
    var initialize = window[$(this).attr('widgetFunc')];

    if(typeof initialize === 'function'){
        $(this).initialize(); 
    }
});

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

Answer 2

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

... Я знаю, что в большинстве случаев (но не во всех) .widget-one - это плохо селектор, как это будет в старых браузерах получить все элементы в домене и проверить для класса.

Это правда, но, может быть, все в порядке. Если вы видите:

• http://www.quirksmode.org/dom/w3c_core.html

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

Обработчики событий jQuery .live () или .delegate (). Это просто страшно на фундаментальном уровне.

Я не согласен (страшно?), Но лучшей моделью для большого приложения может быть публикация / подписка. Я очень успешно использовал это с Dojo в сложном приложении с пользовательским интерфейсом, и, похоже, есть несколько полезных плагинов для jQuery (например, http://www.novasoftware.com/download/jquery/publish-subscribe.aspx).. Это позволяет передавать сообщения о глобальных событиях без накладных расходов на делегирование. События легко помещаются в пространство имен, чтобы избежать конфликты в большом приложении. Да, оно определяется событиями, но это важно, если вы хотите поддерживать производительность в большом приложении.

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

$('p.widget-one')

вместо

$('.widget-one')