Ako správne vkladať javascript súbory do view
publikované: od: Tibor PiňoUrčite už každý z nás pracoval s javascriptom a vkladal javascriptové súbory do view. Javascript nám v súčasnosti poskytuje čoraz väčšiu funkcionalitu, javascriptové súbory majú čoraz väčšiu veľkosť a preto oprávnene nastáva otázka, ako efektívne vkladať javascriptové súbory iba do stránok, v ktorých daný javascript používame. CakePHP má na túto otázku jednoduchú odpoveď.
V súčasnosti je veľmi populárne a pravdu povediac aj veľmi užitočné používať javascript a rôzne javascriptové frameworky. Keďže tieto frameworky majú veľmi dobrú funkcionalitu, ruka v ruke s touto funkcionalitou ide aj veľkosť týchto frameworkov. Preto je nevyhnutné vkladať dané javascriptové knižnice len do stránok, v ktorých funkcionalitu týchto knižníc využívame. Možno si poviete, že je to predsa samozrejmé, avšak máme v podstate dve možnosti, ako môžeme tieto knižnice do našich stránok vložiť, pritom jednu z nich by som označil za veľmi neefektívnu.
Javascript v layoute
Prvá možnosť je vkladať naše javascriptové súbory priamo do nášho layoutu následovne
<?php echo $javascript → link(‚effects.js‘); ?>Týmto som do nášho layoutu (a samozrejme aj do všetkých stránok, pretože každá stránka sa skladá okrem iného aj z daného layoutu, takže dané javascriptové súbory sa budú načítavať pri zobrazení každej našej stránky) vložil javascriptový súbor effects.js, ktorý sa stará o rôzne pôsobivé efekty na stránke. Nevýhoda tohto spôsobu vkladania sa môže prejaviť na stránkach, ktoré vôbec tieto efekty využívať nebudú a tak sa zbytočne bude načítavať veľké množstvo nevyužitých dát. Poďme sa pozrieť na efektívnejší spôsob.
Javascript v konkrétnej stránke
Druhou možnosťou a vo väčšine prípadoch oveľa efektívnejšou je vkladať javascriptové súbory priamo do stránok, kde ich potrebujeme a nie do všeobecného layoutu, ktorý používa každá stránka. CakePHP nám ponúka efektívne riešenie. Do súboru app/views/articles/index.ctp chceme vložiť súbor effects.js, urobíme to následovne
<? $this->addScript(‚effects‘, $javascript->link(‚effects‘)); ?>Nesmieme ešte zabudnúť do nášho layoutu doplniť nasledovný riadok, ktorý sa nám postará o vloženie obsahu z metódy addScript do nášho layoutu, ale nie pre každú stránku, ale iba pre stránku, v ktorej sme použili metódu addScript
<head> <? echo $scripts_for_layout; ?> </head>Takže ako sme si mohli všimnúť vyššie, na vloženie javascriptu do konkrétnej stránky sme použili funkciu addScript() a vložili sme do nášho layoutu direktívu <? echo $scripts_for_layout; ?> ktorá sa postará o vloženie obsahu pochádzajúceho z funkcie addScript.
Týmto sme u konca. Niektorí z vás si možno povedia, že sa týmto netreba vôbec zaoberať, ale keď si predstavíme, že dnes je čoraz populárnejší mobilný internet, ktorý je väčšinou obmedzený dátovými limitmi alebo si pozrieme výsledky výskumu ktorý hovorí, že ak sa nám stránka nenačíta do 4 sekúnd opustí ju každý tretí užívateľ, a my zbytočne načítavame stovky KB nevyužiteľných dát, je myslím si tento problém na mieste.