當然這種問題的解決的辦法有許多個，我們也可以在getJSON()取得資料後再判斷目前得到的資料是否正確，但這樣一來前端的程式碼將會顯得很囉嗦，因此解決辦法中有一個簡單又實用的就是直接取代 jQuery 的 getJOSN()，並搭配後端的對於不同請求給予不同的回應，來統一簡化整個判斷流程。

這裡主要用到了之前所提「使用 PHP 判斷 jQuery 傳來的 AJAX 請求類型」及「取代jQuery內置函數」兩種技巧。

在Javascript中寫入取代jQuery.getJSON()的函數：

(function($) {

	/**
	 * 取代 jQuery 的 JSON
	 */
	$.getJSON = function(url,paramData,callback){

		if($.isFunction(paramData)) {
			callback = paramData;
			paramData = null;
		}

		var opt = {
			url: url,
			dataType: 'json',
			cache: false,
			data: paramData,
			success: function(data, textStatus, XMLHttpRequest){

				if(null === data) return opt.error(XMLHttpRequest,textStatus);

				var handleError = false;

				if(data.TimeoutError != undefined ){
					if(data.TimeoutError == true){
						handleError = true;
						//提示錯誤訊息
						alert('您可能閒置過久，請重新登入系統再重試');
						//進一步轉向登入頁面
						window.location = '登入頁面URL';
					}
				}

				if(!handleError && callback != undefined) {
					callback(data, textStatus, XMLHttpRequest);
				}
			},
			error: function(XMLHttpRequest, textStatus, errorThrown){
				//提示錯誤訊息
				alert('連線發生錯誤！請檢查您的連線並重新嘗試');
			}
		};

		$.ajax(opt);

	};

})(jQuery);

在PHP中給予不同回應：

session_start();
if(!isset($_SESSION['login'])){ // 尚未登入
	if('application/json, text/javascript, */*' == $_SERVER['HTTP_ACCEPT']){
		//回應給取代後的getJSON()
		echo json_encode( array('TimeoutError' => true) );
	}else{
		//轉向登入頁面表單
		header('location: 登入頁面URL');
	}
}else{
	// 已登入的其他處理......
	echo json_encode( array('msg' => '取得訊息') );
}

之後一樣使用jQuery.getJSON()完全不變：

$(function(){

	$('#test').click(function(){
		// 取得 JSON資料
		// 若已登入將顯示「取得訊息」
		// 若未登入或Session過期將顯示「您可能閒置過久，請重新登入系統再重試」
		$.getJSON('/index.php',function(data){
			alert(data.msg);
		});
	});

});

依據該文的描述在PHP中我們可以透過判斷 X-Requested-With 請求檔頭來分辨現在的請求是不是AJAX請求而給予不同的回應。

但這樣的判斷似乎不夠完整，在某些時候我們可能需要更進一步的判斷，jQuery所提供的AJAX方法不僅可以指定回傳的格式，它在送出AJAX請求時也會根據指定回傳格式的不同而傳出不同的Accept請求檔頭，因此在相同的概念下進一步聯想，其實我們還可以透過「Accept」請求檔頭來分辨現在的請求是什麼樣的類型。

以下依據該文的描述透過判斷 $_SERVER[ 'HTTP_X_REQUESTED_WITH' ] 來分辨現在的請求是不是AJAX請求而給予不同的回應。
例如：

if('XMLHttpRequest' === $_SERVER[ 'HTTP_X_REQUESTED_WITH' ]){
	// 回應 AJAX 請求，例如JSON格式
	echo json_encode(array('message' => 'hello'));
} else {
	// 回應一般請求，例如HTML格式
	echo 'hello';
}

當需要更進一步區分請求類型的不同時，將可以透過「Accept」請求檔頭來分辨現在的請求是什麼樣的類型。

以下我整理出jQuery中各種不同的AJAX方法所傳出的「Accept」請求檔頭：

現在有了這個對照表，我們就可以根據Accept header來回應不同格式的結果：

