■ウェブライフハック＞JavaScript＞

JavaScriptテンプレートエンジンを動かしてみる

JavaScriptのテンプレートエンジンの仕組みを解読してみる - ウェブライフハック　の記事で解読したテンプレートエンジンを動かして見ます。

参考：
Latest topics > PHPとかerbのようなテンプレートをJavaScriptで。 - outsider reflex
Latest topics - outsider reflex
Movable TypeにJavaScriptを直接記述する方法 - ウェブライフハック

<script type="text/javascript">
function parseTemplate(aCode, aContext) {
  var __parseTemplate__codes = [];
  aCode.split('%>').forEach(function(aPart) {
    var strPart, codePart;
    [strPart, codePart] = aPart.split('<%');
    __parseTemplate__codes.push('__parseTemplate__results.push('+
                                strPart.toSource()+
                                ');');
    if (!codePart) return;
    if (codePart.charAt(0) == '=') {
      __parseTemplate__codes.push('__parseTemplate__results.push(('+
                                  codePart.substring(1)+
                                  ') || "");');
    }
    else {
      __parseTemplate__codes.push(codePart);
    }
  });
  var __parseTemplate__results = [];
  with(aContext|| {}) {
    eval('(function() { '+__parseTemplate__codes.join('\n')+' }).call(aContext|| {})');
  }
  return __parseTemplate__results.join('');
}
var source = <![CDATA[
      大切な事なので5回言います。
      <% for (var i = 0; i < 5; i++) { %>
        今日は<%= today %>です。
      <% } %>
      オーケー？
    ]]>.toString();
var params = {
      today : (new Date()).toString()
    };
var result = parseTemplate(source, params);
document.write(result);
</script>

実行結果。動作確認は、FireFox3のみです。

追記。
あれれ、動きません。Firebug、およびNetBeansで確認したところ、SyntaxErrorなどが出ていた・・・。
ですので、以下のようにコードを修正してみる。
エラーが出た箇所の、リストっぽく、[strPart, codePart] = ～　とsplitして代入しているとこと、[CDATA～　の部分を修正しました。

修正したソース

<script type="text/javascript">
function parseTemplate(aCode, aContext) {
  var __parseTemplate__codes = [];
  aCode.split('%>').forEach(function(aPart) {
    var strPart, codePart;
//    [strPart, codePart] = aPart.split('<%');
    strPart = aPart.split('<%')[0];
    codePart = aPart.split('<%')[1];
    __parseTemplate__codes.push('__parseTemplate__results.push('+
                                strPart.toSource()+
                                ');');
    if (!codePart) return;
    if (codePart.charAt(0) == '=') {
      __parseTemplate__codes.push('__parseTemplate__results.push(('+
                                  codePart.substring(1)+
                                  ') || "");');
    }
    else {
      __parseTemplate__codes.push(codePart);
    }
  });
  var __parseTemplate__results = [];
  with(aContext|| {}) {
    eval('(function() { '+__parseTemplate__codes.join('\n')+' }).call(aContext|| {})');
  }
  return __parseTemplate__results.join('');
}
var source = '\
      大切な事なので5回言います。\
      <% for (var i = 0; i < 5; i++) { %>\
        今日は<%= today %>です。\
      <% } %>\
      オーケー？';
source.toString();
var params = {
      today : (new Date()).toString()
    };
var result = parseTemplate(source, params);
document.write(result);
</script>

実行結果。

スペースなどがそのままで綺麗に整形できてないけど、JavaScriptでのテンプレートエンジンが動きました。
ちょっと、感動。

Latest topics > PHPとかerbのようなテンプレートをJavaScriptで。 - outsider reflex　の記事を書いていただいた、Latest topics - outsider reflexさんのブログに感謝です。

JavaScriptでnewを忘れるとグローバル変数を上書きしてしまう

JavaScriptのテンプレートエンジンの仕組みを解読してみる

日時: 2009年05月29日 16:12

トラックバック

■この記事のトラックバックURL:
http://www.mapee.jp/mpe334/mt-tb.cgi/479

この記事にトラックバックされる方は、参照先が分かるようにするために、「JavaScriptテンプレートエンジンを動かしてみる」へのリンクをお願いいたします。
以下のHTMLタグをトラックバック送信元ページ内に挿入して下さい。

※この記事へのリンクがない、また関連のないページからのトラックバックは反映されませんので、ご了承下さい。

このカテゴリーの記事(新着順)

　JavaScript