色胚子部落 » 程式設計

開始HTML5 – Web Workers

阿育 — Fri, 23 Apr 2010 17:11:00 +0000

HTML5帶來了許多的改變，除了標記語意上的增強之外，最令人震撼的莫過於它所附屬的Javascript APIs。而 Web Workers 是 HTML5 提供的一個多執行緒(Multi-Thread)的解決方案，讓我們可以把需要大量運算的程式交由Web Workers去做背景執行，如此的好處就是其他的工作仍可以順利進行。

Web Workes 目前支援的瀏覽器有：Firefox 3.5+ / Safari 4.0+ / Chrome 5.0+

HTML5 的不同

標記的不同

HTML5在標記上有著相當大的變化，其中最為明顯的即是語意上的標籤，在HTML5中，結構化網頁的語意更加清晰了，除了移除許多不必要的標記之外也增加了許多標記及有用的屬性，本文只簡述範例中會用到的部份。

若想知道自己編寫的HTML5是否有錯誤可以利用HTML5 validator來驗證。

DOCTYPE 變簡潔了

現在DOCTYPE只需簡短的這樣寫：

標籤不一定要閉合

在XHTML裡標籤必須要閉合，例如：

而在HTML5中，以下的寫法也是正確的，而這也是比較建議的寫法：

同樣的方法也適用於meta，而且在指定content-type時，也只需要指定charset而不必定義文件類型text/html，例如：

Web Workers基本概念

在使用Web Workers時，我們必須建立一個Worker實體，並傳入要被呼叫的Javascript檔案所在URL，而我們必須把Worker要跑的程式寫在這個檔案中，例如：

var worker = new Worker("worker.js");

在worker.js中我們必須綁定onmessage來執行我們想要執行的動作，在這裡我們可以使用postMessage()來觸發Worker.onmessage事件，例如：

onmessage = function (evt) {
	for (var i=0; i<100000000; i++) {
		//執行大量迴圈
		postMessage(i); // 觸發 Worker.onmessage() 並傳入 i
	};
};

Worker.onmessage(event) 事件

當在被呼叫的javascript裡呼叫postMessage()時，將會觸發這個事件，在這個事件中我們可以透過event.data來取得傳入資料。

worker.onmessage = function (e){
	// 由於在 worker.js 中使用了 postMessage() 並傳入 i 值
	// 因此在這裡可以使用 event.data 來取得 i 值，並做出相關處理
	// 例如：
	console.log(e.data);
}

Worker.onerror(event) 事件

當呼叫失敗時，將會觸發此事件，在這個事件中我們可以透過event來取得事件相關資訊。

worker.onerror = function(e){
	alert("於第["+ e.lineno +"]行發生錯誤 : " + e.message); //顯示錯誤訊息
}

Worker.terminate()

用以停止Worker的執行的成員函數。

因此Web Worker簡單的操作流程圖如下：

搭配jQuery的簡單Web Worker範例

點我觀看Web Workers Demo

worker.html



	
		
		Worker Test
		
		
		
	

	
		開始
		
		回文章

worker.css

#worker-list {
	list-style-type: none;
	width: 400px;
}
#worker-list li {
	background-color: #FFE;
	margin: 3px;
	padding: 3px;
	border: 1px solid #C6BC9F;
	font-size: 16px;
	position: relative;
}

#worker-list .close {
	position: absolute;
	background-color: #FFF;
	display: block;
	height: 18px;
	width: 18px;
	border: 1px solid #CCC;
	text-align: center;
	vertical-align: middle;
	font-size: 12px;
	cursor:pointer;
	font-family: Arial, Helvetica, sans-serif;
	right: 3px;
	top: 3px;
}

worker.js

