- # プログラミング全般 > JavaScript
JavaScriptテンプレートエンジンを動かしてみる
スポンサーリンク
スポンサーリンク
ライフスタイル関連のコンテンツ
お金 | 仕事 | 勉強 | プライベート | 健康 | 心
プログラミング関連のコンテンツ
C言語/C++入門 | Ruby入門 | Python入門 | プログラミング全般
お金 | 仕事 | 勉強 | プライベート | 健康 | 心
プログラミング関連のコンテンツ
C言語/C++入門 | Ruby入門 | Python入門 | プログラミング全般
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のテンプレートエンジンの仕組みを解読してみる
- - 関連記事 -
- グローバル変数を上書きしてしまうJavaScriptコードのthisを確認する
- JavaScriptでnewを忘れるとグローバル変数を上書きしてしまう
- JavaScriptのテンプレートエンジンの仕組みを解読してみる
- IEのinnerHTMLにはscriptタグを含んではダメだって
- JavaScriptとPHPの変数スコープの違い
- FizzBuzzをJavaScriptで書いてみた
スポンサーリンク