2013-01-14 3 views
19

Powiel możliwe:
Where to place Javascript in a HTML file?
Should I write script in the body or the head of the html?Kiedy umieszczasz JavaScript w ciele, w głowie i przy użyciu doc.load?

Zawsze zastanawiałem się, głównie dlatego, że podczas tworzenia stron zawsze popaść w kłopoty, w oparciu o następujące rzeczy:

Kiedy piszesz javascript

  • W <head>
  • W <body>
  • z $(document).ready()

mogę być głupie, ale miałem kilka razy, kiedy mój JavaScript (/ jQuery) nie został zrealizowany z powodu niewłaściwe miejsce lub polecenie "tak" lub "nie" doc.ready(). Tak naprawdę się zastanawiam.

samo dotyczy jQuery i polecenia „var”

+3

Dobrze 'var' jest rzeczą, która jest poważnie nie tak jak inni ... – Pointy

+0

See [ta odpowiedź] (http://stackoverflow.com/a/10661977/575527) – Joseph

+0

Do pointy, widziałem [var ] napisane też w głowie i ciele, więc zastanawiałem się, czy są jakieś różnice. Mark Schultheiss, Pytam o różnice, nie o to, czy fragment scenariusza powinien być w głowie czy ciele. To trochę inaczej. W każdym razie dzięki. –

Odpowiedz

14

$(document).ready() po prostu pewność, że wszystkie elementy DOM są ładowane zanim twój JavaScript jest załadowany.

Kiedy to nie ma znaczenia

Nie czekając na to wydarzenie do ognia, może skończyć się manipulować elementów DOM lub style, które są jeszcze istnieć na stronie. Zdarzenie DOM ready pozwala również na większą elastyczność w uruchamianiu skryptów w różnych częściach strony. Na przykład:

<div id="map"></div> 
<script type="text/javascript">document.getElementById('map').style.opacity = 0;</script> 

będzie działać, ponieważ div został załadowany przed uruchomieniem skryptu. W rzeczywistości możesz uzyskać numer pretty good performance improvements, umieszczając swoje skrypty na dole strony.

Kiedy to ma znaczenie

Jednak jeśli ładowanie skryptów w elemencie <head>, większość DOM nie załadowany. Ten przykład nie zadziała:

<script type="text/javascript">document.getElementById('map').style.opacity = 0;</script> 
<div id="map"></div> 

nie będzie, ponieważ div mapy nie został załadowany.

Bezpieczne rozwiązanie

Można tego uniknąć, po prostu poczekać, aż cała DOM został załadowany:

<script type="text/javascript">$(document).ready(function() { 
    document.getElementById('map').style.opacity = 0; 
}); 
</script> 
<div id="map"></div> 

Istnieje wiele articles że wyjaśnienia tego, jak również samego jQuery documentation.

+0

Gdzie kończy się ładowanie go w zewnętrznym arkuszu stylów? – Hashim

11

przez nowoczesne „najlepszych praktyk”, to tak:

  • skrypty umieszczone w <head> kiedy powinny się zdarzyć, zanim strona zacznie być renderowane. Przykładami są biblioteki HTML shim lub Modernizr.
  • Umieszczaj skrypty w "gotowych" modułach obsługi, gdy istnieje ograniczona kontrola nad sposobem importowania skryptu. Takie rzeczy, jak narzędzia, które można umieścić na stronie w celu dyskretnego dodawania funkcji, zwykle używają "gotowych" procedur obsługi, ponieważ nie mogą być pewni, jak zostaną użyte.
  • Umieść skrypty na końcu <body>, jeśli możesz sobie z tym poradzić we wszystkich innych przypadkach.

Czasami pojawiają się zależności na stronach, które wymagają rzeczy, które w przeciwnym razie chciałbyś załadować na końcu elementu body. Jest to niepożądana sytuacja, ale jeśli nie możesz tego uniknąć, możesz wymusić załadowanie skryptów do <head> zamiast na końcu .

Dobrze jest załadować rzeczy na końcu dokumentu, ponieważ przeglądarki oceniają zawartość tagów <script> po ich załadowaniu. (Istnieją pewne "nowoczesne" sposoby uniknięcia tego, ale to wkracza na bardziej skomplikowane terytorium.)

Decyzja o tym, kiedy używać "gotowych" procedur obsługi (lub, w tym przypadku, procedur obsługi ładunków) jest trochę inna niż decyzja o umieszczeniu znacznika <script>. Jeśli masz widżety wewnątrz strony z systemu szablonów po stronie serwera, które generują (niepożądane, ale co możesz zrobić?) Na przykład odwołania do jQuery, musisz zaimportować jQuery na górze strony, nawet jeśli inny kod może odroczyć inicjalizację do "gotowych" programów obsługi. Oznacza to, że decyzja o tym, kiedy użyć "gotowy", ma związek z tym, czy skrypt jest gotowy do importowania na stronę we właściwym miejscu, czy też chce zapewnić, że dzieje się to bez względu na to, gdzie jego znacznik <script> jest umieszczony.

6

Jest to kwestia, kiedy potrzebny jest kod do wykonania.

Jeśli zamierzasz manipulować drzewem DOM (np. Przesuń elementy dookoła/show-hide itp.) I umieścisz swój kod w nagłówku dokumentu, twoje elementy nie będą tam, kiedy twój kod zostanie wykonany, dlatego twoje kod nie działa.

W takim przypadku można umieścić swój kod w nagłówku dokumentu i wywołać ją, gdy DOM dokument jest gotowy, z $(document).ready()

Umieszczenie kodu na końcu dokumentu jest rzadko konieczne, jeden raz mogę pomyśl o przycisku Google plus +1, który wymaga umieszczenia skryptu po ostatnim przycisku +1, więc po prostu przyklej go do końca dokumentu, aby mieć pewność.

+2

Subskrybuję tę metodologię. Wiem, że "nowoczesnym" sposobem jest umieszczanie plików JS na końcu ciała. Ale jeśli wydajność nie jest krytyczna dla misji lub oczekuje się, że użytkownicy będą używać starszego sprzętu/oprogramowania, nie ma nic złego w umieszczaniu plików JS w głowie. W rzeczywistości użytkownicy mogą nawet nie zauważyć różnicy w wydajności.Dla utrzymania i czystości wolę zachować pliki JS w głowicy lub ładować je asynchronicznie do głowicy. Jeśli jednak strona zawiera tylko waniliowy JS, mogę załadować pliki JS na końcu treści. – user3621633

Powiązane problemy