色胚子部落 » javascript 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 檢測訪客瀏覽器對 HTML5 與 CSS3 的支援程度 http://blog.colorbase.tw/web-development/1099 http://blog.colorbase.tw/web-development/1099#comments Sun, 23 May 2010 02:26:00 +0000 阿育 http://blog.colorbase.tw/web-development/1099 由於各主流瀏覽器對於 HTML5 與 CSS3 中支援的程度不一，如果我們想要搶先嘗試使用它們的的新功能，卻又想要在各種瀏覽器中保持一定的可用性，那麼勢必要在 Javascript 中撰寫相關的判斷程式碼來進行判斷瀏覽器是否支援新特性，如果訪客的瀏覽器支援，則使用新功能，而反之則執行替代的程式碼或者提示使用者所使用的瀏覽器將會有部分進階功能無法使用。

關於目前各主流瀏覽器的支援情況可參考之前的文章 HTML5 與 CSS3 準備好了嗎？

自行撰寫 Javascript 進行 HTML5 與 CSS3 的檢測

如果我們使用到的 HTML5 與 CSS3 新特性並不多，則可以自行撰寫相關的檢測碼來進行判斷，至於該如何檢測，則可參考：
The All-In-One Almost-Alphabetical No-Bullshit Guide to Detecting Everything

文章中除了羅列一大堆 HTML5 等檢測的片段程式碼，也提到了一個很好用的函式庫 Modernizer。

Modernizr

modernizr

Modernizr 是一個非常小巧的函式庫 (大約 8 KB，gzip壓縮後大約3.9 KB)，它用於檢測瀏覽器對於 HTML5 與 CSS3 支援程度，其首頁也提供了一份即時的檢測表，當使用不同的瀏覽器進入該網站時，將可看到不同的檢測結果，這個檢測表其實也可以當做一種瀏覽器支援參考，當安裝了新版本的瀏覽器時只要進入這個網站就可以即時知道瀏覽器是否有增加了什麼 HTML5 或 CSS3 的新功能。

先讓  IE 支援 HTML5 的新標籤

由於 IE9 之後才認得 HTML5 的新標籤，因此若要讓舊版本的IE也認得 HTML5的新標籤，則可以使用html5shiv來讓 IE 支援 HTML5 的新標籤，使用方式為加入以下的語法於<head>之間。

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

使用 Modernizr

Modernizr 的使用方式很簡單，只需於<head>之間使用<script>標籤引入這個函式庫即可：

<script src="modernizr.min.js"></script>

接著我們就可以在 Javascript 或 CSS 中做相對應的判斷及處理。

在 Modernizr 中使用 Javascript 判斷

Modernizr 載入後，即可使用 Modernizr.特性名稱的方式來判斷瀏覽器的支援，例如以下為判斷瀏覽器是否支援 canvas。

if (Modernizr.canvas) { //判斷瀏覽器是否支援 canvas
	alert("支援");
}else{
	alert("不支援");
}

在 Modernizr 中使用 CSS 判斷

Modernizr 使用了一個非常聰明的方法來達成 CSS 判斷的功能，它在載入完成後將會自動檢測瀏覽器的支援情況並將其寫入 <html> 標籤的 class 屬性，其類別名稱的格式為：

支援：特性名稱

不支援：no-特性名稱

例如當瀏覽器支援支援 canvastext 時，<html>標籤的 class 屬性中將會有一個 canvastext 值。

相反的當瀏覽器不支援 canvastext 時，<html>標籤的 class 屬性中將會有一個 no-canvastext值。

如此一來我們就可以輕易的使用 CSS Selector 來做出相對應的判斷，例如，在 HTML 中：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Modernizr Test</title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen">
	<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<script src="modernizr.min.js"></script>
</head>
<body>
	<div id="canvasContainer">
		 <canvas id="c"></canvas>
		 <p class="supported">瀏覽器支援 canvastext</p>
		 <p class="noSupported">瀏覽器不支援 canvastext！</p>
	</div>
</body>
</html>

在 style.css 中，透過以下的 CSS，在支援 canvastext 中將顯示「瀏覽器支援 canvastext」，反之則顯示「瀏覽器不支援 canvastext！」。

#canvasContainer p{
	display: none;
}

.canvastext #canvasContainer .supported {
	display: block;
}

.no-canvastext #canvasContainer .noSupported {
   display: block;
}

點我觀看 Modernizr CSS Selector 檢測範例

同理，若要利用 CSS 判斷瀏覽器是否支援 video 則可使用「.video / .no-video」兩個 CSS 類別。

更多 Modernizr 支援的 HTML5 與 CSS3 特性檢測，請參閱其使用手冊。

需注意的事情

  1. Modernizr 只能提供檢測而不能替瀏覽器增加新功能以達成兼容。
  2. 若要兼容 video 可使用 video4all來達成，更多詳情可參考 開始HTML5 – Video。
  3. 若要讓 IE 6, 7, 8 支援 CSS3 可使用CSS3 support for IE來達成。

