Inline javascript with Phalcon

지금까지 Phalcon을 사용하면서 javascript를 include를 하는 것은 volt에서도, action에서도 필요에따라 사용해 왔었는데, 문제는 inline javascript 가 문제다.

예를 들면, 보통 dependency에 의하여 특정 plugin이 먼저 로드가 되고 해당 plugin을 사용하는 inline 스크립트가 이후에 위치되어야 한다. 이 맥락과 일치하는지는 모르겠지만 아래의 그림은 현 페이지의 소스를 스샷한 것이다.

예를 들면 jquery를 먼저 로드한 후 (document).ready() 스크립트가 하단에 위치해야 한다.

따라서, main layout view에 각 include될 스크립트 영역을 collection으로 잡아 두고, 그 밑에 inline script가 들어갈 부분을 collection으로 잡았다.

<body>
<div class="container">
{{ content() }}
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/common/utils.js"></script>
{{ assets.outputJs("footerJs") }}
{{ assets.outputInlineJs("footerInline") }}

그리고, ControllerBaseinitialize() 에서 각 해당 action에 해당하는 javascript나 inline javascript를 처리 하도록 했다. 다만, inline 스크립트의 경우 코드양이 많아 질 것을 생각하여 postfix로 _incline.js 로 저장하게 끔 했다.

class ControllerBase extends Controller
{
public function initialize()
{
$jsDir = BASE_PATH.'/public/js/';
$footerJsCollection = $this->assets->collection("footerJs");
$footerInlineCollection = $this->assets->collection("footerInline");

if (file_exists($jsDir.$this->dispatcher->getControllerName())) {
// inline
$inlineJsFile = $jsDir.$this->dispatcher->getControllerName().'/'.$this->dispatcher->getActionName().'_inline.js';
$jsFile = $jsDir.$this->dispatcher->getControllerName().'/'.$this->dispatcher->getActionName().'.js';
$this->monitor->debug('fine name :'.$inlineJsFile);

if (file_exists($inlineJsFile)) {
$this->monitor->debug(print_r($footerInlineCollection, true));
$footerInlineCollection->addInlineJs(file_get_contents($inlineJsFile));
}
if (file_exists($jsFile)) {
$this->monitor->debug(print_r($footerJsCollection, true));
$footerJsCollection->addJs($this->dispatcher->getControllerName().'/'.$this->dispatcher->getActionName().'.js');
}
}
}
Show your support

Clapping shows how much you appreciated Noproblemo’s story.