2008-09-28 11 views
6

Sprawdzanie kodu źródłowego pytaniem widzę na przykład:Dlaczego Stackoverflow wiąże dynamicznie działania użytkownika z javascript?

<a id="comments-link-xxxxx" class="comments-link">add comment</a><noscript>&nbsp;JavaScript is needed to access comments.</noscript> 

a następnie w źródle javascript:

// Setup our click events.. 
$().ready(function() {  
     $("a[id^='comments-link-']").click(function() { comments.show($(this).attr("id").substr("comments-link-".length)); });  
}); 

Wydaje się, że wszystkie wydarzenia są zbindowanych użytkownik kliknij w ten sposób.

Wady tego podejścia są oczywiste dla osób przeglądających witrynę bez javascript, ale jakie są zalety dodawania zdarzeń dynamicznie z javascript przez deklarowanie ich bezpośrednio?

Odpowiedz

18
  • Nie trzeba wpisać ten sam ciąg kółko w HTML (które, jeśli nic innego nie byłoby zwiększenie liczby literówek do debugowania)
  • można oddać HTML/CSS do projektanta, który nie musi posiadać żadnych umiejętności javascript
  • masz programową kontrolę nad tym, co callbacks nazywane są i kiedy
  • to bardziej elegancki, ponieważ pasuje do koncepcyjnego odległości między układem i zachowaniem
  • Łatwiej jest modyfikować i refaktoryzować

W ostatnim punkcie wyobraź sobie, że chcesz dodać ikonę "pokaż komentarze" w innym miejscu szablonu. Byłoby bardzo łatwo powiązać to samo wywołanie zwrotne z ikoną.

-1

Jedyną korzyścią, jaką widzę, jest zmniejszenie rozmiaru strony, a tym samym potrzeba mniejszego pasma.

Edycja: Ponieważ jestem cofany, niech wyjaśnię bardziej moją odpowiedź.

Chodzi mi o to, że używanie linku jako pustej kotwicy to tylko zła praktyka, nic więcej! Oczywiście oddzielenie JavaScriptu logiki od HTML jest świetne. Oczywiście łatwiej jest refaktoryzować i debugować. Ale tutaj jest to sprzeczne z główną zasadą dyskretnego JavaScript: Gracefull degradation!

Dobrym rozwiązaniem byłoby wywołanie komentarzy: jeden za pomocą REALnego linku, który wskaże prostą stronę z komentarzem i drugą, która zwraca tylko komentarze (w notacji JSON lub podobnym formacie) z celem wywołania przez AJAX do wstrzyknięcia bezpośrednio na stronie głównej.

W ten sposób metoda wykorzystująca metodę AJAX powinna również zadbać o anulowanie drugiego połączenia, aby uniknąć przekierowania użytkownika do prostej strony. To byłby dyskretny JavaScript. Tutaj jest to tylko JavaScript, który został użyty do niewłaściwego tagu kotwicy.

+1

Nie wiem, dlaczego rezygnujesz z tego - żaden użytkownik końcowy nie skorzysta z tego, co zostało zrobione, ponieważ, jak już wspomniałeś, linki są całkowicie bezużyteczne bez JavaScript. –

1

W ten sposób można uzyskać lekką stronę, na której można obsługiwać wszystkie czynności za pośrednictwem javascript. Zamiast korzystać z mnóstwa różnych adresów URL i działań osadzonych na stronie, wystarczy napisać jedną funkcję javascript, która znajdzie link, i podpiąć go, bez względu na to, gdzie na stronie zrzucisz ten link "komentarz". Oszczędza ładunki z powtarzającej html :)

4

Dołączanie zdarzeń za pośrednictwem interfejsu API zdarzeń zamiast do znacznika jest rdzeniem dyskretnego javascript. Zapraszamy do lektury this wikipedia article, aby uzyskać pełny przegląd tego, dlaczego dyskretne kodowanie javascript jest ważne.

W ten sam sposób, w jaki oddzielasz style od markowania, chcesz oddzielić skrypty od marży, w tym wydarzeń.

+1

Powiedziałbym, że to jest bardziej nieagresywny JavaScript. Niestety, przepełnienie stosu zaniedbuje prawdziwy dyskretny JavaScript, czyli tworzenie stron internetowych, które działają dla wszystkich niezależnie od tego, czy mają dostęp do JavaScript, czy też są włączone. –

+2

Są technicznie poprawne, ale uważam, że dni catering dla użytkowników niepełnosprawnych javascript dobiegają końca. Podobnie jak wsparcie dla IE6, jest to kolejna przestarzała przechowalnia, która powstrzymuje sieć. –

2

widzę to jako jeden z podstawowych zleceniodawców dobrego rozwoju oprogramowania:

separacji prezentacji i logiki.

HTML/CSS to zasadniczo język prezentacji. JavaScript służy do tworzenia logiki. Dobrą praktyką jest oddzielenie logiki od prezentacji, jeśli to możliwe.