switch ($_SERVER['HTTP_ACCEPT']){
	case 'application/json, text/javascript, */*':
		// 回應 JSON 格式
		break;
	case 'text/javascript, application/javascript, */*':
		// 回應 javascript 或 JSONP 格式
		break;
	case 'text/html, */*':
		// 回應 HTML 格式
		break;
	case 'application/xml, text/xml, */*':
		// 回應 XML 格式
		break;
}

參考文章：Detecting Ajax Events on the Serve

最後我決定以 new BSD license 釋出，希望可以讓有相同需求的人多個選擇。

Lazybones 吉祥物

名稱：藍惰蟲 (bluelazy)

分類：軟體生物

棲息地：每個人的心中

特性：可能促使宿主懶散不事生產，也可能促使宿主為了消除藍惰蟲所釋放的懶惰激素進而改進或創造新事物來滿足懶惰的慾望。

記得小時候被長輩罵懶時，總是以比喻的方式消遣「你是沒骨頭嗎？」

因此以這樣一個概念設計了這個沒有骨頭的生物「藍惰蟲」。

Lazybones 簡介

Lazybones 是一個微型PHP快速開發框架，它被設計的主要目的是減少小型架構網站所需撰寫的程式碼，加快開發的速度、增加可維護性，同時能兼具一定的執行的效能，努力在效能與核心功能間取得平衡點。
目前已實現的特色：

• 核心迷你，執行效能高
• 操作簡便，語法親和
• MVC架構
• 具備可擴充性及開發彈性
• 存取控制清單 (ACL)
• 模型內建ORM
• 事件
• URL路由器
• 視圖佈局
• 主題支援
• 資料驗證器
• 國際化

• Lazybones 官方網站
• Lazybones 討論區

很久以前若要設計有字型樣式的文字，會用圖片來替代文字，但自從SEO觀念盛行之後，這個方法便不那麼恰當了，因為縱然使用alt或title屬性來加強描述也不是很被搜尋引擎建議的方法。

因為終極目標是除了外觀要美也要符合SEO的原則，所以目前最佳的解決之道便是「以純文字設計」，並於顯示時「替換為圖片、Flash或其他方式」。

為了解決這個困擾，曾經出現過很多不同的解決方案，在此介紹幾種已知的方法，每個方法各有利弊，實際應用時可以依照情況斟酌著使用。

1.CSS技巧 – Image Replacement

利用CSS耍點花招將文字隱藏，並以background屬性顯示圖片，來達到替換文字為「具有字體樣式的文字型圖片」效果，要將文字隱藏方法有很多，其中一個較簡便的方法就是利用text-indent將文字「縮」到看不見的地方。

#title{
	background: url(text.gif) no-repeat left top;
	width: 150px;
	height: 40px;
}

#title span{
	text-indent: -9999px;
}

	
文字

	

缺點：

• 如果想替換的地方很多的話，只能慢慢做到天荒地老、海枯石爛….。
• 只能於設計階段手工製作，如果是動態產生的內容則無法使用這個方法。

優點：

• 不論是Client端或Server端都不需消耗額外的效能與資源（因為在設計階段，已經用設計人員的腦力與耐性抵消掉了…）

2. sIFR – Scalable Inman Flash Replacement

Flash所產生的SWF播放檔可以內嵌字體，sIFR就是利用這個特性，動態的以Javascript將文字用SWF元素替代，來達到呈現特殊字型的效果。

範例：

http://dev.novemberborn.net/sifr3/svn/test/distribution/demo/

相關網址：

官方網站：http://wiki.novemberborn.net/sifr/

sIFR3：http://novemberborn.net/sifr3

缺點：

• 內嵌中文字型將造成SWF非常肥大。

優點：

• 輕鬆簡單，Server端無需耗費額外硬體資源，Client端耗用資源幾乎可以忽略不計。

3. jQuery Flash Plugin – sIFR

sIFR功能是這個jQuery Plugin的其中一個功能，一樣也是利用SWF播放檔可以內嵌字體的特性來達成替代文字的效果。

相關網址：

http://jquery.lukelutman.com/plugins/flash/index.html

