Skocz do zawartości

Rozkład kodu Google na czynniki pierwsze.


sgan
 Udostępnij

Rekomendowane odpowiedzi

Google udostępniło nam narzędzie do analityki internetowej, w szczegóły czy też jego funkcję nie będę się zagłębiał, wszystko można znaleźć na oficjalnej stronie.

Ja zagłębię się raczej w kod Javascript, który należy wkleić na swoją stronę, aby korzystać z Google Analytics.

Wygląda on w ten sposób:

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
Dla początkującego programisty jest kompletnie niejasny, dlatego spróbuję dziś przyjrzeć się mu bliżej. Pierwsze co można(lub nie) dostrzec to to, że jest to funkcja, która wywołuje się sama, sama podając sobie argumenty. Żeby opisać to jaśniej, pokażę to na przykładzie, napiszę prostą funkcję w Javascript, która doda do siebie dwa podane argumenty i wyrzuci komunikat z wynikiem, po czym wywołam ją podając jako argumenty 2 i 2. Forma prosta:
function dodaj(e, f) {

	var wynik = e + f;

	alert(wynik);

}


dodaj(2, 2);
Teraz forma podobna do kodu Google, funkcja wywołująca sama siebie:
(function(e, f) {

	var wynik = e + f;

	alert(wynik);

})(2, 2);
Jest to nic innego jak zaoszczędzenie miejsca, tak aby kod zajmował go jak najmniej. Wracając do kodu od Google, dodajmy do niego znaki białe(spacje, tabulatory) i spójrzmy jeszcze raz.
(function(i,s,o,g,r,a,m){

	i['GoogleAnalyticsObject']=r;

	i[r]=i[r]||function(){

		(i[r].q=i[r].q||[]).push(arguments)

	},

	i[r].l=1*new Date();

	a=s.createElement(o),

	m=s.getElementsByTagName(o)[0];

	a.async=1;

	a.src=g;

	m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
Dzięki temu możeby zauważyć już sporo rzeczy, międy innymi to, że funkcja przyjmuje 7 argumentów(i,s,o,g,r,a,m), a przy wywołaniu podane jest tylko 5. Ostatnie dwa są dodane po to, żeby nie deklarować zmiennych przy użyciu var, kolejna oszczędność miejsca. Następną rzeczą jaką zrobimy jest podstawienie argumentów do kodu oraz zmiana wskaźników na obiekty.

(function(){

	window.GoogleAnalyticsObject = 'ga';

	window.ga = window.ga || function(){

		(window.ga.q=window.ga.q||[]).push(arguments)

	},

	window.ga.l=1*new Date();

	var a=document.createElement('script'),

	var m=document.getElementsByTagName('script')[0];

	a.async=1;

	a.src='//www.google-analytics.com/analytics.js';

	m.parentNode.insertBefore(a,m)

})();
Teraz możemy zmienić różne użyte sztuczki dla minimalizacji kodu na coś bardziej czytelnego:
(function() {


	window.GoogleAnalyticsObject = 'ga';


	if(!('ga' in window)) {

		window.ga = function() {

			window.ga.push(arguments);

		};


		window.ga.q = [];

	}


	window.ga.l = (new Date()).getTime();


	var a = document.createElement('script');

	a.src = '//www.google-analytics.com/analytics.js';

	a.async = true;


	var m = document.getElementsByTagName('script')[0];


	m.parentNode.insertBefore(a, m);

})();

Czy ten kod jest czytelniejszy? Z całą pewnością, w razie czego pokomentujemy jeszcze wszystkie instrukcje.

(function() {

// zapisanie nazwy obiektu Analytics
window.GoogleAnalyticsObject = 'ga';

// sprawdzenie, czy obiekt Analytics nie jest zdefiniowany
if(!('ga' in window)) {

// definicja obiektu Analytics
window.ga = function() {

// dodanie elementów do kolejki
window.ga.push(arguments);
};

// utworzenie kolejki
window.ga.q = [];
}

// zapisanie aktualnego czasu
window.ga.l = (new Date()).getTime();

/*
utworzenie elementu

Mam nadzieję, że dzięki temu kod Google Analytics stał się dla kogoś jaśniejszy. ;)

Odnośnik do komentarza
Udostępnij na innych stronach

Problem wciąż nierozwiązany? Dodaj swoją odpowiedź

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto. Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
 Udostępnij

×