Javascript Templater nil.dva
I found my old JavaScript template engine in the bins, read the reviews in the last article and decided to redo something, there are not many changes, but they are quite significant, added support for functions and methods in the templates ...
In the previous version, I just climbed here andstole borrowed code for my needs, because I didn’t want to use the library completely because of this little thing. I read the comments to the previous article, looked at the links and added one small but significant change, in this variant it is possible to insert into the template methods or functions for processing the inserted content ... a trifle but nice
fewer words, a small example will clarify everything:
')
in the end, we get this result:
In the previous version, I just climbed here and
fewer words, a small example will clarify everything:
<html>
<head>
<script>
//
function Template( template )
{
var _template = template.toString();
//
var _pattern = /#\{(.*?)\}/g;
//
var _funcPattern = /(\w+)\((.*)\)/;
//
var _methodPattern = /(\w+)\.(\w+)\((.*)?\)/;
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.push( tmpTemplate.replace(_pattern, function (match, key)
{
if ( undefined !== object [q][key] )
{
return object [q][key];
}
else
{
if ( key.indexOf( '.' ) && ( matches = key.match(_methodPattern) ) )
{
key = matches[1];
func = matches[2];
params = matches[3].split( ',' );
if ( undefined !== object [q][key] )
{
return object [q][key][func].apply( object [q][key], params );
}
}
if ( key.indexOf( '(' ) && ( matches = key.match(_funcPattern) ) )
{
func = matches[1];
params = matches[2].split( ',' );
var value = null ;
for ( var w = 0; w < params .length; w++)
{
if ( undefined !== object [q][ params [w]] )
{
key = params [w];
params [w] = object [q][ params [w]];
break ;
}
}
if ( undefined !== object [q][key] )
{
return window[func].apply(window, params );
}
}
}
return '' ;
}) );
}
return result.join( "\n" );
}
};
// ,
// , "..."
function cut(text, count)
{
if ( text.length < count )
{
return text;
}
return text.substr(0, count) + ' ...'
}
</script>
</head>
<body>
<div id= "result" >
</div>
<script>
var table = "<table>#{content}</table>" ;
//
// #{email.replace(@,[dog])} , @ [dog]
// #{cut(comment,20)}
var row = "<tr><td>#{name}</td><td>#{email.replace(@,[dog])}</td><td>#{salary}</td><td>#{cut(comment,20)}</td></tr>" ;
//
var data = [
{name: 'John' , email: 'john@mail.com' , salary:1000, comment: 'some text' },
{name: 'Tina' , email: 'tina@mail.com' , salary:1300, comment: 'some other text' },
{name: 'Megan' , email: 'megan@mail.com' , salary:800, comment: 'some comment' },
{name: 'Richi' , email: 'richi@mail.com' , salary:500, comment: 'blah blah blah' },
{name: 'Max' , email: 'max@mail.com' , salary:2000, comment: 'UFO is goes here' },
{name: 'Leonard' , email: 'leonard@mail.com' , salary:1250, comment: 'i saw UFO to' },
{name: 'Kenny' , email: 'kenny@mail.com' , salary:970, comment: 'some wery long long long text, it should be cutted' },
{name: 'Martha' , email: 'martha@mail.com' , salary:670, comment: 'she is driver' },
{name: 'Arnold' , email: 'arnold@mail.com' , salary:550, comment: 'works very bad' },
{name: 'Michael' , email: 'michael@mail.com' , salary:430, comment: 'qweqweqwe' }
];
// ( ? )
var content = new Template(table);
var rowTemplater = new Template(row);
var rowsResult = rowTemplater.evaluate(data);
var result = content.evaluate( {content:rowsResult} );
//
document .getElementById( 'result' ).innerHTML = result;
</script>
</body>
</html>
* This source code was highlighted with Source Code Highlighter .')
in the end, we get this result:
< table >
< tr >
< td > John </ td >
< td > john[dog]mail.com </ td >
< td > 1000 </ td >
< td > some text </ td >
</ tr >
< tr >
< td > Tina </ td >
< td > tina[dog]mail.com </ td >
< td > 1300 </ td >
< td > some other text </ td >
</ tr >
< tr >
< td > Megan </ td >
< td > megan[dog]mail.com </ td >
< td > 800 </ td >
< td > some comment </ td >
</ tr >
< tr >
< td > Richi </ td >
< td > richi[dog]mail.com </ td >
< td > 500 </ td >
< td > blah blah blah </ td >
</ tr >
< tr >
< td > Max </ td >
< td > max[dog]mail.com </ td >
< td > 2000 </ td >
< td > UFO is goes here </ td >
</ tr >
< tr >
< td > Leonard </ td >
< td > leonard[dog]mail.com </ td >
< td > 1250 </ td >
< td > i saw UFO to </ td >
</ tr >
< tr >
< td > Kenny </ td >
< td > kenny[dog]mail.com </ td >
< td > 970 </ td >
< td > some wery long long ... </ td >
</ tr >
< tr >
< td > Martha </ td >
< td > martha[dog]mail.com </ td >
< td > 670 </ td >
< td > she is driver </ td >
</ tr >
< tr >
< td > Arnold </ td >
< td > arnold[dog]mail.com </ td >
< td > 550 </ td >
< td > works very bad </ td >
</ tr >
< tr >
< td > Michael </ td >
< td > michael[dog]mail.com </ td >
< td > 430 </ td >
< td > qweqweqwe </ td >
</ tr >
</ table >
, , , :
Q. , , evaluate?
A. , prototype as is, , ,
Q. ?
A. , 2 ( ) , ,
Q. , jQuery/prototype/mootools/yui/etc...
A. , jQuery/prototype/mootools/yui/etc... ,
Q. html, ( - ), -, ?
A. persistent storage
, ,
: , , , ,
upd 3.5 10.10 8
, :
1.
2. /
* This source code was highlighted with Source Code Highlighter .Source: https://habr.com/ru/post/82615/
All Articles