jQuery的JavaScript 樣板引擎 – royTemplate

Posted in 二月 25th, 2009 by 阿育 | Filed under 作品分享, 程式設計 | Comments (3)

隨著網頁程式越來越複雜、AJAX應用使用量越來越大，Javascript 呈現 HTML 越來越需要樣板引擎了，今天分享一個因為最近的需求所寫的一個超迷你樣板引擎，也推薦兩個不錯的javascript樣板引擎。

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

操作簡單（我想沒有人不喜歡簡單吧？）。
要有區塊的功能（這是很常見的需求）。
檔案要小（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

特色：

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

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

資料變數採用 JSON格式，樣板變數的格式為： %變數名稱%，例如：%title%
區塊的定義只需要設定HTML tag的屬性blk即可，如：blk=』區塊名稱』。
單一區塊直接指定子值即可，而重複區塊資料指派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)

Tagged : javascript, jquery, jquery plug-in

你可能會感興趣