一陣子沒有開 Google Analytics 看資料分析了，無意間發現瀏覽器市場有急大的改變：Google 瀏覽器變成主流。
敝站流量不多，但是跟十年前來比較，瀏覽器的市場的確有很大的改變。
ps. 以後可以不用考慮 IE 系列瀏覽器了 (逃)
各家瀏覽器的使用比例
標籤: 網頁設計
Post/Redirect/Get Pattern
Post/Redirect/Get (PRG) pattern 是一種處理表單資料的流程，可以防止使用者回上一頁、或是使用重新整理的方式重複送出表單資料。
再拿留言板舉例 (萬年題材 XD)，假設在 form.html 填寫完表單，送出到資料到 post.php，而 post.php 處理資料後直接將結果顯示出來 (傳回 HTML)，這個時候再瀏覽器按下「重新整理」按鈕，變會看到提示訊息，詢問是否要重送表單內容。
此時若重送表單資料，則會重新送出一模一樣的內容，若 post.php 沒有特別檢查，就會重複處理。很久以前開心農場就是用這種方法洗禮物的。
為了避免瀏覽器可以重新整理頁面，將資料處理的流程稍微做個調整：
- form.html 設定 submit 後，表單資料送給 post.php 處理
- post.php 處理資料後，不直接顯示 HTML，只送出 HTTP 3xx 做重新導向，跳到 done.php 顯示處理結果
- done.php 透過 URL 參數，顯示相對應的訊息
post.php 寫法大致如下：
if(saveData($_POST)){
$status = 'ok';
}else{
$status = 'error';
}
header('Location: done.php?status=' . $status);由於使用 HTTP 3xx 重新導向，瀏覽器不會將 post.php 紀錄到瀏覽紀錄中，按下「上一頁」按鈕也是回到 form.html 而非 post.php，且 done.php 使用 HTTP GET 方式取得內容，所以重新整理頁面也不會重新送出表單內容。此流程按照三個步驟的 HTTP request 方式稱為 Post/Redirect/Get pattern。
PRG pattern 寫起來至少會有三個頁面要實作，也是挺麻煩的。若還要簡單一點的方式，那大概就是改用 AJAX 處理表單了吧。
Reference:
Post/Redirect/Get – Wikipedia, the free encyclopedia
http://en.wikipedia.org/wiki/Post/Redirect/Get
瀏覽器與 HTTP Referer 之間的特性
在無限期鬼打牆以後，才發現 HTTP Referer 不一定真的代表參考位址。
假設有三個頁面：
- form.html：填資料
- proccess.php：處理表單內容
- showError.php：表單內容有誤時，重新導向到這一頁
一般情況下 process.php 的 referer 會是 form.html、showError.php 的 referer 會是 process.php，但若 proccess.php 跳轉頁面是這樣寫：
if( ERROR ){
header('Location: showError.php');
}執行後 HTTP server 的回應會是 HTTP 302 而非 HTTP 200，瀏覽器不會將 302 視為正常的瀏覽行為，所以 proccess.php 不會被列入正式瀏覽記錄，當重新導向到 showError.php 時，Refer 仍然會是最後一個正式的瀏覽記錄，也就是 form.html。
若希望讓 showError.php 可以正確知道是哪一頁連過來的，就得靠其他方法了。
在這裡建議不要使用 HTTP Referer 來做判斷的依據。現有瀏覽器開發工具、外掛都可以讓人任意修改 Referer，也聽說有些防毒軟體會固定將 Referer 從 HTTP request 中刪除，再者，各家瀏覽器送 Referer 的情況也不同 (IE MUST DIE)，用 Referer 判斷流程等方法會遇到不少例外情況要處理，別讓自己那麼累。
Reference:
php – HTTP_REFERRER and Location redirect – Stack Overflow
jQuery 在表格新增一列
學 javascript 沒多久，剛開始只是很簡單的置換文字、為元素加上類別，短短幾行沒什麼感覺。到了開始動態新增表格資料時，javascript 程式碼裡面參雜 HTML 就越看越噁心。
function addRow( data ){
$('#user-list > tbody ').append(
'<tr> ' +
'<td>' + id + '</td>' +
'<td>' + username + '</td>' +
'<td>' + email + '</td>' +
'</tr>'
);
}這樣的寫法除了可讀性很低以外，之後若修改表格結構以及 CSS 樣式時，必須同時修改樣板以及 javascript 內容，不容易維護。
今天翻了翻 jQuery docs，發現幾個方法拿出來用可以把 HTML 和 javascript 切割的頗乾淨。
先定義一列當作表格樣板，可以在 CSS 將這一列隱藏：
<table border="1">
<tbody>
<tr id="template" style="display: none;">
<td class="id some-other-class"> </td>
<td class="username"> </td>
<td class="email"> </td>
</tr>
</tbody>
</table>新增一列時，將 template 複製一份出來，再依照 class 名稱將資料填入不同欄位：
function addRow(){
$('tr:last').after( $('#template').clone().removeAttr('id') );
$('tr:last > td.id').text( id );
$('tr:last > td.username').text( username );
$('tr:last > td.email').text( email );
}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( ) 功能實作出來。