ECMAScript-Micro-Templating Beispiele

Schablonen (engl. Templates), sind Vorlagen, die mit Inhalt gefüllt werden können.
Einfache Template Engines allein ergeben keine echte Trennung von Darstellung und Logik.
Bei der generischen Programmierung entspricht ein Klassentemplate mehr einem "Typen-Programmgerüste".

Template (einführend) Beispiel

Als einführendes Beispiel sollen in einer Zeichenkette str an Zielpositionen Textmuster-Ersetzungen erfolgen. So soll durch den repl( ) - Aufruf 

 repl( "Hallo { fun }!", {  fun : "ECMAScript" } )

aus dem String str = "Hallo { fun }!" der Rückgabestring Hallo ECMAScript! entstehen. Hier ist die Template-Funktion repl(str, obj) 

 function repl(str, obj) { var i;
   for (i in obj) {
     if (obj.hasOwnProperty(i)) {
       str = str.replace(new RegExp('{\\s*' + i + '\\s*}', 'g'), obj[i] );
     }
   } return str;
 }
Ausgabe von repl( "Hallo { fun }! { fun } ist Klasse!", { fun: "ECMAScript" }) ist

Ausgabe von repl( "Hallo { fun }! time ist {time} ms.", { fun : "ECMAScript", time: Date.now }) ist

Ausgabe von repl( "sin(1) = {sin}, cos(1) = = {sin}", { sin: Math.sin(1),cos: Math.cos(1) }) ist
Template (allg) Was ist eine "Template Engine"?

Im Zusammenhang mit Text-Strukturen und Text-Mustern (z.B. HTML-, XML- und TeX-Rahmen, Attribut- und Unicode-Einfügungen, Drucker-Formular für Seriendruck) kommen oft Vorlagen (Schablonen, engl. Templates) vor, die recht ähnlich sind und an den passenden Stellen mit Daten "gefüttert" (assign, setvar, merge) werden müssen.

Eine "Template Engine" (engl. Vorlage und automatischem Antrieb) kann Daten aus einer Datei (Template) verarbeitet, und bestimmte Platzhalter darin mit jeweils aktuellen Inhalten füllt. Außer einfachen Kontrollstrukturen (IF) enthalten Templates einer Template Engine kein Programm-Code. Die Bezeichnungen Templateklasse, Templatesystem, Template Engine sind gewisser Weise synonym.

Es gibt zahlreiche attributbasierte Schablonensprachen (siehe z.B.   Template_Attribute_Language ) und "Template Engine's" (siehe z.B.   Template_Engine )

Variablen als Platzhalter Wie funktioniert die Text-Ersetzung?

Micro-Templating Ein einfaches ECMAScript-Template verwendet Variablen als Platzhalter für einzufügenden Text.

Code Snippet: Platzhalter für einzufügenden Text
  1. <div id="OUT1">... für die Ausgabe</div>
  2.  
  3. <script type="text/javascript">//<![CDATA[ "use strict";
  4. var markup1 = {};
  5. markup1.user = function(data) {
  6.   var html = '<dl class="gruen"><dt>' + data.name1 +
  7.              '</dt><dd><p>' + data.cont1 + '</p></dd></dl>';
  8.   return html;
  9. };
  10. var data1 = {name1:"name1:Text für dt", cont1:"cont1:Text für dd"};
  11. document.getElementById("OUT1").innerHTML = markup1.user(data1);
  12. //]]></script>

Template-Anzeige:

... für die Ausgabe

Hier etwa das gleiche bei Verwendung von .apply

Code Snippet: Platzhalter für einzufügenden Text mit .apply
  1. <div id="OUT2">... für die Ausgabe</div>
  2.  
  3. <script type="text/javascript">//<![CDATA[ "use strict";
  4. var markup2 = {};
  5. markup2.user = function() {
  6.   var html = '<dl class="rot"><dt>' + this.name2 +
  7.              '</dt><dd><p>' + this.cont2 + '</p></dd></dl>';
  8.   return html;
  9. };
  10. var data2 = { name2: "name2: Text für dt", cont2: "cont2: Text für dd"};
  11. document.getElementById("OUT2").innerHTML = markup2.user.apply(data2);
  12. //]]></script>

Template-Anzeige:

... für die Ausgabe
Einfaches PHP-Template Wie funktioniert die Text-Ersetzung?

Die Datei template01.php fügt php-Strings in template01.htm ein und zeigt das Ergebnis als .htm an">
  template01.php?show_htm_code   template01.php?show_php_code   do template01

Template Attribute Language (allg) ECMAScript-Template nach ejohnNoch nicht getestet ...

Zur Generierung von HTML- und XML-Code können Templatesprachen verwendet werden. Attributbasierte Schablonensprachen (TAL = Template Attribute Language) können die Zusammenarbeit von Designern und Programmierern erleichtern. TAL abstrahiert (außer der Ausdrucksauswertung) völlig von der eingesetzten Programmiersprache. Templates können mit Designwerkzeugen bearbeitet werden, die alle unbekannten Attribute unbehelligt lassen. Sowohl die Templates als auch die Ergebnisseiten bleiben gültige Dokumente ihrer Auszeichnungssprache. Es gibt zahlreiche attributbasierte Schablonensprachen (siehe z.B.   Template_Attribute_Language ) und "Template Engine's" (siehe z.B.   Template_Engine )

ECMAScript-Template nach ejohn Noch nicht getestet ...

Noch nicht getestet ...

Code Snippet
  1. http://ejohn.org/blog/javascript-micro-templating/#postcomment
  2.  
  3. <script>
  4. // Simple JavaScript Templating
  5. // John Resig - http://ejohn.org/ - MIT Licensed
  6. (function(){
  7.   var cache = {};
  8.   
  9.   this.tmpl = function tmpl(str, data){
  10.     // Figure out if we're getting a template, or if we need to
  11.     // load the template - and be sure to cache the result.
  12.     var fn = !/\W/.test(str) ?
  13.       cache[str] = cache[str] ||
  14.         tmpl(document.getElementById(str).innerHTML) :
  15.       
  16.       // Generate a reusable function that will serve as a template
  17.       // generator (and which will be cached).
  18.       new Function("obj",
  19.         "var p=[],print=function(){p.push.apply(p,arguments);};" +
  20.         
  21.         // Introduce the data as local variables using with(){}
  22.         "with(obj){p.push('" +
  23.         
  24.         // Convert the template into pure JavaScript
  25.         str
  26.           .replace(/[\r\t\n]/g, " ")
  27.           .split("<%").join("\t")
  28.           .replace(/((^|%>)[^\t]*)'/g, "$1\r")
  29.           .replace(/\t=(.*?)%>/g, "',$1,'")
  30.           .split("\t").join("');")
  31.           .split("%>").join("p.push('")
  32.           .split("\r").join("\\'")
  33.       + "');}return p.join('');");
  34.     
  35.     // Provide some basic currying to the user
  36.     return data ? fn( data ) : fn;
  37.   };
  38. })();
  39. </script>
  40.  
  41. You would use it against templates written like this
  42. (it doesn't have to be in this particular manner -
  43. but it's a style that I enjoy):
  44.  
  45. <script type="text/html" id="item_tmpl">
  46.   <div id="<%=id%>" class="<%=(i % 2 == 1 ? " even" : "")%>">
  47.     <div class="grid_1 alpha right">
  48.       <img class="righted" src="<%=profile_image_url%>"/>
  49.     </div>
  50.     <div class="grid_6 omega contents">
  51.       <p><b><a href="/<%=from_user%>"><%=from_user%></a>:</b> <%=text%></p>
  52.     </div>
  53.   </div>
  54. </script>
  55.  
  56. You can also inline script:
  57. <script type="text/html" id="user_tmpl">
  58.   <% for ( var i = 0; i < users.length; i++ ) { %>
  59.     <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
  60.   <% } %>
  61. </script>
  62.  
  63. <script>
  64. var results = document.getElementById("results");
  65. results.innerHTML = tmpl("item_tmpl", dataObject);
  66. </script>
  67.  
  68. You could pre-compile the results for later use.
  69. If you call the templating function with only an ID
  70. (or a template code) then it'll return a pre-compiled
  71. function that you can execute later:
  72.  
  73. <script>
  74. var show_user = tmpl("item_tmpl"), html = "";
  75. for ( var i = 0; i < users.length; i++ ) {
  76.   html += show_user( users[i] );
  77. }
  78. </script>