http://jquery.lukelutman.com/plugins/flash/example-text-replacement.html

範例：

http://jquery.lukelutman.com/plugins/flash/example-text-replacement.html

優缺點同sIFR。

4. cufon

這是相當有趣的一項技術，它提供一個產生器(PHP寫的)，能將字型檔案TrueType (TTF), OpenType (OTF), Printer Font Binary (PFB)，轉換為一個Javascript格式的字型檔(或者可以說它是一個javascript的字型定義檔)，再即時的利用javascript透過canvas 與 VML，動態於網頁中繪出字體，並取代對應的網頁元素。

相關網址：

http://cufon.shoqolate.com/generate/

http://wiki.github.com/sorccu/cufon

範例：

http://www.acidsmile.co.uk/

更多範例：http://wiki.github.com/sorccu/cufon/demos

優點：

• 預先轉換字型檔，把解讀的工作交給Client端，可節省Server的資源耗用。

缺點：

• 中文字型產生的檔案太大了！字型檔是用MB計算的。
• IE6與IE7這兩個市佔率最高的大老不支援，IE8才支援。

5. facelift

使用PHP在Server端產生對應的圖片，並於前端用javascript替換對應的HTML元素。

http://facelift.mawhorter.net/

優點：

• 以圖片達成，因此沒有瀏覽器顯示支援的問題，也不需安裝任何Plugin(Flash是一種Plugin)。
• 訪客瀏覽時只需下載特換過的特殊字型圖片，沒有中文字型過大的問題。

缺點：

• Server端的loading比較重，但它具有cache可以抵消掉很多負擔。
• Server必須能執行PHP。

範例：

http://facelift.mawhorter.net/examples/

碎碎念一下：

中文的博大精深為我們奠定了深厚的文化基礎，但中文的繁雜在印刷術發明後已經吃過一次虧，現在又吃了一記悶棍，簡體字也仍然保留缺點，真可謂成也蕭何敗也蕭何啊！

不是CSS3

CSS3是目前最新的CSS版本，增加了許多原本CSS2沒有的樣式定義，儘管如此它仍然只是侷限在樣式定義、選擇器的增強，對於CSS撰寫邏輯並沒有改變，因為這也不是CSS本身應該做的工作。

簡單不重複

經常在老外的文章看到他們似乎很喜歡且倡導兩個觀念：

DRY (Don’t Repeat Yourself)

沒錯，這才符合懶人的原則嘛！但認真說起來也不盡然是懶惰，能夠透過方法達到的事情，為何要自己重複？能夠交給電腦做的重複工作，為何要自己做？

KISS (Keep It Simple and Stupid)

如果一件事情可以把它簡單化，為何要把它搞的很複雜？我可不希望為了證明自己不笨而把事情搞的複雜、難做、難理解，反過來說，能夠透過方法把複雜的事情簡單化，或許才是真正的聰明。

改變你的CSS撰寫方式

在以前我們使用以下的方式寫CSS，單純的寫CSS，單純的被瀏覽器解析、渲染，這很正常也沒有什麼不對。

但現在可以改用增強型或稱新的CSS語法撰寫CSS，再透過編譯器的解析產生出符合規範的CSS語法交給瀏覽器，而編譯的過程可能是即時的，透過這樣的方式將會減輕許多CSS編寫的麻煩，也會讓編寫出來的CSS更容易維護。

幾款擁有新CSS語言的Framework

之前發現了一款好用的CSS Framework – CSScaffold，後來又發現了另兩款類似的CSS Framework – xCSS 與 Compass，而且似乎都繼承自一個名為SASS的CSS語法觀念，看來CSS的撰寫應該已經進入了另一個世代了。

CSScaffold

這是一款非常值得推薦的CSS框架，詳細說明請參閱上一篇文章：CSScaffold – 幫助建構複雜CSS的「鷹架」

特色：

• 強化標準CSS語法

讓CSS語法可以有常數(Constant)。

讓CSS語法可以有函數(Function)，當然也可以傳參數(Parameter)，官方稱之為Mixins。

