What's this?
Ajaxコンテンツの開発など、JavaScriptでHTMLを書き出す機会が増えてきた昨今。通常のDOM操作やinnerHTMLでは追いつかなくなってきました。サーバサイドの言語でテンプレートエンジンが普及したように、今後はJavaScriptのテンプレートエンジンも求められてくるのではないでしょうか。JSmartyのような高度なライブラリもありますが、もっとお手軽なものを書いてみました。
How to use
JaLismは、単体のJavaScriptファイル「JaLism.class.js」として提供されます。他のライブラリには依存しませんので、このファイルを読み込むだけで使用できます。各機能は、JaLismクラスのメソッドとして実装されています。
現在のところ、テンプレート変数のアサインと、テンプレートファイルの読み込みのみ対応しています。
最も簡単な使用方法は以下のようになります。
var j = new JaLism();
j.assign('var', '変数です');
alert(j.fetch('test.tpl'));
1行目でオブジェクトを生成し、2行目で変数をアサイン、3行目でテンプレートを呼び出しています。この場合、別途テンプレートファイルをtest.tplとして用意する必要があります。test.tplの内容は以下のようになります。
{$var}
Sample
テンプレート変数に文字列、配列、ハッシュをアサインし、それぞれを呼び出しています。
実際の実行結果はこちら。
test.html
<html>
<head>
<title>JaLism test</title>
<script type="text/javascript" src="JaLism.class.js"></script>
<script type="text/javascript">
window.onload = function() {
var j = new JaLism();
j.assign('key', 'きー');
j.assign('value', 'あたい');
j.assign('param', ['apple', 'banana']);
j.assign('hash', {"one":"わん", "two":"つー"});
document.getElementById('result').innerHTML = j.fetch('test.tpl');
}
</script>
</head>
<body>
<div id="result" style="border:1px solid #666"></div>
</body>
</html>
test.tpl
<p>{$key}:{$value}</p>
<p>{$param[0]} and {$param[1]}</p>
<p>{$hash.one} {$hash.two}</p>
出力結果
きー:あたい apple and banana わん つー
Class Methods
ユーザーが使用するメソッドは以下の通りです。
- void assign(string key, mixed value)
テンプレート変数keyにvalueを代入します。
valueには文字列だけでなく、配列やハッシュを指定することが可能です。- string fetch(string filename)
指定したテンプレートファイルを読み込んで、その内容を返します。
Customize
現在、デリミタの変更のみ対応しています。
var j = new JaLism(); j.left_delimiter = '<%'; j.right_delimiter = '%>';
のように設定すると、テンプレートファイル中で変数を <%$value%> のように記述できるようになります。
デリミタに設定する文字列は、JavaScriptのRegExpオブジェクトによる正規表現にそのまま投げられます。 [%$value%] と書きたい場合は、
var j = new JaLism(); j.left_delimiter = '\\[%'; j.right_delimiter = '%\\]';
としてやる必要があります。また、デリミタ内のスペースを無視するような高級な処理はしていませんので、上記の設定では $value の前後にスペースを入れて [% $value %] のように書くことはできません。この場合はスペースまでデリミタとして登録しなければなりません。また、その場合は当然ですがスペースを省略した場合はデリミタを認識できません。