Как реализовать ненавязчивый javascript с динамическим контентом?

Question

Я пишу много динамически сгенерированного контента (разрабатываемого под PHP), и я использую jQuery, чтобы добавить дополнительную гибкость и функциональность для моих проектов.

Дело в том, что довольно сложно добавить JavaScript ненавязчивым способом. Вот пример:

Вы должны сгенерировать случайное число из div элементов с разной функциональностью, вызванной onClick. Я могу использовать атрибут на своих div элементах, чтобы вызвать функцию JS с параметром, но это просто плохое решение. Кроме того, я мог бы сгенерировать код jQuery вместе с каждым div в моем PHP for, но опять же это не будет абсолютно ненавязчивым.

Итак, каково решение в таких ситуациях?

Answer 1

Вам нужно добавить что-то в div, который определяет, какой тип поведения у них есть, а затем использовать jQuery для выбора этих div и добавить поведение. Один из вариантов - использовать атрибут класса, хотя, вероятно, это должно использоваться для представления, а не для поведения. Альтернативой будет атрибут rel, но обычно я нахожу, что вы также хотите указать разные CSS для каждого поведения, поэтому класс, вероятно, подходит в этом случае.

Так, например, предположим, что Вы хотите, четный и нечетный поведение:

<div class="odd">...</div> 
<div class="even">...</div> 
<div class="odd">...</div> 
<div class="even">...</div> 

Тогда в JQuery:

$(document).load(function() { 
$('.odd').click(function(el) { 
// do stuff 
}); 
$('.even').click(function(el) { 
// dostuff 
}); 
}); 

JQuery имеет очень мощный двигатель селектор, который может найти основанную на CSS основе селектор, а также поддержку некоторых XPath и собственных селекторов. Познакомьтесь с ними! http://docs.jquery.com/Selectors

Answer 2

С вашего вопроса немного сложно сказать, но, возможно, вы можете использовать разные селектора jQuery для настройки различных типов кликов? Например, у вас есть следующее:

<div class="section-1"> 
    <div></div> 
</div> 
<div class="section-2"> 
    <div></div> 
</div> 

Может быть, вы могли бы сделать следующее в JQuery:

$('.section-1 div').onclick(...one set of functionality...); 
$('.section-2 div').onclick(...another set of functionality...); 

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

Мне нужно будет узнать больше о специфике вашей ситуации, чтобы дать более целенаправленный совет, но, возможно, это поможет вам начать.

Answer 3

Я рекомендовал бы пренебрегая стандарты W3C и выписывая HTML-свойства на элементах, которые нуждаются в обработчики прикрепленные к ним:

Примечание: это не сломать рендеринг страницы!

<ul> 
    <li handler="doAlertOne"></li> 
    <li handler="doAlertTwo"></li> 
    <li handler="doAlertThree"></li> 
</ul> 

Объявите несколько функций:

function doAlertOne() { } 
function doAlertTwo() { } 
function doAlertThree() { } 

а затем с помощью JQuery, как так:

$("ul li").each(function() 
{ 
    switch($(this).attr("handler")) 
    { 
     case "doAlertOne": 
      doAlertOne(); 
      break; 

     case ... etc. 
    } 
}); 

быть прагматичным.

Answer 4

Я не знаю о JQuery, но я знаю, что инструментарий DOJO делает очень ненавязчивый Javascript возможным.

Посмотрите на пример здесь:

Демонстрационная динамически добавляет события чисто HTML таблицы на основе классов.

Другим примером является особенности поведения, описанные здесь: http://dojocampus.org/content/2008/03/26/cleaning-your-markup-with-dojobehavior/

Answer 5

Я рекомендовал бы использовать эту вещь под названием «Event delegation». Вот как это работает.

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

Обработчик событий, прикрепленный к этому div, получит объект события как один из его аргументов. Используя этот объект события, вы можете определить, какой элемент вызвал событие. Вы можете обновлять div любое количество раз: события, генерируемые дочерними элементами div, будут пузыряться до div, где вы можете их поймать и обработать.

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