Zablokowane Rozkład kodu Google na czynniki pierwsze.

[Burner]

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:



[code](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');[/code]



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:


[code]function dodaj(e, f) { var wynik = e + f; alert(wynik); } dodaj(2, 2);[/code]



Teraz forma podobna do kodu Google, funkcja wywołująca sama siebie:


[code](function(e, f) { var wynik = e + f; alert(wynik); })(2, 2);[/code]



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.


[code](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');[/code]



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.


[code](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) })();[/code]



Teraz możemy zmienić różne użyte sztuczki dla minimalizacji kodu na coś bardziej czytelnego:




[code](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); })();[/code]


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





[code](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 [/code]




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



by smigieleQ