Czy osadzanie JavaScript w treści HTML jest złą praktyką?

Question 1

Zespół, nad którym pracuję, nabrał zwyczaju używania <script>tagów w przypadkowych miejscach treści naszych stron HTML. Na przykład:

<html>
    <head></head>
    <body>
        <div id="some-div">
            <script type="text/javascript">//some javascript here</script>
        </div>
    </body>
</html>

Nie widziałem tego wcześniej. Wydaje się, że działa w kilku przeglądarkach, które testowałem. Ale z tego co wiem, umieszczanie tagów skryptów w takich miejscach jest niewłaściwe.

Czy się mylę? Jak źle jest, że umieszczamy tagi skryptu w znacznikach DIV? Czy są jakieś problemy ze zgodnością przeglądarek, o których powinienem wiedzieć?

Question 2

To jest całkowicie poprawne.

Nie chciałbyś umieszczać tam wielkich, dużych bloków kodu pomieszanych w znacznikach (lepiej użyć zewnętrznych skryptów), ale może to być przydatne do:

dodać dodatkowe informacje wiążące w celu stopniowego ulepszania (gdy dane te są trudne do dopasowania do nazwy klasy lub innego podejścia do ukrywania rozszerzonych informacji w atrybutach); lub
gdzie konieczne jest jak najszybsze uruchomienie rozszerzenia opartego na skryptach (zamiast czekać na załadowanie okna / gotowość dokumentu). Przykładem może być autofokus, który może irytować, jeśli zostanie wystrzelony zbyt późno.

Możesz myśleć o <style>elementach, które są niedozwolone <body>(chociaż większość przeglądarek mimo wszystko na to pozwala).

Question 3

Właściwie to dość powszechne. Na przykład kod śledzenia Google Analytics używa tylko tej składni:

<script type="text/javascript">
  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

Jeśli to wystarczy dla Google ...

Question 4

Jest prawidłowy i, w zależności od frameworka po stronie serwera i natury kodu, czasami bardzo trudny do uniknięcia.

Question 5

Jak wspomniało kilka osób, jest ważny, działa i jest szeroko stosowany.

Najlepsze praktyki w zakresie zalecanym przez semantykę (lub przynajmniej używane do zalecania) to umieszczanie tagów skryptu wewnątrz nagłówka.

Bardziej nowoczesne najlepsze praktyki, które uwzględniają wydajność, zalecają umieszczanie tagów skryptów (zewnętrznych i wbudowanych) w prawym dolnym rogu przed tagiem body, aby umożliwić całkowite renderowanie znaczników przed wykonaniem kodu JavaScript.

Aby kod był łatwiejszy do zrozumienia i utrzymania, zalecany jest „dyskretny JavaScript”, w którym kod znajduje się w pliku zewnętrznym i wiąże zdarzenia z DOM (dyskretny JavaScript Google).

Jednym z przypadków, w których warto mieć wbudowany JavaScript, jest zainicjowanie zmiennych z wartościami, które istnieją tylko po stronie serwera, które zostaną później wykorzystane przez zewnętrzny kod JavaScript.

Question 6

Wolę umieszczać odniesienia do zewnętrznych skryptów w głowie oraz skryptów, które uruchamiają i inicjalizują widżety i inne elementy w treści.

Problem, na który bardzo łatwo się natknąć, polega na tym, że element skryptu w treści nie ma dostępu do elementów, które występują po nim. Powiązany nieprzyjemny problem ze zgodnością przeglądarki polega również na tym, że IE nie zezwala elementom skryptów na modyfikowanie elementu, w którym się znajdują. Więc jeśli masz to:

<div id="foo">
  <script type="text/javascript">
    document.getElementById("foo")... // do something to it
  </script>
</div>

IE nie polubi Twojej strony. Stare wersje IE dawały bardzo tajemnicze komunikaty o błędach, a nawet pustą całą stronę, ale IE8 wydaje się wyświetlać opisowy komunikat o błędzie.

Dopóki upewnisz się, że twoje skrypty mają dostęp tylko do DOM, do którego dostęp jest bezpieczny, nie sądzę, że jest złe umieszczanie elementów skryptu w treści. W rzeczywistości, IMHO, umieszczanie skryptów inicjujących widżety po powiązanych elementach może być bardziej czytelne niż umieszczanie wszystkiego w jednym miejscu (i uważam, że może to również spowodować, że będą działać wcześniej, co sprawi, że rzeczy będą mniej przeskakiwać podczas ładowania strony).

Question 7

To jest ważne!

Możesz użyć:

<script type="text/javascript">
    //<![CDATA[

    // Some JavaScript code that perfectly validates in the W3C validator

    //]]>
</script>

Nie sądzę, aby można było powiedzieć, czy jest to ogólnie zła praktyka. Musisz powiedzieć w tej sprawie. Ale na pewno dobrze jest mieć cały kod JavaScript w tym samym miejscu. To trochę bałaganiarskie, jeśli masz małe fragmenty kodu JavaScript w całym pliku HTML.

Question 8

Nie widziałem tego wcześniej. Wydaje się, że działa w kilku przeglądarkach, które testowałem. Ale z tego co wiem, umieszczanie tagów skryptów w takich miejscach jest niewłaściwe.

Jest to poprawne, ale nie jest dobrą (ani zalecaną) praktyką.