相關連結與參考文章

]]> http://blog.colorbase.tw/web-development/1099/feed 6 有趣的 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 – 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 XRefresh – 網頁開發解放F5 http://blog.colorbase.tw/web-development/667 http://blog.colorbase.tw/web-development/667#comments Sat, 06 Mar 2010 12:27:46 +0000 阿育 http://blog.colorbase.tw/?p=659 在寫網頁的時候通常我們經常需要在編輯器與瀏覽器切換，這種情況特別容易發生在寫CSS及Javascript時，就算是使用的是視覺化的編輯器，例如Dreamweaver，也難以避免來回切換瀏覽器的來檢視最正確的結果，而且不僅需要來回切換檢視甚至還得不斷按F5重新整理網頁，長久下來這是一件非常費力的工作，XRefresh 便是解決這種困擾的工具。

運作方式

它的運作方式為透過安裝一個常駐於系統列的監視器，監視我們所設定的目錄及檔案，當檔案發生變動的時候，它會將資訊傳達給安裝於瀏覽器中的插件進行自動重新整理網頁的動作，而目前 XRefresh 提供Firefox及IE的插件。

以下是官方提供的運作示意圖：

via http://xrefresh.binaryage.com/

在 Windwos 上使用 XRefresh

安裝完畢後啟動 Xrefresh 將會出現在系統列中：

接著按下Tryicon選單的Configuration，進行目錄監視設定：

以上圖的設定來說，我設定了監視D:\xrefresh_test\ 裡面的所有 Javascript的檔案

假設在那個目錄裡面有 index.html 裡面引入了 test.js，現在就可以使用Firefox 打開 index.html並於該分頁啟用Firebug，且將Xrefresh啟用：

現在只要我一更動test.js並儲存的話，那個分頁就會自動重新整理了，甚至如同官方所給的示意圖，裝上雙螢幕的話連切換都不必了，這樣是不是很方便、很有效率呢？

如果不想要重新整理整個頁面，還可以啟用「Use Soft Refresh for CSS」及「Use Soft Refresh for JS」讓XRefresh只重新載入CSS或JS而不是整個頁面重新載入。

至於IE的話概念上大同小異，有興趣的話可以觀看官方的介紹。

PS.XRefresh 支援 Windows 及 OSX。

相關連結
]]> http://blog.colorbase.tw/web-development/667/feed 1 網頁使用特殊字型的解決方案 http://blog.colorbase.tw/web-development/651 http://blog.colorbase.tw/web-development/651#comments Tue, 15 Dec 2009 01:30:35 +0000 阿育 http://blog.colorbase.tw/?p=651 字型的兼容對於網頁設計而言是一個很頭痛的問題，如果在網頁中使用特殊字型，而訪客的電腦中沒有安裝這個字型，將會因為無法正確顯示字型而導致網頁的設計走味。因此一般在設計網頁的時候只能選擇通用的字型，如：Verdana, Geneva, sans-serif,Georgia這些芭樂到不行的字型，結果是可能會讓外觀大打折扣。

很久以前若要設計有字型樣式的文字，會用圖片來替代文字，但自從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/

碎碎念一下：

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

]]> http://blog.colorbase.tw/web-development/651/feed 4 超好用的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
		    
		
		解決一個頁面有兩個FCKeditor時，無法使用FCKeditorAPI.GetInstance的問題
		http://blog.colorbase.tw/programming/509
		http://blog.colorbase.tw/programming/509#comments
		Thu, 18 Sep 2008 05:56:19 +0000
		阿育
				
		
		

		http://blog.colorbase.tw/?p=509
		
			FCKeditor跟Wordpress使用的TinyMCE一樣，都是OpenSource的WYSIWYG Editor(所見即所得編輯器)，一直以來比較習慣用FCKeditor這套編輯器來幫網頁加入可以編輯HTML的功能，但今天突然發現如果一個頁面有兩個FCKeditor且在Firefox運行時，若要使用FCKeditorAPI.GetInstance()來取得編輯器的instance，只有第一個可以正確取得，第二個將會是undefined，第三個以上沒試但應該也難逃厄運了。
    

    
運行環境：
    

      

    • Firefox 3.0.1
      • 

    • FCKeditor 2.6.3
      • 

    

    發生錯誤可能原因：
    

      

    1. fckeditorcode_gecko.js 有Bug
      2. 

    2. Firefox有Bug或與FCKeditor有小部份衝突
      3. 

    

    解決概念：
    

    如果是第一個原因，我實在沒興趣把壓縮過的fckeditorcode_gecko.js解回來檢查(壓縮過都還有253K啊！)，更別說Firefox有bug能幫上什麼忙了，不過幸好在FCKeditor JavaScript API有提到，可以建立一個名為FCKeditor_OnComplete的callback function，當FCKeditor載入完畢後將會呼叫這個function並傳入一個參數，這個參數就是目前裝載完畢的FCKeditor Instance，只要把這個參數記錄下來，就可以直接使用Instance，不需要用FCKeditorAPI.GetInstance()來取得，這樣一來便解決問題了。
    

    解決方式：
    

    在FCKeditor載入之前加入以下Javascript
    

    

    //修正FckEditor錯誤
var __fckEditorInstance_  = new Array();//用來儲存FCKeditor Instance的陣列

function FCKeditor_OnComplete( editorInstance )
{
	__fckEditorInstance_[editorInstance.Name] = editorInstance;
}

function getFckInst(idname)
{
	return __fckEditorInstance_[idname];
}

    

    

    之後就可以利用getFckInst()來代替FCKeditorAPI.GetInstance()取得FCKeditor Instance
    
]]>    
			http://blog.colorbase.tw/programming/509/feed
		4