最近學用 Ajax 處理一些網頁上的事件,javascript 越寫越長,就覺得有必要按照程式碼類別拆成不同檔案,在執行時期決定到底哪些檔案需要匯入。像是管理介面用的 CSS、javascript 就需要在一般頁面當中載入,或是在不需要使用到 Google Maps 時將 javascript API 拿掉。
CodeIgniter 在 controller 與 view 切開後,傳遞資訊只能在 loader 載入時送參數,不過若有多個需要動態載入的資源放在一起,程式寫起來會很麻煩。
// Controller
$data['googleMapAPI'] = true;
$data['jqueryPlugin'] = true;
// View
<?php if( $googleMapAPI == true ): ?>
<script src=" ..... "></script>
<?php endif; ?>
<?php if( $jqueryPlugin == true ): ?>
<script src="...."></script>
<?php endif; ?>
這時候想到 WordPress Codex 有個不錯的作法可以參考。Wordpress 為了讓樣板、外掛製作能夠分開、不會互相影響,做出了一個 add_action( ) 的功能,外掛設計師將需要執行的動作「註冊」到系統中,樣板設計師在特定位置呼叫時,系統便會執行已註冊的動作。
// Plugin
<?php
add_action('wp_head', 'js_include');
add_action('wp_footer', 'action-on-ready');
function js-include(){
echo '<script src="..."></script>';
}
function action-on-ready(){
echo '<script> $('document').ready(); </script> ';
}
?>
// Template
<html>
<head>
<titie> .... </title>
<!-- load script in header -->
<?php echo wp_head(); ?>
</head>
<body>
......
<!-- load page scripts in footer -->
<?php wp_footer(); ?>
</body>
</html>
CodeIgniter 有 Hook 類別,不過並沒有 view 的插入點,想試試看能不能把 wordpress add_action( ) 功能實作出來。