從 PHP + HTML 架構，擴展至 PHP + JSON + JQuery + JS Event + HTML 之筆記

兩個禮拜前，開始第二次的 Jquery 使用，第一次是去年，但我記不太得何時了！只記得我用 Jquery 只是為了使用 Ajax 的呼叫罷了。第一次連後端傳來的資料都用 JavaScript(JS) 去處理，接著又使用 document.createElement 將想要呈現的 HTML code，動態地慢慢慢慢地建了出來，成果只有一個字 -- 慢。

大概是之前 Patrick 學長開發 Ajax 的經驗，老板對於 Ajax 的開發稍稍地不允許，並不是不能用 Ajax ，而是不建議在開發服務的過程中，加入 Ajax 的實作。理由很簡單，光 Javascript 的開發就夠讓人折騰了，所幸的現在有 Firebug :: Firefox Add-ons 跟許多被廣泛使用的 JS framework ，如 Jquery ！在兩個星期前，老板終於對我解除對 Ajax 開發封印，在這兩個禮拜中，除了處理老家電腦外，其實開發的速度不錯，很快，並且可以把原先 PHP + HTML 的呈現方式，一口氣抽開，感覺類似變成簡潔的 Model-view-controller ！

簡單地說，PHP 用來處理資料，JS 用來呈現 User Interface(UI) ，這當中的資料傳遞則使用 JSON 格式，省去 UI 層額外處理資料的動作，接著搭配 Jquery 功夫，輕鬆地完成任務。

上頭所提到的 PHP + HTML 的意思，就是傳統上用 PHP 來取資料建出 HTML 網頁呈現的過程，基本上是非常夠用的架構，只是若要在使用者介面上加上更多便利的操作，這時就會加入 Javascript 的應用。在 PHP + HTML 的開發過程中，若不使用 JS 的話，當想要提供多變化的應用時，就會開始出現很多越來越冗長的程式碼，例如為了某個效果就必須為此產生新的網頁結果，儘管那只是為了一個小小的片斷程式碼。大概是幾乎沒用 JS 實作，自己在開發 WebMail 上，十足吃了許多苦頭，明明功能都做出來，但因為功能太多搞得使用介面不好看，程式碼雜到讓人無法專心處理 UI 設計？然而這種厭惡感不斷地蔓延下去，不曉得這是不是浪費一年的藉口？anyway，下面就記錄一下這陣子用 php <-> json <-> jquery <-> html 的心得吧！當個筆記囉。

以下[舊式處理]是指我自己以前的寫法，[輕鬆用法]是現在的寫法。

1. PHP 與 JS 溝通
   
   
   
   • 舊式處理：以前未使用 JSON 格式時，我曾寫過一些 PHP 跟 JS 溝通的方式，那時不外乎讓 PHP 產生 JS code 在網頁上執行，例如 <script> var hello = '<?php $world;?>'; </script> 。當大型資料要傳遞時，就顯得非常麻煩，甚至把資料格式抽取的部分擺在 JS 處理。
   
   
   • 輕鬆用法：當使用 Ajax 後，可以讓 PHP 把待輸出給 JS 的資料使用 JSON 格式封裝輸出，除了降低 PHP 的程式碼外，在 JS 這端接收後也省去處理資料了！類似在 PHP 是 array 了，那封裝過後丟給 JS 時也可以輕鬆地用 array 方式操作！
   
   
   
   


2. 流程掌控
   
   
   
   • 舊式處理：原先在 PHP 產生 HTML 時，大概是使用某個參數來控制，例如 state=init 代表一開始，這樣的缺點是每當 state 改變時，就是要重新產生一個 HTML 資料，當 state 變化很大且有多個變數時，將導致 PHP 與 HTML 程式碼非常冗長且重覆。
   
   
   • 輕鬆用法：使用 JS 時，可以很輕易地用某個 global 變數紀錄 state ，並搭配 Ajax 來存取資料，這樣的特色可以讓 Server 專心在 PHP 處理資料的變動，然後用 JS 來處理使用者端的畫面呈現，在程式碼上可以減少非常多，幾乎不必 PHP 跟 HTML 夾雜再一起了，在寫 JS 時，便知道此刻正專心處理 UI 部分，寫 PHP 時就知道正在處理資料部分。
   
   
   
   


