色胚子部落 » jquery http://blog.colorbase.tw 訊息多變的時代裡，需要多學習多思考 Mon, 15 Aug 2011 03:29:59 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 解決使用 jQuery.getJSON 時 Session 卻過期期的問題 http://blog.colorbase.tw/web-development/1141 http://blog.colorbase.tw/web-development/1141#comments Sun, 20 Jun 2010 10:06:25 +0000 阿育 http://blog.colorbase.tw/web-development/1141 當我們在做具有權限控管的網頁時，將會用到Session來做為是否已登入的紀錄及處理，通常在判斷為尚未登入時，將直接顯示錯誤訊息頁面或轉到登入表單頁面，但如果使用jQuery.getJSON()來做AJAX應用的話這樣的處理就不恰當了，因為這樣一來Session因為閒置過久而過期的話 getJSON() 將會得到非預期的結果而導致程式發生錯誤。

當然這種問題的解決的辦法有許多個，我們也可以在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);
		});
	});

});
]]> http://blog.colorbase.tw/web-development/1141/feed 5 有趣的 jQuery 快速顯示隱藏元素技巧 http://blog.colorbase.tw/web-development/1063 http://blog.colorbase.tw/web-development/1063#comments Fri, 14 May 2010 10:54:00 +0000 阿育 http://blog.colorbase.tw/?p=1063 今天在 Now you see me… show/hide performance 一文中，看到該文作者分析了各種jQuery顯示、隱藏的作法及其效能比較，最後還提到了一個非常有趣的好方法，他利用禁用、啟用<style>元素的方法來達到套用顯示、隱藏效果，在頁面中需要大量套用情況下效能特別好。

首先利用<style>來定義樣式為隱藏：

<style id="special_hide">
	.special_hide {	display: none;}
</style>

接著在將該<style>元素的disabled屬性設為true使其失去作用，也就是讓他變為顯示，例如jQuery中可以這麼寫：

 $('#special_hide').attr('disabled', true);  // 禁用指定<style>元素

 $('#special_hide').attr('disabled', false); // 啟用指定<style>元素

以下為完整的範例 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
	</script>
	<script type="text/javascript">
	$(function (){
		$('#disableBtn').click(function(){
			$('#special_hide').attr('disabled', true); // 禁用樣式
		});

		$('#enableBtn').click(function(){
			$('#special_hide').attr('disabled', false); // 啟用樣式
		});
	});
	</script>

    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style id="special_hide">.special_hide { display: none; }</style>
  </head>
  <body>

    <button id="disableBtn">取消樣式</button>
    <button id="enableBtn">啟用樣式</button>

    <div class="special_hide">這個元素預設會因為樣式而隱藏</div>

  </body>
</html>

執行範例：

延伸思考

透過禁用、啟用<style>元素的方法，不只可以應用在大量套用顯示、隱藏效果，其實很多效果都可以利用此方法來完成，特別是大量套用時，因為瀏覽器原生的CSS Selector解析，理論上總是會比jQuery Selector來的快。

參考文章

]]> http://blog.colorbase.tw/web-development/1063/feed 4 兩款用於開發 iPhone Web 應用的 UI Framework http://blog.colorbase.tw/web-development/1010 http://blog.colorbase.tw/web-development/1010#comments Wed, 05 May 2010 10:42:04 +0000 阿育 http://blog.colorbase.tw/web-development/1010 最近在雜誌上看到了關於手機平台開發的專欄，裡面提到了手機平台Web上很難做出如同本機應用程式所能做出的使用者體驗(User experience)，雖然這是事實，但透過Framework的輔助多少可降低難度及開發成本。

iUI: iPhone User Interface Framework

image

為iPhone Web UI提供完整的解決方案，只需利用Javascript與標準的HTML就能開發出長得很像iPhone應用程式的Web應用。

網址：http://code.google.com/p/iui/

概觀：http://www.k10design.net/articles/iui/

