Forum PHP.pl > [JavaScript]Umieszczanie kodu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript]Umieszczanie kodu

djtomaszq

9.08.2015, 09:12:30

Zaczołem naukę jquery i mam takie proste pytanie. Wiem, że kod umieszcza się w sekcji <head> </head> jeśli zacznę pisać wiele funkcji jquery to czy jest jakieś znaczenie czy będę pisał poprostu jeden kod pod drugim czy też można w head includować jakis plik w którym będą tylko kody funkcji jquery ?

np. mam w index.php

[PHP] pobierz, plaintext 
<head>
 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
 
<script type="text/javascript">
	$(document).ready(function()
	{
		$("#tom").click(function()
		{
			$("h1").css("color","#12FA56").hide(2000);
		});
 
	});
 
$(document).ready(function()
	{
		$("h2").click(function()
		{
			$("h2").css("color","red");
		});
 
	});
</script>
 
$(document).ready(function()
	{
		$("#przycisk").click(function()
		{
			$("#logo").css("color","gold");
		});
 
	});
 
</head>
[PHP] pobierz, plaintext

i jeszcze z 10 takich i innych kodów i czy nie lepiej / (czy tak jest dobrze) zrobić tak:

[PHP] pobierz, plaintext 
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
 
include 'jquery.php';
</head>
[PHP] pobierz, plaintext

goartur

9.08.2015, 09:25:46

Chyba najlepiej jest poprostu dodac skrypt do pliku jquery.js
i nastepnie w index uzyc:

[HTML] pobierz, plaintext 
<script src="jquery.js"></script>
[HTML] pobierz, plaintext

Skie

9.08.2015, 09:39:25

Zawsze lepiej jest zmniejszać liczbę requestów do serwera - każdy plik JS ładowany w ten sposób - to kolejny request. Dlatego opcja nr2 to jedyna słuszna opcja.

Dodatkowo, w większych projektach po stronie serwera robi się to tak, że wszystkie pliki *.js, które projekt używa są sklejane razem w jeden wynikowy plik, który jest wysyłany do przeglądarki.

Comandeer

9.08.2015, 12:40:00

No to trochę teraz zamieszam…

A jeśli strona stoi na HTTP/2 i można zastosować push? Wówczas nie ma znaczenia de facto ile plików będziemy mieli. Dodatkowo wklejenie wszystkiego w head nie działa domyślnie z aplikacjami stojącymi na serwerach z CSP.

Sensowny sposób, który jest dobrym kompromisem, to to, co proponuje H5BP: dwa pliki JS. jQuery ciągnięte z CDN oraz nasz lokalny plik z kodem JS, zminifikowany. Jeśli będziemy jQuery ciągnąć z CDN Google jest szansa, że user ten plik już ma, więc zostanie pobrany z cache. Natomiast zostanie dociągnięty tylko drugi plik. Oczywiście obydwa powinny być na końcu body, nie zaś w head (w head jedynie asynchroniczny kod statystyk można wstawić) → https://developer.yahoo.com/performance/rules.html#js_bottom

Przykład z H5BP: https://github.com/h5bp/html5-boilerplate/b.../index.html#L25

Inline'ować kod JS można jeśli strona spełnia trzy warunki:
1) nie stoi na CSP
2) kodu JS nie jest za dużo
3) jest on zminifikowany
Wówczas i tak lepiej inline'ować na końcu body (żeby strona zaczęła się renderować jak najszybciej).

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.