讓CSS語法可以巢狀結構(Nested Structure)。

讓CSS語法可以有插件(Plugin)。

讓CSS屬性可以用表達式(Expressions)指派其值。

讓CSS屬性可以用條件式(Conditionals)指派其值。

• 重複利用
  CSS本身有一個可加強網頁撰寫時重複利用的特性，而CSScaffold讓這個特性更加明顯。

• CSS結構化
  標準的CSS語法常常會讓我們的CSS內容雜亂不堪難以維護，而CSScaffold可以降低這個困擾。

CSSaffold官方：http://wiki.github.com/anthonyshort/csscaffold

xCSS

xCSS，它強調物件導向的功能，它的靈感來自SASS 及OO CSS，雖然xCSS看起來相當不錯，但目前我感覺仍是CSScaffold的功能較強大且完善，目前xCSS僅在v0.9.4 (beta)測試階段，希望將來它可以再進一步增強它的功能性。

xCSS官方：http://xcss.antpaw.org/

特色：

• CSS選擇器繼承（這是一個利用物件導向繼承特性加強重複利用的好方法）
• 巢狀子物件(Nesting child objects)或稱巢狀結構(Nested Structure)
• 變數(Variables) 與 CSScaffold的常數很像。

Compass

這是一款以Ruby實現SASS的CSS Framework，不同xCSS、CSScaffold的即時編譯，它必須使用命令列執行預先編譯，除了功能強大之外，另一個好處應該是不侷限在PHP上。

Compass官方：http://compass-style.org/

特色：

• 使用命令列執行編譯。
• 語法與SASS相同。
• 語法結構、功能相當完善。
• 預先編譯減少即時編譯的效能損耗

以下有一部作者錄的教學影片，有興趣的話可以看一下作者親身示範說明，但影片很大建議先下載再觀看（362 MB…XD）

Compass: A Real Stylesheet Framework from Chris Eppstein on Vimeo.

相關資料：

• SASS (Syntactically Awesome Stylesheets)
• SassLang
• Object-Oriented CSS

ps. Apache的mod_rewrite不一定需要。

CSScaffold 的神奇之處：

強化標準CSS語法

• 讓CSS語法可以有常數(Constant)。
• 讓CSS語法可以有函數(Function)，當然也可以傳參數(Parameter)，官方稱之為Mixins。
• 讓CSS語法可以巢狀結構(Nested Structure)。
• 讓CSS語法可以有插件(Plugin)。
• 讓CSS屬性可以用表達式(Expressions)指派其值。
• 讓CSS屬性可以用條件式(Conditionals)指派其值。

重複利用
CSS本身有一個可加強網頁撰寫時重複利用的特性，而CSScaffold讓這個特性更加明顯。

CSS結構化

標準的CSS語法常常會讓我們的CSS內容雜亂不堪難以維護，而CSScaffold可以降低這個困擾。

CSScaffold 如何讓CSS變神奇的？

其實技術上它一點都不神奇…XD，說穿了他與PHP中的Smarty等等樣板引擎很像，但真正令人激賞的是他的概念。

它的運作原理就是在開發時原本直接寫CSS，變成寫 CSS 的樣板，然後在執行階段透過CSScaffold來編譯及抓取已經編譯好的CSS內容回傳給瀏覽器，有快取(Cache)的功能，因此整個執行的流程很像PHP中許多有Cache功能的樣板引擎。

因為透過CSScaffold這層的解析編譯，所以當然就會如同樣板引擎一樣，它訂製出自己的CSS樣板語法，而這它的語法基本上跟CSS 沒什麼兩樣，只是多了一些原本CSS 不提供的語法，使用上只需瞭解多出來的部分而不是重新學習CSS語法，因此也可以簡單的把它看做是CSS語法的改良進階版。

以下是CSScaffold官方的概念圖：

image from csscaffold

直接看官方教學介紹，簡單又明瞭

CSScaffold語法

來看幾個官方提供的語法介紹，瞭解一下CSScaffold的好用之處