onmessage = function (e) {
	for (var i=0; i

init.js

$(function(){

	function createWorker (msgObj) {

		// 建立 worker
		var worker = new Worker("worker.js");

		worker.onmessage = function (e){
			msgObj.html(e.data); // 更新資訊 (e.data可取得觸發傳入值)
		}

		worker.onerror = function(e){
			alert("於第["+ e.lineno +"]行發生錯誤 : " + e.message); //顯示錯誤訊息
		}

		return worker;
	}

	$("#startWorker").click(function(){
		for(var i=0;i<5;i++){
			addworker();
		}
		$(this).remove();
		return false;
	});

	function addworker(){
		var newItem = $('');
		var msg = $('Waitting...');

		//關閉鈕
		var close = $('X').click(function(){
			var li = $(this).closest('li');
			li.data('worker').terminate(); //停止worker的執行
			li.remove();
		});;

		var worker = createWorker (msg);

		//儲存Worker在元素裡
		newItem.data('worker',worker);

		//執行Worker
		worker.postMessage(30000);

		$('#worker-list').append(newItem.append(msg).append(close))
	}
});

我一個半途夭折的想法

阿育 — Tue, 06 Apr 2010 10:33:51 +0000

在2008年底，我突發奇想的開始做了一個名為「拓客基地」的網站，這是一個聊天室網站，大約在2009一月底完成一個簡易的beta版，但卻在辛辛苦苦做完之後一直擺著沒去裡它，也從未對外公開它的網址。

與一些聊天室不同的是，這個聊天架構不是由Client(Browser)不斷送出Request，而是由Server在有需求時才送出訊息或通知。

直到最近pigo大在他的部落格中提到一種叫做Comet架構的概念，我才發現原來有這樣一種架構概念，在這之前我倒是沒有聽過，真是後知後覺啊。

在稍微了解過這種概念後發現與我當初想的好像頗為相似，重點似乎都是Server的主動，而不是不斷的請求，但我不是很確定是否有何不同，不過很恰巧的是Server端都是用C#寫的（硬要攀關係 XD）。

仔細想想這樣的運作架構或許有它的存在的價值，重點在於用在什麼地方。

因此今天又重新把這個網站整理一下搬了出來，有興趣的人不妨隨意玩玩，或許可以激起你另一個想法。

Screenshots

Web 聊天介面

室長端介面

網址：

http://tbase.colorbase.tw/

帳號：test 密碼：test

概念

這個聊天室架構不是由Client(Browser)不斷發送Request請求，而是讓聊天室成員與室長端建立一個固定的連線，換句話說是在有需求時訊息才會被傳遞，而室長端就是一個Server端，訊息流量都由使用者（室長與成員）自行承擔，缺點是使用者如果要當室長必須需要下載一個Client端軟體。

在這樣架構之下總共會有兩種Server端（HTTP Server不納入計算），一是中介Server，用於室長與聊天成員之間建立連線的媒介，處理一些狀態訊息等等，二是室長端。

但事實上，中介Server的角色在某些應用底下，它並不是一定要存在的，因此若單指聊天室長端的Server與聊天成員的運作來看，這樣的運作就會很像所謂的comet（希望我沒有會錯意）。

由於是固定連線的關係，因此在訊息的傳遞上非常即時，實測的結果，室長端使用一般家用網路其即時的效果跟MSN似乎不相上下，當然這取決於連線數量的多寡與頻寬條件。

如下簡圖：

圖示來自：

http://www.iconshock.com/

http://www.vistaicons.com/icon/i161s0/web_browsers_icons.htm

關於comet架構

這有一些文章可以參考：

PS. pigo大最近打算釋出他的原始碼，有興趣的人不妨留意一下他的消息。

使用 PHP 判斷 jQuery 傳來的 AJAX 請求類型

阿育 — Sun, 07 Mar 2010 08:49:35 +0000

今天看到 Detecting Ajax Events on the Server 這篇文章中提到一個有趣的好方法，當jQuery送出AJAX請求時會附上 X-Requested-With 請求檔頭，其值為「XMLHttpRequest」。

依據該文的描述在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」請求檔頭：

jQuery code	Accept header
$.getJSON(URL); $.ajax({url:URL, dataType :’json’});	application/json, text/javascript, /
$.getScript(URL); $.ajax({url:URL, dataType :’script’}) ; $.ajax({url:URL, dataType :’jsonp’}) ;	text/javascript, application/javascript, /
$.get(URL);	/
$(‘#result’).load(URL); $.ajax({url:URL, dataType :’html’});	text/html, /
$.ajax({url:URL, dataType :’xml’})	application/xml, text/xml, /

現在有了這個對照表，我們就可以根據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

Framework 與 Library 的概念與不同

阿育 — Thu, 25 Feb 2010 12:29:20 +0000

Framework 中文常譯為「框架」、「架構」而 Library 中文常譯為「庫」。

很多 Framework 因為結構上的需求而帶有大量的 Library 所以很容易讓人對於這兩者的概念混淆不清。

Framework 在字義上帶有結構的意義。

它具備引導的作用，並透過預先規劃好的結構或機制以協助改善開發上的問題，例如：結構性、彈性、可維護性等等；為了引導到正確的開發方向 Framrework 甚至有時會做出適度或大量的限制開發方向、方法，在限制上來說意義就吻合了中文字義「框架」；對於結構而言，Framrewok 某些地方沒有顯著的以限制的方式引導，而是提供了某些機制，例如：.Net Framework 中提供了事件機制；Framework 中可能會包含大量類別或函數，這其中有一部是所謂的Library，另一部分則是因應 Framework 結構或機制而存在，例如：事件經常也是一個類別。

而 Library 在字義上帶有收藏或集合的意義。

因此 Library 很單純的收集常用或通用程式庫，若內容物為函數則常被稱之為「函式庫」，若內容物為類別則常被稱之為「類別庫」。Library完全不理會程式結構如何開發，它很單純的只是為了完成某些較為獨立的事，也完全不會限制或引導開發邏輯或流程。

個人觀點，僅供參考

2010/02/26 補充、修改

Lazybones PHP 開發框架 0.1 釋出

阿育 — Wed, 10 Feb 2010 17:03:52 +0000

最近因為需求而開始嘗試尋找一個合適的PHP開發框架，了解過幾個知名的框架之後發現每個框架都有其優點，但卻沒有符合我需求的框架，於是就便自行寫了一個開發框架，我把它命名為 Lazybones。

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

Lazybones 吉祥物

名稱：藍惰蟲 (bluelazy)

分類：軟體生物

棲息地：每個人的心中

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

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

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

Lazybones 簡介

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

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

CSScaffold – 幫助建構複雜CSS的「鷹架」

阿育 — Fri, 09 Oct 2009 17:20:04 +0000

今天發現一個好用的CSS的開發框架 – CSScaffold，瞭解完這個東西之後，我的感覺就如同官方提到的一句話「Simple, but powerful」，它是一款幫助撰寫CSS的快速開發框架，不同於許多CSS框架，它必須依靠PHP與Apache的mod_rewrite來執行，但也因為需要這兩種東西，讓CSScaffold變得很神奇、很方便，寫起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 觀看

好用的SQL語法編輯工具 – SQL Workbench

阿育 — Sun, 04 Oct 2009 12:10:47 +0000

今天發現了一套幫助編寫SQL語法的好工具 – SQL Workbench，它支援各式各樣常見的資料庫，方便的欄位及資料表名稱自動完成提示，可以讓我們不用記憶資料表及欄位名稱，用來編寫又臭又長的SQL語句時，是一套相當好用的工具。

支援眾多資料庫

支援的資料庫有：PostgreSQL、Oracle、Microsoft SQL Server、MySQL、SQLite、Firebird SQL、Access、Excel、H2 Database Engine、Apache Derb、HSQLDB、IBM DB2…及其他更多。

SQL Workbench的特色

可執行SQL查詢並顯示結果
Open Source
資料表及欄位名稱自動完成提示
格式化SQL語法
簡易查詢功能
支援大部分常見資料庫
其他更多特色見 SQL Workbench官方特色列表

螢幕截圖

SQL語法編輯

Database Explorer

Database Explorer – 取得資料表結構語法

自動提示

SQL語法格式化

讓SQL Workbench支援MySQL等資料庫

由於SQL Workbench是使用Java開發的，因此如果要讓他支援如MySQL資料庫，必須下載對應的JDBC Driver

1.首先下載MySQL JDBC Driver。

2.從選單「File >> Manage Drivers…」中設定MySQL Driver。

3.在Library欄位，選擇下載的mysql-connector-java-5.1.10-bin.jar路徑。

4.在Sample URL可設定預設的JDBC連線字串 jdbc:mysql://主機:埠號/資料庫名稱。

如：jdbc:mysql://localhost:3306/name_of_db

[翻譯]如何使用單例設計模式(Singleton design pattern) for PHP

阿育 — Sun, 06 Sep 2009 07:48:16 +0000

今天在找單例設計模式(Singleton design pattern)或稱單例模式(Singleton Pattern)的名詞解釋資料時，找到了一篇「How to use the Singleton design pattern」。

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

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('...');

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

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

翻譯後記

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

超好用的jQuery樣板引擎 – jBind

阿育 — Wed, 17 Jun 2009 11:43:50 +0000

我之前分享過過一篇jQuery樣板的文章 - jQuery的JavaScript 樣板引擎 – royTemplate 裡面有推薦兩個不錯的Javascript樣板，依舊推薦，但我自己寫的那個狗屁不通樣板如果已經使用的人就請勿再使用了，因為使用了這個jBind之後才發現我寫的那個效能奇差無比（差到讓我想噴血），原因是因為我的寫法對效能的影響很大。

今天要介紹的這個jBind樣板引擎的優點剛剛好符合我的需求：

操作簡單（我想沒有人不喜歡簡單吧？）。

要有區塊的功能（這是很常見的需求）。

檔案要小（javascript是在Client端執行的，越小的檔案當然越好）。

執行效能要好。

甚至多了自定義處理的功能。

操作概念一樣是指派JSON變數給樣板，樣板的定義大約如下：

區塊

使用HTML註解表示。例如：



......區塊內的內容.....

若不經過特殊指定，每個樣板需至少指定一個為根區塊。

變數

使用大括號「{」及「}」涵蓋。

例如：{name}

{name}



{role}, {type}

一個完整的樣板定義如下



{name}

    

        {role}, {type}

一個完整的範例
HTML：



	


{thead1}
{thead2}



	


{bookName}
{author}



	


{tfoot1}
{tfoot2}

{thead1}	{thead2}
{bookName}	{author}
{tfoot1}	{tfoot2}

Javascript：

var vars =
{
	thead1:'書名',
	thead2:'作者',
	tfoot1:'書名',
	tfoot2:'作者',
	rows:
	[
		{
			bookName:'jQuery in Action',
			author:'Bibeault, Bear'

		},
		{
			bookName:'Learning jQuery',
			author:'Jonathan Chaffer、Karl Swedberg',

		}
	]
};

//指派樣板JSON變數，並把結果加入id為show的tag中
var node = $('#tableTemplate').bindTo(vars,{appendTo:'#show'});

結果：




書名
作者




jQuery in Action
Bibeault, Bear




Learning jQuery
Jonathan Chaffer、Karl Swedberg




書名
作者

書名	作者
jQuery in Action	Bibeault, Bear
Learning jQuery	Jonathan Chaffer、Karl Swedberg
書名	作者

更多完整、詳細的範例請直接上jBind官網觀看

相關連結：

jBind

把C#與VB.Net當Script執行的兩個工具

阿育 — Tue, 02 Jun 2009 12:50:23 +0000

在寫C#時常常需要執行一小段測試用的程式碼，而不管是使用MS Visual Studio或者是SharpDevelop來寫C#，都需要以開新一個測試用專案的方式來寫，著實很麻煩。

今天看到暗黑執行緒於部落格中發佈了一個工具軟體Mini C# Lab的更新訊息，這是一個可以把C#當成Script來執行的工具，同時它也是由暗黑執行緒所主導的Open Source Project，在同一篇文章中也發現了另一個有異曲同工之妙的工具Snippet Compiler。

Mini C# Lab

Snippet Compiler

Mini C# Lab 與 Snippet Compiler 是兩個屬性相同但用處不同的工具

舉例來說，如果你的測試碼是非常小的一段測試碼，就像它預設的範例碼：

using System;
using System.IO;
using System.Threading;

public class CSharpLab
{
    public static void Test()
    {
        for (int i = 0; i < 20; i++)
        {
            Thread.Sleep(500);
            Console.Write("Hello, World! ");
        }
        Console.WriteLine("\nDone!");
    }
}

這個時候應該使用Mini C#來測試，因為它是以直接擷取的Output的方式來做測試，簡單方便；而Snippet Compiler卻會跑出一個Console視窗。

但如果你的測試碼是比較完整的一段，通常可能是網路上看到的範例，像它預設的範例碼：

using System;
using System.Collections.Generic;

public class MyClass
{
	public static void RunSnippet()
	{

	}

	#region Helper methods

	public static void Main()
	{
		try
		{
			RunSnippet();
		}
		catch (Exception e)
		{
			string error = string.Format("---\nThe following error occurred while executing the snippet:\n{0}\n---", e.ToString());
			Console.WriteLine(error);
		}
		finally
		{
			Console.Write("Press any key to continue...");
			Console.ReadKey();
		}
	}

	private static void WL(object text, params object[] args)
	{
		Console.WriteLine(text.ToString(), args);
	}

	private static void RL()
	{
		Console.ReadLine();
	}

	private static void Break()
	{
		System.Diagnostics.Debugger.Break();
	}

	#endregion
}

這時候就適合使用Snippet Compiler囉，因為Mini C#要求Script裡要有個CSharpLab的類別，並且包含一個Test的方法成員，所以並不適合完整一些的測試程式碼。

總之視情況選擇對的工具，就能加快效率。

相關連結：

Mini C# Lab
Snippet Compiler