寝太郎の江戸風呂。ね！

[PR]

2025/12/05 (Fri.)

シンプルな JavaScript テンプレート・エンジン - jTemplate

JavaScript で利用できるテンプレート・エンジンは、後記のものが有名なようです。でも、自作したほうが利用しやすい場合もあります。自分が利用する機能に絞れば、コードもわかりやすく、軽量なものにできます。

そこで作成したものが、シンプルな JavaScript テンプレート・エンジン - jTempalte。

テンプレート変数は、デフォルトでは、PHP のSmarty風の次のようなものを想定しています。

$template ="
<div class="item">
<h4>{$name}</h4>
<p>{$text}</p>
</div>
"

データは、次のようなオブジェクト（連想配列)です。

$values={
 "name" : "NAME",
 "text" : "TEXT",
｝

jTemplate関数は、次のように記述します。

$str = jTemplate($template, $values);

変換後は、次のようになります。

$str ="
<div class="item">
<h4>NAME</h4>
<p>TEXT</p>
</div>
"

テンプレート変数が上記以外にも対応しています。

$template ="
<div class="item">
<h4>{%name%}</h4>
<p>{%text%}</p>
</div>
"

このようにテンプレート変数が上記以外の場合は、第３引数を与えます。

// ver.0.0
$str = jTemplate($template, $values,['{%','%}']);
// ver 0.1.0
$str = jTemplate($template, $values,'{%*%}');

ユーティリティとして、テキストファイルの読み込み、JSON風テキストのオブジェクト化も用意しています。

$str = jTemplate($str,$values,$formats);
$str = jTemplate.load($filepath);
$str = jTemplate.render($filepath,$values,$formats);
$obj = jTemplate.json_decode($JSON);

HTML文書本体とテンプレートファイル、データファイルを分離して管理できます。

【参考】JavaScript テンプレート・エンジン

• Mustache
• Hogan
• Handlebars
• Underscore
• EJS
• jQuery.EJS
• PURE

※　infinite loop「クライアントサイドで動くJavaScript Template Engine７つ」　より。

2013/03/31 (Sun.) Comment(1) JavaScript