3. 加速 JS 建 UI
   
   
   
   • 舊式處理：以前把所有 HTML 的程式碼的部分，例如一整個 table 等，完全用 JS 的 document.createElement('table') 來建立與搭造，這部分雖然比用 JS 切資料來得快了，但也會佔了不少 CPU 資源。使用 document.createElement 的主因之一是為了要設定事件，我記得以前若直接用 obj.innerHTML = '<span>...</span>'; 等方式，印象中將使得 innerHTML 裡頭的部分無法使用事件？！
   
   
   • 輕鬆用法：掌握 Ajax 的精神，把主體的 HTML code 用 PHP 產生，並且在一開始就設定好事件，接著當資料進來時，用 JS 去處理，把真的需要更換的部分更新就好，可以大量降低使用 document.createElement 的機會，因此就能提升速度囉！
   
   
   
   


4. 善用 CSS 的 class
   
   
   
   • 舊式處理：以前真的只是把它當作顏色版面的使用，雖然知道先後使用的覆蓋問題，但也僅此如此。
   
   
   • 輕鬆用法：<span class="init_state next_state"></span>，這個用法，可以讓 span 擁有兩個 class ，並且讓 next_state 去覆蓋掉 init_state 的設定，如變換背景顏色等。假設要做一個選單，想要區分誰被選到，誰沒有被選到，此時就可以利用這個技巧，讓沒有被選到的維持 <span class="init_state"></span>，被選到的則會變成 <span class="init_state selected"></span>，這部分操作會透過 $('#item').addClass('selected') 或 $('#item').removeClass('selected')。一來可以在 selected 上做顏色的變化，二來搭配 jquery 的 $('#target_children').hasClass('selected') 也能區分出有沒被選到，甚至可以一下就用 $('#target').children( '.selected' ) 取得那些被選到的，或是用 $('.init_state:has(.selected)') 或 $('.init_state:not(.selected)')  等應用。這是一個十分方便的事！大大降低程式碼！
   
   
   
   


5. 按鈕的事件設定
   
   
   
   • 舊式處理：傳統上使用<button onclick="doing('type');"></button>設定，當有一堆類似的 button 時，這種寫法會很冗長。
   
   
   • 輕鬆用法：搭配 CSS 的 class 和 jquery 的特色，可以讓一堆有類似事件動作的按鈕作成這樣 <button class="btn" value="type1">type1</button> ，接著一開始用 jquery 來初始化 $( '.btn' ).click( my_action ); ，最後function my_action(){ var type = $(this).val(); switch( type ){ .... } } 就行了！從頭到尾只需要去維護 my_action 的設定，而 button 新增也很快速，真是太方便了！附帶一提的，目前我是用 juqery-1.3.2 ，發現 Firefox 3 跟 IE7 的 $( '按鈕' ).val() 取到的資料不同：<button value="Firefox3取到這裡">IE7只能取到這裡</button>，使用上需留意囉！有時還得搭配 $(this).text() 處理喔！
   
   
   
   

上述是這近兩週的使用心得，扣除整理電腦的部分，或許只能稱得上一週吧？對我而言都是挺新鮮的！我甚至都不敢相信，竟然這樣就做掉以前純用 PHP + HTML 做的事了，至於效率上頭，目前感覺還 ok 囉。由於是在做 WebMail ，我會參考 Gmail 的狀況，我覺得差不多啦，感覺 Gmail 好像也是把 UI 的事丟給 JS ，在換頁時可以感受到 CPU 的吃重，相對上 Server 會輕鬆許多吧。

有機會一定要試試 jquery 啦！若有更多 UI 上的需求，也可以試試 The Yahoo! User Interface Library (YUI) ！目前 jquery 對我已經非常夠用了！