Czy się mylę? Jak źle jest, że umieszczamy tagi skryptu w znacznikach DIV? Czy są jakieś problemy ze zgodnością przeglądarek, o których powinienem wiedzieć?

Nie ma problemu z umieszczeniem <script>pod innymi elementami (ale powinno być wewnątrz <head>lub <body>). Nie ma również problemu z kompatybilnością przeglądarki, jednak osadzanie skryptów JS na stronach internetowych ma poważne wady (jak / dlaczego są uważane za złe) :

Dodaje grubość strony
Trudność (lub prawdopodobnie niemożliwa) do minifikacji
Nie można przenieść ani używać na innych stronach
Nie można przechowywać w pamięci podręcznej (należy pobierać za każdym razem, gdy strona jest ładowana)
Brak separacji obaw (trudniejszy do utrzymania)

Question 9

Jednak jest to również dobre, ponieważ wiesz, że kod JavaScript potrzebny do sekcji HTML będzie tam dla niej. Zamiast potwierdzać i tworzyć jakieś dołączenia na początku pliku.

Więc zamiast „jeśli zamierzasz używać tego HTML, upewnij się, że importujesz xyz.js”, możesz po prostu dołączyć HTML i skończyć z nim.

Więc niekoniecznie jest to straszne zło. Może nie spektakularnie niesamowity, ale też nie straszny. To zależy od intencji.

Question 10

Zobacz interfejs użytkownika Yahoo, aby zapoznać się z najlepszymi praktykami: http://developer.yahoo.com/performance/rules.html (JavaScript na dole strony)

Question 11

To z pewnością legalne; Widziałem to na kilku stronach , na przykład w Exforsys .

Teraz jest to strona z samouczkami pokazująca podstawy HTML i JavaScript, więc w tym kontekście jest to całkowicie zrozumiałe. Jednak nie chciałbym widzieć tego w kodzie produkcyjnym dla czegoś więcej niż zwykłego lub dwóch instrukcji. Nie widząc, czym zastąpiłeś // Some JavaScript code here, nie chciałbym komentować.

Nie powinno być jednak żadnych problemów z przeglądarką.

Question 12

Można dodać <script> body, ale Internet Explorer naprawdę tego nie lubi. Więc aby być bezpieczniejszym, upewnij się, że masz swoje skrypty wewnątrz tagu <head>.

To naprawdę spowodowało spustoszenie (szczególnie w Internet Explorerze) w projekcie, nad którym pracujemy.

Question 13

Zakładam, że Twój zespół robi to albo dlatego, że chce dynamicznie wstawić skrypt, albo że pisze skrypt, który będzie uruchamiany po załadowaniu strony.

Nie powiedziałbym, że jest coś złego w robieniu tego, gdy jest to ABSOLUTNIE KONIECZNE (o ile jest w bloku CDATA), ale poza tym zalecałbym Twojemu zespołowi korzystanie z biblioteki skryptów, takiej jak Prototype lub jQuery, i zachowywanie skrypty zewnętrzne w stosunku do strony. Zwykle jest to czystsze, a biblioteki czasami wymuszają odrobinę czystości w kodzie, co, jak założyłem, obecnie się nie dzieje.

Nie uruchamiałbym również żadnych czasochłonnych funkcji w tagach skryptu wbudowanego, ponieważ zdarzają się one podczas ładowania strony, a jak stwierdził Jason powyżej, mogą spowolnić ładowanie strony. Wszystkie biblioteki skryptów mają zgrabne funkcje, które pozwalają wykonywać czynności przy ładowaniu strony i dają możliwość uruchomienia ich w momencie załadowania strony, na przykład po załadowaniu DOM.

Question 14

To jedna z wielu, wielu najlepszych praktyk, która dotyczy zarówno poprawy wydajności, jak i poprawy podejścia do programowania.

Ostatecznie w tworzeniu stron internetowych najważniejsze jest uzyskanie produktu!

Question 15

Jest całkowicie poprawny, chociaż może zaszkodzić konserwacji. Zobacz także Gdzie należy umieścić tagi <script> w znacznikach HTML? i dlaczego wywołanie tej funkcji jQuery nie działa w przeglądarce Firefox? .

Question 16

Często powtarzanym zaleceniem, aby skrypty były przechowywane w nagłówku, jest zapewnienie, że skrypt zostanie załadowany przed jego wywołaniem. Jest to problem tylko w przypadku niektórych programów obsługi zdarzeń. W przypadku innych typów skryptów nie ma to znaczenia, a dla niektórych (np. Document.write) nie ma sensu.

Question 17

Jeśli masz edytor, który obsługuje jednocześnie składnię HTML i JavaScript. A jeśli chcesz najpierw przeczytać kilka wierszy kodu HTML, a następnie cpde JavaScript ... jasne. Idź po to.

Question 18

Kilka rzeczy:

Jest całkowicie poprawny pod względem kodu.
Jest to całkowicie niezalecane.

Takie postępowanie znacznie spowalnia ładowanie strony, ponieważ kod JavaScript musi zostać wykonany, zanim reszta strony będzie mogła zostać wyrenderowana. Jeśli wykonujesz dużo pracy w tym kodzie JavaScript, Twoja przeglądarka może się zawiesić. Należy starać się (jeśli to możliwe) ładować kod JavaScript dynamicznie i na końcu strony (najlepiej przed </body>tagiem).

Kup i przeczytaj wysokowydajny JavaScript . Zmieni to sposób, w jaki piszesz kod JavaScript.