範例：http://www.k10design.net/articles/iui/demo/

jQTouch

image

這是一個jQuery Plugin，如果熟悉jQuery的話是個不錯的選擇。

網址：http://www.jqtouch.com/

範例：http://www.jqtouch.com/preview/demos/main/

]]> http://blog.colorbase.tw/web-development/1010/feed 0 開始HTML5 – Video http://blog.colorbase.tw/web-development/947 http://blog.colorbase.tw/web-development/947#comments Tue, 27 Apr 2010 10:04:44 +0000 阿育 http://blog.colorbase.tw/?p=947 在HTML5以前若我們要在網頁中播放影片時，需要使用ActiveX或Plug-in的方式來達到，例如：Flash Player、QuickTime等等，但在HTML5之後這些東西成了標準，我們不需再透過額外的外掛來達成，相信這也意味著Web的相關應用將更趨於豐富化。

現在就連 YouTube 也已經測試使用HTML5的Video來做為影片播放介面，因此在實際應用上雖然我們並不一定要走在時代的尖端，但了解一下新技術是有其必要的。

 html5_video

HTML 5  Video 基礎

基本的 HTML5 Video 標記如下，我們可以透過 src 屬性來標明影片的URL：

<video src=影片URL >很抱歉！您的瀏覽器不支援HTML5 Video</video>

雖然上面的方式很簡短，但可惜的是因為目前各家瀏覽器在HTML5 Video的影片格式方面支援不一致，而導致我們若我們想要影片能夠兼容各種主流瀏覽器，我們必須提供這兩種主要的HTML5 Video 格式的影片檔案：

  • Theora/Vorbis (*.ogg ; *.ogv)
  • H.264 / AAC (*.mp4 ; *.m4v)

所以我們必須提供兩種格式讓瀏覽器自行依照自己支援的格式下載並播放，因此我們加入 <source> 來定義多個影片來源，而不是用 <video> 的 src 屬性，例如：

<video>
	<source src="video.ogg">
	<source src="video.m4v">
	很抱歉！您的瀏覽器不支援HTML5 Video
</video>

<video> 的屬性

<video> 除了可以使用 src 屬性來標明影片的URL，我們還可以使用其他的屬性來定義 <video> 的基本樣式或行為。

src

影片的URL。

autoplay

影片是否自動播放，預設為 false。

controls

是否顯示播放控制列，若設定為ture將會顯示播放控制列，這個控制器的樣式是依據瀏覽器而定的，預設為 false。

width

<video> 所佔寬度。

height

<video> 所佔高度。

poster

這如同一些以Flash實現的播放器所提供的「預覽圖」功能一樣，可於此指定預覽圖的URL，當影片尚未開始播放時，將會先顯示這裡所指定的圖片。

其他的屬性

<video>的屬性還有 loopend / loopstart / playcount / start / end / loop 但這些屬性的各個瀏覽器的支援不一，因此目前不是很實用。

簡單的範例

以下的範例會在頁面載入完成後自動播放，並顯示瀏覽器內建的影片播放控制列，在載入完成並播放之前將會顯示所指定的預覽圖。

<video id="myvideo" autoplay controls poster="preview.png" >
	<source src="video.ogg">
	<source src="video.m4v">
	很抱歉！您的瀏覽器不知員HTML5 Video
</video>

<video> 與瀏覽器的支援

目前HTML5的 <video> 僅於以下瀏覽器版本支援：

Chrome4+ / Firefox 3.5+ / Opera 10.5+ / IE 9+ / Safari 4+

以及以下Mobile平台：

iPhone / iPod / iPad / Android OS

替代性的解決方案

在過度時期我們可以使用 video4all 這個開源專案讓更多瀏覽器版本也能支援<video>。

透過 video4all 我們只需要於HTML中加入它所提供的Javascript Library。

<script src="video4all.js" type="text/javascript"></script>

