用 Jemplate 打造整個網站

[gugod]

Jemplate 是 <a href="http://ingy.net/>Ingy</a> 近來在 Javascript
語言中最大的貢獻。將 <a
href="http://www.template-toolkit.org/">Template Toolkit</a>
這個以語，移植到了 Javascript 上。

這種說法似乎有種「什麼？竟然用 Javascript 做了
Interpreter？」的感覺。不過並不是。整個 Jemplate
畫分成兩大部份。一是前端，也就是
Jemplate.js，二是後端，後端是 Jemplate.pm。是個 Perl
模組。

Jemplate.js
並沒有直譯的能力。甚至，它連解析的能力都沒有。它的能力有三項，其一是送
Ajax Request，其二是更新 DOM 的內容，其三，只是把
Jemplate.pm
事先編譯好的模版全部用一個物件存起來而已。

主要 Jemplate.js 的使用方式如下：

var data = Ajax.get('url/data.json');
var elem = document.getElementById('some-div');
elem.innerHTML = Jemplate.process('my-template.html', data);

或

Jemplate.process('my-template.html', 'url/data.json',
'#some-div');

簡單的說，就是它可以將模版畫在 DOM
上，並且，模版裡的變數可以利用 Ajax
取得（當然也可以直接寫在 Javascript
裡）。而模版的寫法，是使用 Template Toolkit
這個語言。連接這所環節的，便是 jemplate
（小寫）這個指令。這個指令可以將一個 Template Toolkit
檔案編譯成一個 Javascript 函式。如果有個 hello.tt2
內容如下：

Hello, [% user %]

可知這個模版需要一個變數 "user"。呼叫 "jemplate
--compile hello.tt2" 之後，編譯成 Javascript
之後的結果如下：

Jemplate.templateMap['hello.tt2'] = function(context) {
if (! context) throw('Jemplate function called without context\n');
var stash = context.stash;
var output = '';

try {
output += 'Hello, ';
//line 1 "hello.tt2"
output += stash.get('user');
output += '\n\n';
}
catch(e) {
var error = context.set_error(e, output);
throw(error);
}

return output;
}

就是利用這樣的概念，使得 Javascript
這端，也具有模版能力。比起 TrimPath 的 JST
來講，因為編譯是事先做好的，所以比較省時一點。

並且，已經有人利用 Jemplate 打造一整個網站：

http://atouchofglasss.com/

看它的 HTML
源碼就可以知道，幾乎是空的。而整個網站的內容，都變成了一個大
Javascript。雖然一開始載入需要一點時間，但之後所有點擊，都不需要再對伺服器發出任何要求。現在
Jemplate 專案自已的網站也已經採用這種做法：

http://jemplate.net/

accessibility
可能會打個折扣，但是這也並不是完全不能克服的。再說，如果是撰寫「應用程式」的概念的話，也可能不必為了
SEO 而考慮 accessibility 問題。

隨著 Browser
能力愈來愈穩定而豐富，個人電腦裝置愈來愈快速，把多一點事情放在客戶端完成，已經不再需要斤斤計較了。所以，有更多有趣的事可以開始去玩、去實做。

Cheers,
Kang-min Liu