Wiem, że to zła praktyka. Jeśli to możliwe, nie pisz takiego kodu.
Oczywiście zawsze znajdziemy się w sytuacjach, w których sprytny fragment wbudowanego kodu JavaScript może szybko rozwiązać problem.
Podążam za tym pytaniem, aby w pełni zrozumieć, co się dzieje (i potencjalne pułapki), gdy napisane jest coś takiego:
<a href="#" onclick="alert('Hi')">Click Me</a>
O ile wiem, funkcjonalnie jest to to samo, co
<script type="text/javascript">
$(function(){ // I use jQuery in this example
document.getElementById('click_me').onclick =
function () { alert('Hi'); };
});
</script>
<a href="#" id="click_me">Click Me</a>
Ekstrapolując z tego, wydaje się, że ciąg przypisany do atrybutu onclick
jest wstawiany w anonimowej funkcji, która jest przypisana do modułu obsługi kliknięcia elementu. Czy tak jest w rzeczywistości?
Ponieważ zaczynam robić takie rzeczy:
<a href="#" onclick="$(this).next().fadeIn(); return false;">Display my next sibling</a> <!-- Return false in handler so as not to scroll to top of page! -->
Co działa. Ale nie wiem, ile to hack. Wygląda podejrzanie, ponieważ nie ma żadnej funkcji, która jest zwracana!
Możesz zapytać, dlaczego to robisz, Steve? Inline JS to zła praktyka!
Cóż, jeśli mam być całkiem szczery, mam dość edytowania trzech różnych sekcji kodu tylko po to, aby zmodyfikować jedną sekcję strony, zwłaszcza gdy tylko prototypuję coś, aby zobaczyć, czy w ogóle zadziała. Jest to o wiele łatwiejsze, a czasem nawet ma sens, aby kod konkretnie powiązany z tym elementem HTML był zdefiniowany bezpośrednio w elemencie: Kiedy 2 minuty później zdecyduję, że to był okropny, okropny pomysł, mogę niszczyć cały div (lub cokolwiek innego ) i nie mam wielu tajemniczych okruchów JS i CSS w reszcie strony, spowalniających renderowanie nawet nieznacznie. Jest to podobne do koncepcji lokalizacji odniesienia, ale zamiast braków w pamięci podręcznej patrzymy na błędy i nadmiar kodu.