接著我們就可以正常的使用 <video> ，當訪客的瀏覽器不支援 <video> 時 video4all 會自動幫我們將<video>替換成使用Flash的播放器來播放所指定的影片。

<video>
  <source src="video.ogg" type="video/ogg" />
  <source src="video.mp4" type="video/mp4" />
</video>

HTML5 Video 成員

在HTML5中我們可以透過 Video所提供的屬性以及方法來控制影片的播放與取得播放資訊。

play()

開始播放影片。

pause()

影片暫停播放。

currentTime

numeric 目前的播放指標。

readyState

影片讀取狀態。

  • HAVE_NOTHING = 0
  • HAVE_METADATA = 1
  • HAVE_CURRENT_DATA
  • HAVE_FUTURE_DATA = 2
  • HAVE_ENOUGH_DATA = 3

paused

boolean 是否停止

muted

boolean 是否為靜音。

volume

numeric 取得或設定音量值。

ended

boolean 播放指標是否已經到最後。

搭配jQuery的簡單HTML5 Video 控制範例

請點我觀看範例

simple.html

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML5 Video simple test</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
		<script src="init.js"></script>
	</head>

	<body>
		<p><a href="http://blog.colorbase.tw/web-development/947">回文章</a></p>
		<video id="myvideo" poster="html5_video.png" >
			<source src="video.ogg">
			<source src="video.m4v">
			很抱歉！您的瀏覽器不支援 HTML5 Video
		</video>
		<div id="state"></div>
		<p><button id="play">Play</button><button id="pause">Pause</button></p>
		<ul id="statelist"></ul>
	</body>
</html>

init.js

$(function(){
	var video = $('#myvideo')[0];//取得video
	var statelist = $('#statelist');
	var videoStateTexts = [
		'HAVE_NOTHING','HAVE_METADATA','HAVE_CURRENT_DATA',
		'HAVE_FUTURE_DATA','HAVE_ENOUGH_DATA'
	];
	var pr = ['currentTime','readyState','paused','muted','volume','ended'];

	$('#play').click(function(){
		video.play(); //播放影片
	});

	$('#pause').click(function(){
		video.pause(); //停止播放
	});

	var t = setInterval(function(){
		statelist.empty();
		$('#state').text(videoStateTexts[video.readyState]);
		for(x in pr){
			statelist.append($('<li><storng>'+ pr[x]  + ' : ' + video[pr[x]] + '</strong></li>'));
		}
	},100);
});

播放介面的解決方案

雖然我們可以使用Javascript自行控制HTML5 Video的播放，也意味著我們可以自行開發更漂亮美觀的介面，但這終究會增加許多開發成本，目前已經有許多HTML5 Video Player，不僅提供漂亮的介面，甚至我們還可以根據需求自定播放器外觀。

Open Standard Media Player

非常專業且完整度極佳的HTML5 Video 播放器。

image

Video for Everybody!

簡單清爽的播放介面。

image

SublimeVideo

典雅的播放介面。

image 

Kaltura

能整合jQuery UI訂製介面。

image

OIPlayer jQuery plugin

jQuery的Plugin

image

參考資料

]]> http://blog.colorbase.tw/web-development/947/feed 5 開始HTML5 – Web Workers http://blog.colorbase.tw/web-development/888 http://blog.colorbase.tw/web-development/888#comments Fri, 23 Apr 2010 17:11:00 +0000 阿育 http://blog.colorbase.tw/?p=888 HTML5帶來了許多的改變，除了標記語意上的增強之外，最令人震撼的莫過於它所附屬的Javascript APIs。而 Web Workers 是 HTML5 提供的一個多執行緒(Multi-Thread)的解決方案，讓我們可以把需要大量運算的程式交由Web Workers去做背景執行，如此的好處就是其他的工作仍可以順利進行。

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

html5_web_workers

HTML5 的不同

標記的不同

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

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

DOCTYPE 變簡潔了

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

<!DOCTYPE html>

