Kanał ATOM
Autor wpisu: singles, dodany: 24.03.2011 18:26, tagi: javascript, php, zend_framework
W dzisiejszym wpisie z serii ZFQT chciałbym przybliżyć temat helperów z rodziny head[type]. Oprę się na przykładzie headScript, ponieważ jest on jednym z najczęściej używanych helperów podczas tworzenia aplikacji ZF. Służy do zarządzania/dołączania skryptów JS w ramach naszej aplikacji.
Niektórzy powiedzą pewnie:
Po co mi jakaś klasa do dołączania skryptów? To przecież takie proste jest.
W przypadku większych projektów zdarza się, że posiadamy jeden/dwa główne skrypty – najczęściej jest to jakiś framework JS + biblioteka UI. Jednak, niektóre ze stron naszej aplikacji wymagają specyficznego dla siebie kodu. A dołączanie wszystkich potrzebnych plików dla każdej strony, nawet jeśli nie są one tam wykorzystywane, ciężko nazwać postępowaniem rozsądnym. Najlepiej byłoby załączać najczęściej używane pliki w głównym layoucie, a specyficzne skrypty tylko w przypadku niektórych akcji.
Jeśli by się głębiej nad tym problemem zastanowić, to fajnie byłoby mieć taki „koszyk”, do którego można by wrzucać potrzebne skrypty – w zależności od potrzeb – podczas wykonywania kodu, a wyświetlać je na samym końcu. W takim właśnie celu powstał helper headScript w ZF (oraz jego „bracia”). Konkretniej mówiąc, powstał helper placeholder, po którym wspomniane helpery head dziedziczą. Ich działanie (w skrócie) polega właśnie na agregowaniu tekstu/kodu/danych. Dobre wyjaśnienie znajdziecie w dokumentacji do ZF – jest tam także lista wszystkich klas dziedziczących po placeholder.
Nieprawidłowa kolejność skryptów w przypadku headScript
Jest jeden konkretny powód, dlaczego napisałem, że oprę się na helperze headScript. Otóż to, w przeciwieństwie do jego „braci”, w jego przypadku ważna jest kolejność, w jakiej skrypty dołączone. Prosty przykład – mamy jQuery, jQueryUI oraz kawałek kodu, który wspominane biblioteki wykorzystuje. Po szybkim przejrzeniu dokumentacji pierwsze podejście będzie wyglądało pewnie tak:
<?php echo $this->doctype(Zend_View_Helper_Doctype::HTML5); ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>SampleApp</title> </head> <body> <p>[menu] | [menu] | [menu] | [menu] | [menu] | [menu]</p> <?php echo $this->layout()->content ?> <!-- scripts --> <?php echo $this->headScript()->appendFile('http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js') ->appendFile('ttps://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js'); ?> </body> </html> //application/views/index/index.phtml <div id="dialog-content" title="Basic dialog"> <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> </div> <?php $this->headScript()->appendScript(<<<JS $(document).ready(function( //RB używamy pluginu dialog z jQuery UI. $('#dialog-content').dialog(); )); JS );
Dlaczego dołączyłem skrypty na samym końcu? Ponieważ jest to dobra praktyka prowadząca do powstawania wydajniejszych aplikacji – patrz Yahoo Developer Network.
Po uruchomieniu takiego kodu otrzymamy jednak błąd.
Błąd JS przy nieprawidłowej kolejności skryptów
Zend Framework najpierw dołączył kod z widoku, a następnie te zdefiniowane w layoucie. Patrz screen:
Każdy programista PHP jest bardzo przyzwyczajony do wyglądu głównej strony projektu PHP. Strona nie zmieniała się mimo upływu lat (ostatnie zmiany w 2002), zmianie mody. Ostatnio nawet strona domowa Debiana zrobiła się bardziej trendy.
