2012/07/25

製造無法閱讀的程式碼

前陣子某 geek 朋友過生日,所以想用程式給他一個小驚喜。原本打算送給他一個假的 patch,讓他在編譯時收到訊息,不過弄半天還是沒搞懂 #pragma 怎麼用,後來改用程式碼混淆的方式製作卡片。


步驟大概如下:
  1. 做卡片
  2. 轉成程式碼
  3. 製造大亂

2012/07/18

Hook on header and footer

最近學用 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( )  功能實作出來。

2012/07/01

animate on jQuery

初學 jQuery 第一個感想就是 selector 非常好用,加上 effects 功能後,可以說是懶人的一大福音。

在 effects 中有看到 slide down / up,區塊會上下滑動,但沒看到左右滑動的,所以自己試著刻一個。

<style>
#box {
   width: 200px;
   display:  inline;
}
</style>

$('#box').animate(   {
      width: '0px',
      display: 'none'
   } , 'slow'  };

不過發現 box 不會消失,用開發人員工具去看 display 屬性沒有被改變。後來看了文件才發現是自己耍蠢。

jQuery 建立動畫特效的方式,是依照 duration 以及物件屬性的數字差,並在固定時間間隔對屬性的數值做遞增、遞減,是「數值」遞增、遞減,display 屬性值並非數字,所以 jQuery 沒辦法處理。


ps. 用了 jQuery 以後就不會寫 Javascript 了 .... Orz