標籤不一定要閉合

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

<input type="text" id="name" />

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

<input type="text" id="name">

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

<meta charset="UTF-8">

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簡單的操作流程圖如下：

html5-web-workers

搭配jQuery的簡單Web Worker範例

點我觀看Web Workers Demo

worker.html

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Worker Test</title>
		<link rel="stylesheet" href="worker.css" type="text/css" media="screen">
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
		<script src="init.js"></script>
	</head>

	<body>
		<a href="#" id="startWorker">開始</a>
		<ul id="worker-list"></ul>
		<a href="#">回文章</a>
	</body>
</html>

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<e.data; i++) {
		//觸發 worker.onmessage 傳入 i
		if(0 === i % 10 ) postMessage(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 = $('<li />');
		var msg = $('<span class="message">Waitting...</span>');

		//關閉鈕
		var close = $('<span class="close">X</span>').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))
	}
});
]]> http://blog.colorbase.tw/web-development/888/feed 6 使用 PHP 判斷 jQuery 傳來的 AJAX 請求類型 http://blog.colorbase.tw/web-development/668 http://blog.colorbase.tw/web-development/668#comments Sun, 07 Mar 2010 08:49:35 +0000 阿育 http://blog.colorbase.tw/?p=665 今天看到 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

]]> http://blog.colorbase.tw/web-development/668/feed 0 超好用的jQuery樣板引擎 – jBind http://blog.colorbase.tw/programming/592 http://blog.colorbase.tw/programming/592#comments Wed, 17 Jun 2009 11:43:50 +0000 阿育 http://blog.colorbase.tw/?p=592 我之前分享過過一篇jQuery樣板的文章 - jQuery的JavaScript 樣板引擎 – royTemplate 裡面有推薦兩個不錯的Javascript樣板，依舊推薦，但我自己寫的那個狗屁不通樣板如果已經使用的人就請勿再使用了，因為使用了這個jBind之後才發現我寫的那個效能奇差無比（差到讓我想噴血），原因是因為我的寫法對效能的影響很大。

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

  • 操作簡單（我想沒有人不喜歡簡單吧？）。
  • 要有區塊的功能（這是很常見的需求）。
  • 檔案要小（javascript是在Client端執行的，越小的檔案當然越好）。
  • 執行效能要好。
  • 甚至多了自定義處理的功能。

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

    區塊

    使用HTML註解表示。例如：

    

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

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

    變數

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

    例如：{name}

    {name}



{role}, {type}

    一個完整的樣板定義如下

    

