JavaScriptテンプレート

ajaxを使用するときに、大きなhtmlブロックを置き換える必要がある場合がありますが、DOM要素の束を作成してフォーマットが以前と同じになるようにするのは必ずしも便利ではありません。 htmlコードを直接ajaxに渡して適切な場所に貼り付けますが、プロトタイプ開発者は、サーバーからJSONの形式のデータのみを転送し、JavaScriptを使用して別のテンプレートに貼り付けることができる場合、より成功した実装を作成しました...アイデアを借りて、少し単純化した



このような小さな古典は、テンプレートエンジンの機能をJavaScriptで実装するため、非常に簡単に使用できます。



1-クラスを接続します

function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .

1. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
   
   
   
   
2. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
   
   
   
   
3. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
   
   
   
   
4. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
   
   
   
   
5. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
   
   
   
   
6. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
   
   
   
   
7. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
   
   
   
   
8. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
   
   
   
   
9. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
   
   
   
   
10. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
    
    
    
    
12. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
    
    
    
    
13. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
    
    
    
    
14. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
    
    
    
    
15. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
    
    
    
    
16. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
    
    
    
    
17. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
    
    
    
    
19. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
    
    
    
    
20. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
    
    
    
    
21. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
    
    
    
    
22. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
    
    
    
    
23. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
    
    
    
    
24. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
    
    
    
    
25. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
    
    
    
    
26. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
    
    
    
    
27. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
    
    
    
    
28. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
    
    
    
    
29. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
    
    
    
    

function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .

2-必要なテンプレートを作成します（各変数は＃{-で区切られ、}-後ろで区切られます）：

var template = '<div>＃{someText} <a href="#{hrefasket">＃{otherText} </a> </ div>';



3-テンプレートを操作するオブジェクトを作成します

var templateParser =新しいテンプレート（テンプレート）;



実際、データに基づいてどこにでも挿入できる既製のhtmlコードを取得します

オブジェクトキーはテンプレートの変数と一致する必要があります。キーがテンプレートにない場合は無視されます

余分な変数がテンプレートに残っている場合、それらは削除されます

var htmlData = templateParser.evaluate（{someText： 'コメントを表示する'、href： '/コメント'、otherText： 'ここをクリック'}）;



最後に次のような行があります：<div>コメントを表示するには<a href="/comments">ここをクリック</a> </ div>



UPD：はい！ このメソッドは、DOMを介して追加するよりも時間がかかりますが、面上の要素のネストを増やしてコードを保存します



upd2：コードを変更し、firefoxでテストしました。DOMを使用した場合よりも2倍速く動作します。例は次のとおりです。

< div style ="border: 1px solid red; padding: 5px;" id ="container" > <br> < div style ="border: 1px solid blue; margin: 2px; display: inline" > <br> 0 < a href ="/element0" > </ a > <br> </ div > <br> <!-- .. 37 --> <br> </ div > <br><br> * This source code was highlighted with Source Code Highlighter .