常數(Constants)
大部分的程式語言都有常數這種東西，因此很容易理解，下面的例子body的color屬性會被替換成#555，常數最大的功能就是在於重複利用，也保持CSS屬性的一致性，以這個例子來說，如果以常數的方式撰寫，當需要更改文字顏色時，只需要更改常數的定義即可

/* 定義常數 */
@constants
{
text_color:#555;
color_1:#999;
}

body
{
/* 把color屬性設定為text_color常數 */
color:!text_color;
}

因此結果會是：

body
{
color: #555;
}

引入(include)
直接引入其他CSS檔案，增加重複利用的特性

/* 例如：引入常數定義檔 */
@include '/scaffold/snippets/constants.css';

巢狀結構(Nested Structure)
HTML本來就是巢狀的東西，而這東西更可以讓CSS結構化，編寫時不再混亂不堪，除了方便撰寫也有利於日後維護

#id
{
border:1px;

h1,h2,h3
{
color:red;

a div, blockquote, mark
{
margin:10px;
}

&.span
{
padding:10px;
}
}
}

結果：
如果手工寫這些東西是很煩很累的…

#id
{
border: 1px;
}

#id h1,
#id h2,
#id h3
{
color: red;
}

#id h1 a div,
#id h1  blockquote,
#id h1  mark,
#id h2 a div,
#id h2  blockquote,
#id h2  mark,
#id h3 a div,
#id h3  blockquote,
#id h3  mark
{
margin: 10px;
}

#id h1.span,
#id h2.span,
#id h3.span
{
padding: 10px;
}

混合器(Mixins)
這東西的概念有點像函數，又有點像樣板，可以傳入變數替換值

/* 定義混合器 */
=mixin-name(!param)
{
color:!param;
border: !param2 solid #eee;
}