{name}

    

        {role}, {type}

    一個完整的範例
    HTML：

    

    
	


    
{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

    
    


    
書名
作者

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

    相關連結：

    ]]>     http://blog.colorbase.tw/programming/592/feed 0     jQuery的JavaScript 樣板引擎 – royTemplate http://blog.colorbase.tw/sharing/551 http://blog.colorbase.tw/sharing/551#comments Tue, 24 Feb 2009 16:07:00 +0000 阿育 http://blog.colorbase.tw/?p=551 隨著網頁程式越來越複雜、AJAX應用使用量越來越大，Javascript 呈現 HTML 越來越需要樣板引擎了，今天分享一個因為最近的需求所寫的一個超迷你樣板引擎，也推薦兩個不錯的javascript樣板引擎。

    我對javascript樣板引擎的需求大致如下：

    1. 操作簡單（我想沒有人不喜歡簡單吧？）。
    2. 要有區塊的功能（這是很常見的需求）。
    3. 檔案要小（javascript是在Client端執行的，越小的檔案當然越好）。

    先來介紹兩個不錯的樣板引擎

    1. jTemplates

    以jQuery為基礎開發的樣板引擎，感覺相當不錯，檔案很小(壓縮後約4kb)，樣板語法類似Smarty (可見其功能完整性足夠，而且Smarty知名度夠，因此對很多人來說Smarty樣板語法很容易上手)
    官方的特色介紹：

    • Fast*, Small (<10kB)
    • 100% in JavaScript
    • Work with Ajax and/or JSON
    • Allow to use JavaScript code in templates
    • Work with jQuery
    • Allow to build cascading templates
    • Allow to define parameters in templates
    • Syntax similar to Smarty
    • Live Refresh! automatic update content from server
    • Free to commercial or non-commercial use!

    http://jtemplates.tpython.com/

    2.JavaScriptTemplates

    純Javascript的樣板引擎，功能感覺相當強大，也很複雜

    http://code.google.com/p/trimpath/wiki/JavaScriptTemplates

    royTemplate for jQuery plug-in

    因為我喜歡簡單，所以懶人專用、操作簡單的jQuery早成了我寫javascript時必定會一起載入的library，原本這方面的需求都是直接把jQuery強大的DOM操作能力當成樣板引擎在用，但最近發現這樣的寫法真夠讓人吐血的麻煩，因此就在網路上找到上面推薦的那兩個感覺不錯的樣板引擎。
    只是我的需求還不到那麼複雜的功能，檔案小、操作簡單的樣板引擎才是我需要的，因此才會重新發明輪子，把我原本的寫法進一步寫成一個jQuery 的樣板引擎Plug-in，好讓自己以後不用再邊寫邊吐血 XD

    特色：

    1. 操作簡易，只需指派JSON資料即可。
    2. 沒有複雜樣板引擎語法，區塊的是否呈現完全取決於資料變數及HTML結構，適合以WYSIWYG編輯器編輯樣板(如Dreamweaver)。
    3. 支援階層區塊
    4. 檔案本身size迷你(以jQuery為基礎)，原始大小 2.11 KB，壓縮後1.17 KB。

    使用概念很簡單，有用過Web Server端語言(如PHP)樣板引擎的人應該會很容易理解，使用概念如下：

    1. 資料變數採用 JSON格式，樣板變數的格式為： %變數名稱%，例如：%title%
    2. 區塊的定義只需要設定HTML tag的屬性blk即可，如：blk=』區塊名稱』。
    3. 單一區塊直接指定子值即可，而重複區塊資料指派JSON array資料即可

    基本範例：
    HTML，樣板的部份用一個tag包裹起來，並設定style=』display:none』，用以隱藏原始樣板

    

    

    

    %hello%
    

    這個區塊將被顯示
    

    這個區塊不會被顯示！

    javascript，將結果顯示在id=』result』的tag裡面

    //JSON變數資料
var vars =
{
	hello:'Hello world!!',
	block1:{}
};
/*
以下資料最終結果一樣
var vars =
{
	hello:'Hello world!!',
	block1:true,
	block2:undefined;
};
*/

//操作方式
/*
	結果 = $(樣板).royTemplate(JSON資料);
*/
var result = $('#template').royTemplate(vars);
$('#result').html(result);

    結果

    Hello world!!

    這個區塊將被顯示

    結果HTML，由於block2沒有指派資料，所以不會顯示

    

    

    Hello world!!
    

    這個區塊將被顯示
    

    

    

    

    

    %hello%
    

    這個區塊將被顯示
    

    這個區塊不會被顯示！

    表格區塊範例：

    HTML

    

    

    


    
%title1%
%title2%

    

    
%bookName%
%author%

    javascript，由於要讓rows區塊以重複區塊的方式呈現，因此JSON變數資料中指派rows陣列以顯示多列資料

    //JSON變數資料
var vars =
{
	title1:'書名',
	title2:'作者',
	rows:
	[
		{
			bookName:'jQuery in Action',
			author:'Bibeault, Bear'

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

		},
		{
			bookName:'JavaScript Programmer’s Reference',
			author:'Horn, Shannon'
		}
	]
};
//如果rows區塊只需顯示一次，則不需指派Array資料，改為如下
/*
var vars =
{
	title1:'書名',
	title2:'作者',
	rows:
	{
		bookName:'jQuery in Action',
		author:'Bibeault, Bear'
	}
};
*/

