Jak zaimplementować dyskretny javascript z generowaniem dynamicznej zawartości?

Question

Piszę dużo dynamicznie generowanych treści (rozwijających się w PHP) i używam jQuery, aby dodać dodatkowej elastyczności i funkcjonalności do moich projektów.

Chodzi o to, że trudno jest dodać JavaScript w dyskretny sposób. Oto przykład:

Należy wygenerować losową liczbę elementów div, każdy z inną funkcjonalnością uruchamianą onClick. Mogę użyć atrybutu onclick na moich elementach div, aby wywołać funkcję JS z parametrem, ale jest to po prostu złe rozwiązanie. Również mógłbym wygenerować kod jQuery wraz z każdym div w mojej pętli PHP for, ale potem znowu nie będzie to całkowicie dyskretne.

Jakie jest rozwiązanie w takich sytuacjach?

Answer 1

Musisz dodać coś do elementów div, które określa, jaki rodzaj zachowania mają, a następnie użyj jQuery, aby wybrać te elementy div i dodać zachowanie. Jedną z opcji jest użycie atrybutu class, chociaż prawdopodobnie powinno to być używane do prezentacji, a nie do zachowania. Alternatywą byłby atrybut rel, ale zazwyczaj stwierdzam, że chcesz również określić różne CSS dla każdego zachowania, więc klasa jest prawdopodobnie w porządku w tym przypadku.

Tak na przykład, pozwala zakładać, chcesz dziwne, a nawet zachowanie:

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

Następnie w jQuery:

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

jQuery ma bardzo mocny silnik wybieraka, które mogą znaleźć w oparciu o jakiekolwiek CSS w oparciu selektora, a także obsługuje niektóre XPath i własne selektory. Poznać ich! http://docs.jquery.com/Selectors

Answer 2

Ciężko powiedzieć z twojego pytania, ale może możesz użyć różnych selektorów jQuery, aby skonfigurować różne zachowania kliknięć? Na przykład, że masz następujące elementy:

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

Być może wykonać następujące czynności w jQuery:

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

Zasadniczo zdecydować na podstawie kontekstu, co musi się zdarzyć. Można również wybrać wszystkie elementy div i przetestować pod kątem elementu nadrzędnego lub podrzędnego, aby określić, jakie funkcje uzyskują.

Będę musiał dowiedzieć się więcej na temat konkretnej sytuacji, aby udzielić bardziej ukierunkowanej porady, ale może to ci pomoże.

Answer 3

Polecam lekceważąc standardy W3C i wypisywanie HTML właściwości na elementach, które potrzebują ładowarki dołączone do nich:

Uwaga: będzie nie przełamać renderowania strony!

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

zadeklarować kilka funkcji:

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

a następnie użycie jQuery tak:

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

     case ... etc. 
    } 
}); 

być pragmatyczni.

Answer 4

Nie wiem tak naprawdę o JQuery, ale wiem, że zestaw narzędzi DOJO sprawia, że ​​JavaScript jest bardzo dyskretny.

Spójrz na przykład tutaj:

Demo dynamicznie dodaje zdarzenia czysto html tabeli opartej na klasach.

Innym przykładem jest zachowanie, cechy opisane tutaj: http://dojocampus.org/content/2008/03/26/cleaning-your-markup-with-dojobehavior/

Answer 5

Polecam korzystanie z tego coś, co nazywa „Event delegation”. Tak to działa.

Tak więc, jeśli chcesz zaktualizować obszar, na przykład div, i chcesz poradzić sobie z wydarzeniami dyskretnie, dołączasz obsługę zdarzeń do samego div. Użyj dowolnego systemu, który wolisz. Załącznik zdarzenia może się zdarzyć w dowolnym momencie, niezależnie od tego, czy zaktualizowałeś div, czy nie.

Program obsługi zdarzenia dołączony do tego elementu div odbierze obiekt zdarzenia jako jeden z jego argumentów. Za pomocą tego obiektu zdarzenia można określić, który element wyzwalał zdarzenie. Możesz zaktualizować div dowolną ilość razy: zdarzenia generowane przez dzieci div będą się pojawiać w div, gdzie możesz je złapać i obsłużyć.

To także okazuje się być ogromną optymalizacją wydajności, jeśli myślisz o dołączaniu wielu procedur obsługi do wielu elementów wewnątrz elementu div.