#content
{
/* 使用混合器 */
+mixin-name(#eee);
padding:10px;
border:1px solid #eee;
}

因此結果會是：

#content
{
color: #eee;
border: #eee2 solid #eee;
padding: 10px;
border: 1px solid #eee;
}

混合器的巢狀用法：

/* 定義混合器 */
=mixin-name(!param)
{
.test!param{
color:#555;
}
}

/* 使用混合器 */
+mixin-name(1);

#content
{
/* 使用混合器 */
+mixin-name(1);
padding:10px;
border:1px solid #eee;
}

巢狀Mixins結果：

.test1
{
color: #555;
}

#content
{
padding: 10px;
border: 1px solid #eee;
}

#content .test1
{
color: #555;
}

表達式(Expressions)：

#id
{
padding:#[10*4]px;
}

結果：

#id
{
padding: 40px;
}

條件式(Conditionals)：

=column(!n, !last = false)
{
width:#[!n * 10]px;
/* 依據參數的不同設定不同的值 */
@if(!last === false)
{
margin-right:0;
}
@else
{
margin-right:10px;
}
}

.box
{
+column(2, true);
}

結果：

.box
{
width: 20px;
margin-right: 10px;
}

目前條件式的解析似乎有些Bug

插件(Plugin)
官方預設提供了多個插件，並提供了排版插件(Layout Plugin)使用教學，如果使用網格設計(Grid Design)的方式來編排CSS網頁，這個插件可以很方便快速的產出所需的CSS，當然除了官方提供的插件之外，也可以自行設計插件。

至此，應該可以了解到這個東西真的是Simple, but powerful，更多語法介紹及教學請至 CSScaffold 觀看

相關連結

• CSScaffold官方網站
• CSScaffold下載

該作者使用簡短的描述、簡潔的範例，清楚的闡明單例設計模式的概念與使用方式，我覺得這篇文章很容易懂，很值得參考，因此將其翻譯成中文，由於我的英文能力不好，翻譯上若有謬誤的地方，還請多多指教。

How to use the Singleton design pattern

作者：Karl

出處：How to use the Singleton design pattern

翻譯：阿育

單例模式(Singleton Pattern)是四人幫(GoF,Gang of Four)設計模式之一。這個模式提供了一個將物件實例(instances)限制為單一實例的方法。若你過去曾使用過陌生的語法，這是一個很容易掌握的設計模式。

思考一下以下的類別(Class)：

class Database
{
    public function __construct() { ... }
    public function connect() { ... }
    public function query() { ... }
    ...
}

每當我們需要一個連線時，這個類別建立了一個資料庫連線的類別實例，例如：

$pDatabase = new Database();
$aResult = $pDatabase->query('...');

假設我們在一個腳本的生命週使用上面的方法許多次，每當我們建立一個實例，也建立了一個新的資料庫物件（我們還建立了一個新的資料庫連線，但是以這個例子來說，這是沒必要的），同時也將耗費更多記憶體。

有時您可能想刻意建立多個類別實例，但在這裡我們不這麼做。

單例模式提供的方法便是去解決這個常見的問題。為了讓資料庫類別單一實例化，我們首先需要為這個類別添加一個新的屬性，我們將其命名為$m_pInstance：

class Database
{
    // Store the single instance of Database
    private static $m_pInstance;

    ...
}

此屬性將被用來存儲資料庫類別的單一實例。需注意，這個屬性必須是靜態(static)的。

接下來，我們需要將構造函數(constructor或稱建構函數、建構子)的存取範圍改為私有(private)。這是經常混淆視聽的陌生語法。

class Database
{
    // Store the single instance of Database
    private static $m_pInstance;

    private function __construct() { ... }
}

透過使用私有的構造函數，我們已經禁止了外部將類別實例化。因此如下面的程式碼將不可以被執行於類別之外。

$pDatabase = new Database();

為了建立單例模式，我們現在需要增加一個方法。增加下面的方法到資料庫類別中：

public static function getInstance()
{
    if (!self::$m_pInstance)
    {
        self::$m_pInstance = new Database();
    }

    return self::$m_pInstance;
}

這個看起來有趣的方法，它的責任是處理物件類別實例。請核對我們的靜態屬性$ m_pInstance，相對於此基本上這就容易理解了，如果建立資料庫物件透過呼叫建構函數，這是不合法的。請記住，我們已經讓__construct()方法成為私有的，所以物件實例的建立只能透過物件的方法。

這個方法函數最終將傳回一個靜態屬性的參照(reference)。在隨後呼叫了getInstance()將會回傳一個有效的$ m_pInstance參照，不會有新的物件實例被建立。

所以，我們的資料庫類別看起來差不多像這樣：

class Database
{
    // Store the single instance of Database
    private static $m_pInstance;

    private function __construct() { ... }

    public static function getInstance()
    {
        if (!self::$m_pInstance)
        {
            self::$m_pInstance = new Database();
        }

        return self::$m_pInstance;
    }
}

現在你可以在專案中的任何地方使用資料庫類別實例（不使用全域變數或函數的參數）。

(譯按：當然，你必須Include這個class啦 XD)

下面是範例與比較：

我們通常使用這種的方式建立物件：

$pDatabase = new Database();
$aResult = $pDatabase->query('...');

這則是單例模式所使用的方式：

$pDatabase = Database::getInstance();
$aResult = $pDatabase->query('...');

結論，單例模式是一種易於使用的設計模式，它限制了類別實例的數量。

範例檔詳見原文的附加檔案。

翻譯後記

如同作者所提，單例設計模式是一種很容易理解且容易使用的一種設計模式，目的在於確保一個類別只有一個實例，並提供對該實例的全域存取。。

1. 下載梨子的JSON class，壓縮檔裡面有個JSON.php，不用安裝，直接放到相對應目錄底下即可。

http://pear.php.net/package/Services_JSON/download

2.加入以下Code

if(!function_exists('json_encode'))
{
	include('JSON.php');
	function json_encode($val)
	{
		$json = new Services_JSON();
		return $json->encode($val);
	}

	function json_decode($val)
	{
		$json = new Services_JSON();
		return $json->decode($val);
	}
}

如此一來，就可以在PHP4中使用json_encode 與 json_decode這兩個函數了