54. function anonymous(data) {
var data = data || {};
var out = '';
out += '';
for (var i0 = 0, l = data.list.length; i0 < l; i0++) {
var value = data.list[i0];
var key = i0;
out += '';
out += ((value.name));
out += '';
}
out += '';
return out;
}
58. Browser string optimizations have changed the string
concatenation picture.
Firefox was the first browser to optimize string concatenation. Beginning with
version 1.0, the array technique is actually slower than using the plus operator
in all cases. Other browsers have also optimized string concatenation, so
Safari, Opera, Chrome, and Internet Explorer 8 also show better performance
using the plus operator. Internet Explorer prior to version 8 didn’t have such an
optimization, and so the array technique is always faster than the plus operator.
— Writing Efficient JavaScript: Chapter 7 – Even Faster Websites
59. The V8 javascript engine (used in Google Chrome) uses this code
to do string concatenation:
// ECMA-262, section 15.5.4.6
function StringConcat() {
if (IS_NULL_OR_UNDEFINED(this) && !IS_UNDETECTABLE(this)) {
throw MakeTypeError("called_on_null_or_undefined", ["String.prototype.concat"]);
}
var len = %_ArgumentsLength();
var this_as_string = TO_STRING_INLINE(this);
if (len === 1) {
return this_as_string + %_Arguments(0);
}
var parts = new InternalArray(len + 1);
parts[0] = this_as_string;
for (var i = 0; i < len; i++) {
var part = %_Arguments(i);
parts[i + 1] = TO_STRING_INLINE(part);
}
return %StringBuilderConcat(parts, len + 1, "");
}
62. var person = { The with construct introduces an extra scope for
name: "Nicholas", the script engine to search through whenever a
age: 30 variable is referenced. This alone produces a
}; minor performance decrease. However, the
contents of that scope are not known at compile
function displayInfo(){ time, meaning that the compiler cannot optimize
var count = 5; for it, in the same way as it can with normal scopes
with(person){ (such as those created by functions).
alert(name + " is " + age);
alert("Count is " + count);
}
}
displayInfo();
66. Juicer Docs
juicer is a high-performance lightweight javascript template engine, the benefits of using juicer is that you
can seperate your data and the html structure. it can also running on node.js environment.
the name of juicer
if the data is fruit, the template compared to water, through the juicer will be able to put them mixed into
html code.
import juicer.js
<script type="text/javascript" src="juicer-min.js"></script>
* License
juicer is published under the apache license and hosted on github. if you find errors or typos please file an
issueor a pull request on the repository.
67. * API
> compile and render the template with given data immediately.
juicer.to_html(tpl,data,options);
> only compile the template, it'll return a reusable function for the given `template`.
var tpl=juicer.compile(tpl,options);
> render the complied template with given data.
var tpl=juicer.compile(tpl,options);
var html=tpl.render(data);
Options
{
" cache:true/false,
" loose:false/true,
errorhandling:true/false
}
cache in the options means that whether cache the pre-compiled templates.
68. * Syntax
a. ${var}
using ${} to evaluating expressions and functions.
${data.name}
${data.name|function}
let's use a demo to illustrate this usage.
var json={
" name:'benben',
" age:23
};
var inc=function(number) {
" return number+1;
};
//it'll be 'benben'
juicer.to_html('${data.name}',json);
//it'll be 24
juicer.to_html('${data.age|inc}',json);
69. {@each data.list as it,k}
<span class=”{@if k+2>data.list.length}notdot{@/if}”>...</span>
{@/each}
71. escape/unescape
it is noteworthy that, for security reasons, ${output} will do escape to the output, if you
do not want it to be escaped, you can use $${output} to avoid this. for example:
var json={
" value:'<strong>juicer</strong>'
};
var escapetpl='${data.value}';
var unescapetpl='$${data.value}';
juicer.to_html(escapetpl,json); //it'll be '<strong>juicer</strong>'
juicer.to_html(unescapetpl,json); //it'll be '<strong>juicer</strong>'
72. b. {@each} ... {@/each}
when you need iterate a list, you can use `each` like this.
{@each data.list as item}
" ${item.prop}
{@/each}
you can also get the index while eaching.
{@each data.list as item,index}
" ${item.prop}
" ${index} //index
{@/each}
73. c. {@if} ... {@else} ... {else if} ... {@/if}
you can also use if-else if you need.
{@each data.list as item,index}
" {@if index===3}
" " the index is 3, the value is ${item.prop}
" {@else}
" " the index is not 3, the value is ${item.prop}
" {@/if}
{@/each}
d. {# comment}
you can also write comments in the template code to facilitate future management.
{# some comment here}
74. * running on the Node.js environment
bash: npm install juicer
var juicer=require('juicer');
var html=juicer.to_html(tpl,data,options);
