eval and mutireplace, which is faster?

[rollenc]

I want to implement the template for a object output.
I have two methods as follow:

1: Use "eval" to replace the template content
<script>
//<![CDATA[
s = "'<a href=\"' + o.url + '\">' + o.title + '</a>' + o.content + o.v1
+ o.v2 + o.v3 + o.v4 + '</br>'";

o = {url:"http://www.eemap.org",
title: "EEmap",
content: "Yes, I love EEmap.Yes, I love EEmap.Yes, I love
EEmap.Yes, I love EEmap.Yes, I love EEmap.Yes, I love EEmap.Yes, I love
EEmap.Yes, I love EEmap.Yes, I love EEmap.",
v1: "12345",
v2: "abcde",
v3: "edfgt",
v4: "gtyh"
};
output = '';

startTime = new Date();
for(i=0; i<500; i++)
{
t = eval(s);
output += t;
}
endTime = new Date();
document.write(endTime + '-' + startTime + '=' + (endTime -
startTime));
document.write('<br />');
document.write(output);
//]]>
</script>

2: use many "replace" to replace the template content:
<script>
//<![CDATA[
s = "<a href='%url%'>%title%</a>%content%%v1%%v2%%v3%%v4%</br>";
o = {url:"http://www.eemap.org",
title: "EEmap",
content: "Yes, I love EEmap.Yes, I love EEmap.Yes, I love
EEmap.Yes, I love EEmap.Yes, I love EEmap.Yes, I love EEmap.Yes, I love
EEmap.Yes, I love EEmap.Yes, I love EEmap.",
v1: "12345",
v2: "abcde",
v3: "edfgt",
v4: "gtyh"
};
output = '';

startTime = new Date();
for(i=0; i<500; i++)
{
s = s.replace("%title%", o.title);
s = s.replace("%content%", o.content);
s = s.replace("%v1%", o.v1);
s = s.replace("%v2%", o.v2);
s = s.replace("%v3%", o.v3);
s = s.replace("%v4%", o.v4);
output += s;
}
endTime = new Date();
document.write(endTime + '-' + startTime + '=' + (endTime -
startTime));
document.write('<br />');
document.write(output);
//]]>
</script>

I test the snap code as follow, and found the snap 2 is faster than
snap 1 both Firefox and IE. but if the muber of o increment, which is
better? And is there a simple code replace with the multi-line replace?

 

[Peter Michaux]

I want to implement the template for a object output.
I have two methods as follow:

1: Use "eval" to replace the template content
<script>
//<![CDATA[
s = "'<a href=\"' + o.url + '\">' + o.title + '</a>' + o.content + o.v1
+ o.v2 + o.v3 + o.v4 + '</br>'";

o = {url:"http://www.eemap.org",
title: "EEmap",
content: "Yes, I love EEmap.Yes, I love EEmap.Yes, I love
EEmap.Yes, I love EEmap.Yes, I love EEmap.Yes, I love EEmap.Yes, I love
EEmap.Yes, I love EEmap.Yes, I love EEmap.",
v1: "12345",
v2: "abcde",
v3: "edfgt",
v4: "gtyh"
};
output = '';

startTime = new Date();
for(i=0; i<500; i++)
{
t = eval(s);
output += t;
}
endTime = new Date();
document.write(endTime + '-' + startTime + '=' + (endTime -
startTime));
document.write('<br />');
document.write(output);
//]]>
</script>

2: use many "replace" to replace the template content:
<script>
//<![CDATA[
s = "<a href='%url%'>%title%</a>%content%%v1%%v2%%v3%%v4%</br>";
o = {url:"http://www.eemap.org",
title: "EEmap",
content: "Yes, I love EEmap.Yes, I love EEmap.Yes, I love
EEmap.Yes, I love EEmap.Yes, I love EEmap.Yes, I love EEmap.Yes, I love
EEmap.Yes, I love EEmap.Yes, I love EEmap.",
v1: "12345",
v2: "abcde",
v3: "edfgt",
v4: "gtyh"
};
output = '';

startTime = new Date();
for(i=0; i<500; i++)
{
s = s.replace("%title%", o.title);
s = s.replace("%content%", o.content);
s = s.replace("%v1%", o.v1);
s = s.replace("%v2%", o.v2);
s = s.replace("%v3%", o.v3);
s = s.replace("%v4%", o.v4);
output += s;
}
endTime = new Date();
document.write(endTime + '-' + startTime + '=' + (endTime -
startTime));
document.write('<br />');
document.write(output);
//]]>
</script>

I test the snap code as follow, and found the snap 2 is faster than
snap 1 both Firefox and IE. but if the muber of o increment, which is
better? And is there a simple code replace with the multi-line replace?

I don't know which is better of the above but there are other
preexisting templating systems for use with JavaScript. For example,

<URL: http://erik.eae.net/archives/2005/05/27/01.03.26/>
<URL: http://trimpath.com/project/wiki/JavaScriptTemplates>

Peter