This is the code for the TEMexpand function:
function TEMconvertString(V){ if (!V) { return ''} else { return V.toString(); } } function TEMexpandLine(Tokens, Row, Array){ for (var i =0; i < Tokens.length-1; i+=2){ Array.push(Tokens[i]); Array.push(TEMconvertString(Row[Tokens[i+1]]).replaceAll("&", "&").replaceAll("<", "<").replaceAll(">", ">")) } Array.push(Tokens[Tokens.length-1]); } function TEMexpand(Data, Template){ var Array = []; var Tokens = Template.replaceAll("$$", "_FuNkYDolARAM").split('$'); for (var i =0; i < Data.length; i++){ TEMexpandLine(Tokens, Data[i], Array); } return Array.join('').replaceAll("_FuNkYDolARAM", "$"); }
What are the advantages compared to using a more fully featured templating system like Mustache?
All data is automatically escaped for special HTML characters. This eliminates cognitive load of having to pick whether or not to escape data and eliminates a lot of bugs.
The library is small - you can see exactly what it does in one screenful of code. No big mysteries as to what it does
Zero fancy features - nothing whatsoever resembling a language with if conditionals and so on. Therefore zero danger of the templating library becoming a crappy language.
There are no fancy callback features to tempt developers to write complicated code. It’s only going to work with an array of data.
No caching or other unnecessary pre-mature optimizations - simple code will be faster anyway.
Putting the responsibility elsewhere for handling logic in absence of data etc. Encouraging separation of concerns.
The code does use some techniques which are worth understanding:
We use an array of string and concatenate them at the end for performance.
We escape characters like & < and > to translate into HTML entities so that data can be not mis-interpreted and HTML markup.
We use a magic token '
_FuNkYDolARAM
' to handle the convention of allows a double $$ escape sequence to represent a $ character.