|
<!DOCTYPE html> |
|
<title>Foo</title> |
|
<script> |
|
/** |
|
* https://gist.github.com/Masquerade-Circus/d441541cc604624552a9 |
|
* Small and super fast logic-less template engine in 132 bytes. |
|
* You can use it like so: |
|
* var result = compile('Some {{string}}', {string: 'Awesome code'}); |
|
* result will be 'Some Awesome code'; |
|
* Or |
|
* var result = compile('Some {{string}}'); |
|
* result will be the compiled template to be used later |
|
* function anonymous(o) { |
|
* return "Some " + (o["code"]||"") + ""; |
|
* }; |
|
* So you could easily do this |
|
* document.body.innerHTML = compile('<article><head>{title}</head><section>{{content}}</section></article>', { |
|
* title: 'Super fast template engine', |
|
* content: compile('<div>{{description}}</div>', {description: 'Small and super fast logic-less template engine in 132 bytes.'}) |
|
* }) |
|
*/ |
|
var compile=function(a,b,c){return c=Function("o","return "+JSON.stringify(a).replace(/{{(.+?)}}/g,'" + (o["$1"]||"") + "')+";"),b!=[]._?c(b):c} |
|
|
|
var test = 1; // Switch the test case |
|
|
|
// Create a table with 100,000 movie titles in about 100 milliseconds. |
|
if (test == 1){ |
|
var t1 = new Date(); |
|
console.log('Start time = 0'); |
|
html = compile('<h1>A repeated movie</h1><table><tr><td><b>Title</b></td><td><b>Description</b></td></tr>{{rows}}</table>', { |
|
rows : (function(){ |
|
var row = compile('<tr><td>{{title}}</td><td>{{description}}</td></tr>'), |
|
rows = ''; |
|
for (i = 0; i <= 100000; i++) |
|
rows += row({ |
|
title: 'The explosive bomb', |
|
description: 'A muntant ninja bomb from outer space that comes from the future and explodes and kill you again and again.' |
|
}); |
|
return rows; |
|
})() |
|
}); |
|
var t2 = new Date(); |
|
console.log('End time = ' + (t2.getTime() - t1.getTime())); |
|
document.body.innerHTML = html; |
|
var t2 = new Date(); |
|
console.log('Append to body = ' + (t2.getTime() - t1.getTime())); |
|
} |
|
|
|
// Create a table with all the CJK unified ideographs |
|
if (test == 2){ |
|
var t1 = new Date(); |
|
console.log('Start time = 0'); |
|
html = compile('<h1>CJK unified ideographs</h1><table><tr><td><b>Glyph</b></td><td><b>Codepoint</b></td></tr>{{rows}}</table>', { |
|
rows : (function(){ |
|
var row = compile('<tr><td>{{char}}</td><td>\\u{{code}}</td></tr>'), |
|
rows = ''; |
|
for (var i = 0x9faf; i >= 0x4e00; i--) |
|
rows += row({ |
|
char : String.fromCharCode(i), |
|
code : String.fromCharCode(i).charCodeAt(0).toString(16) |
|
}); |
|
return rows; |
|
})() |
|
}); |
|
|
|
var t2 = new Date(); |
|
console.log('End time = ' + (t2.getTime() - t1.getTime())); |
|
document.body.innerHTML = html; |
|
var t2 = new Date(); |
|
console.log('Append to body = ' + (t2.getTime() - t1.getTime())); |
|
} |
|
</script> |
"{}" as placeholders is problematic for inline css. I would advise to use "{{}}" or "${}" instead.