$('#result').html($('#tableTemplate').royTemplate(vars));

    結果HTML

    <div id="result">
	<table id="tableTemplate" border="0" cellspacing="2" cellpadding="5" width="900">
		<tbody>
			<tr>
				<td bgcolor="#cccccc" width="62%">書名</td>
				<td bgcolor="#cccccc" width="38%">作者</td>
			</tr>
			<tr><td><strong>jQuery in Action</strong></td><td>Bibeault, Bear</td>
			</tr>
			<tr><td><strong>Learning jQuery</strong></td><td>Jonathan Chaffer、Karl Swedberg</td>
			</tr>
			<tr><td><strong>JavaScript Programmer’s Reference</strong></td><td>Horn, Shannon</td>
			</tr>
		</tbody>
	</table>
</div>
<div style="display: none">
	<table id="tableTemplate" border="0" cellspacing="2" cellpadding="5" width="900">
		<tbody>
			<tr>
				<td bgcolor="#cccccc" width="62%">%title1%</td>
				<td bgcolor="#cccccc" width="38%">%title2%</td>
			</tr>
			<tr blk="rows"><td><strong>%bookName%</strong></td><td>%author%</td>
			</tr>
		</tbody>
	</table>
</div>
    

    

    下載：royTemplate 
    包含royTemplate的原始檔及壓縮後的檔案，與四個範例(基本Demo、表格列表(階層區塊)Demo、綜合Demo、AJAX Demo for PHP)
    
]]>    
			http://blog.colorbase.tw/sharing/551/feed
		3
		    
		
		為jQuery擴充功能，得到DOM同級元素
		http://blog.colorbase.tw/programming/506
		http://blog.colorbase.tw/programming/506#comments
		Sun, 31 Aug 2008 11:50:53 +0000
		阿育
				
		
		

		http://blog.colorbase.tw/?p=506
		
			jQuery提供簡單易用的DOM操作能力，讓我們可以專注於Javascript程式的邏輯而不用去理會煩人的DOM操作、瀏覽器相容等問題。
    
我們可以利用next()來取得同級的下一個元素，利用prev()來取得同級的上一個元素，但是jQuery並無直接由函數提供取得同級的第一個元素、同級的最後一個元素、同級的任一元素，因此我們可以利用jQuery強大的Selector（選擇器）達成這樣的需求，並替jQuery擴充功能。
    

    
擴充jQuery的功能函數，把以下程式碼加入JQuery中
    

    

    //取得第一個同級元素
$.fn.first = function()
{
	return this.parent().children(":first");
}
//取得最後一個同級元素
$.fn.last = function()
{
	return this.parent().children(":last");
}
//由索引值取得任一個同級元素，索引值從0開始
$.fn.eq = function(eIdx)
{
	return this.parent().children(":eq("+ eIdx +")");
}

    

    

    使用範例 – 利用jQuery擴充操作DOM，取得同級的第一個元素、同級的最後一個元素、同級的任一元素：
    

    

    $(function()
{
	alert($("#item3").first().attr("id"));//顯示item1（同級的第一個元素）
	alert($("#item3").last().attr("id"));//顯示item5（同級的最後一個元素）
	alert($("#item3").eq(1).attr("id"));//顯示item2（同級的任一元素）
});

    

    

    以上範例需搭配以下HTML內容
    

    

    

      

    • 項目一
      • 

    • 項目二
      • 

    • 項目三
      • 

    • 項目四
      • 

    • 項目五
      • 

    

    

    

    

    關於Selector可進一步參考官方提供的jQueryAPI詳細的說明及範例：
    
API/1.2/Selectors
    

    在簡睿隨筆中也有中文一覽表及說明：
    
jQuery神奇的選擇器(Selector)
    
]]>    
			http://blog.colorbase.tw/programming/506/feed
		0