前の記事 ≪:不要コンポーネントを省いたWindowsのインストールCDを作成できる「nLite...
次の記事 ≫:PHPで外部サーバ上のPHP関数を簡単に実行できる『PHPRPC』

高速&シンプルなJavascriptテンプレートシステム『RND』

2006年08月14日-はてなブックマーク

スポンサード リンク
[PR] 日々膨大に出現するJS/CSSライブラリ等を意識にとどめておく方法
amix.dk : RND - fast and simple JS template system

As web applications get more dynamic and complex, it's crucial to know what's the fastest way to render content. I have done some research and I am gladly sharing it with you.

高速&シンプルなJavascriptテンプレートシステム『RND』の紹介。

Ajaxなどを駆使して動的にWebアプリケーションのHTMLを書き換える手法は、最近のWebアプリのトレンドとなっています。
動的にWebアプリケーションのHTMLを書き換える方法としては次があります。

  • document.createElementでHTML要素を動的に作成し、appendChildなどでHTMLのDOMツリーに追加する方法
  • element.innerHTMLによってHTMLを直接書き換える方法
  • テンプレートシステムの利用

これらの方法のそれぞれのベンチマークを取ると、
document.createElementによる方法が最も遅く、element.innerHTMLの3倍も時間がかり、結果としてelement.innerHTMLを書き換える方法が最も速いようです。

かといって、element.innerHTMLによって直接HTMLを埋め込む記述は、HTMLが所々に散在してコードが読みにくくなったりしてしまい、テンプレートの再利用も出来ません。

innerHTMLで直接HTMLを挿入している例)
  elem.innerHTML = '<div id="'+idname+'">'+htmlvalue+'</div>';

緑部分、HTMLと変数が混在していて、読みづらく、再利用もできない。そして、こういったコードが所々に散在してしまうのでコードの全体的な可読性が下がる。

ということでテンプレートシステムの登場。

テンプレートシステムといっても、次のような関数を一個定義するだけです。

function RND(tmpl, ns) {
  var fn = function(w, g) {
    g = g.split("|");
    var cnt = ns[g[0]];
    for(var i=1; i < g.length; i++)
      cnt = eval(g[i])(cnt);
    return cnt || w;
  };
  return tmpl.replace(/%(([A-Za-z0-9_|.]*))/g, fn);
}

関数を用意したら、次のコードを記述します。

var tmpl = '<a href="%(link)">%(value)</a>';
var name_space = {'link': 'http://amix.dk', 'value': 5.5};
alert( RND(tmpl, name_space) );

tmpl がHTMLテンプレート変数で、name_space が割り当てる変数です。
テンプレートの書式は、%(変数名) のようにします。割り当てる変数はjson形式で定義し、関数に渡します。
このJavaScriptプログラムを実行すると、<a href="http://amix.dk">5</a> がアラート出力されます。

関数を通すだけなので、パフォーマンスも出るようです(サイトのベンチマーク結果参照)。
テンプレートシステム部分のコード量も関数一個と、少ないのでサイズとしても気にならないですね。
そして、テンプレートと変数を分けることにより、データとHTMLの分離ができ、ソースコードの可読性を上げることができます。
更に、テンプレート部分が他の部分でも再利用できる形になりました。

上記の小さなサンプルではそのメリットを感じ取りにくいかもしれませんが、
テンプレートを別のファイルに定義しておいたり、クラスのメンバ変数に持たせておくことで便利に使えそう。

Javascript 開発規模が大きくなり、コードの肥大化がおこるにつれこういった開発手法が必要になってきますね:-)

関連エントリ
JavaScriptで動くテンプレートエンジン:JSmarty

関連の記事検索:JavaScript, Ajax, テンプレート, プログラミング, チュートリアル, ライブラリ
スポンサード リンク

By.KJ : 2006年08月14日 09:09 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)