7. 模板引擎基本原理
模板引擎的基本机理就是替换(转换),将指定的标签转换为
需要的业务数据;将指定的伪语句按照某种流程来变换输出。
The gist of JavaScript templates is that you can take an HTML fragment interpolated
with template variables and combine it with a JavaScript object, replacing those
tem- plate variables with values from the object. Overall, JavaScript templating
works in much the same way as templating libraries in other languages, such as
PHP’s Smarty, Ruby’s ERB, and Python’s string formatting.
- Javascript Web Application
12年5月28日星期⼀一
8. water juicer fruits
Template
JSON Engine
Template
HTML
Fragment
12年5月28日星期⼀一
13. 拼字符串
var json = { name: "liuhuo", blog: "ued.taobao.com"};
var html = '<span class="name">' + json.name + ' (blog: ' + json.blog + ')</span>';
<span class="name">流火 (blog: ued.taobao.com)</span>
12年5月28日星期⼀一
14. YUI.Lang.sub
function sub(str,data) {
return str
.replace(/{(.*?)}/igm,function($,$1) {
return data[$1]?data[$1]:$;
});
}
var tpl = '<span class="name">{name} (blog: {blog})</span>';
var html = sub(tpl, json);
12年5月28日星期⼀一
15. Security
XSS escape
Syntax Performance
easy to write & read as faster as you can
Error Handling
robustness
12年5月28日星期⼀一
16. 语法
主张原生语法的传统模板引擎 主张Logic-less的新兴模板引擎
ejs、nTenjin、doT mustache、handlebars
{{#list}}
{{#a}} {{value}} {{/a}}
追求纯粹,希望通过原生的 追求 KISS / Logic less, 这注定了这
Javascript 语法来写模板,这类模 类模板引擎的实现是解释型的,
板引擎的实现一定是编译型的, 也就注定了它们性能是有瓶颈
但是它们的写法往往让人抓狂。 的。
jQuery Tmpl、kissy Template
the templating syntax for most libraries is very similar, if not identical. - Javascript Web Application
12年5月28日星期⼀一
23. 立场
语法上:不赞同完全采用原生语法,也不认可过于 Logic-less 从而在性能上遇到瓶颈。
性能上:认为模板引擎的性能应该是第⼀一位的。
The basic advice regarding response times has been about the same for thirty years [Miller
1968; Card et al. 1991]:
• 0.1 second is about the limit for having the user feel that the system is reacting
instantaneously, meaning that no special feedback is necessary except to display the result.
• 1.0 second is about the limit for the user's flow of thought to stay uninterrupted, even
though the user will notice the delay. Normally, no special feedback is necessary during
delays of more than 0.1 but less than 1.0 second, but the user does lose the feeling of
operating directly on the data.
100ms * 100w = 27.777hours
12年5月28日星期⼀一
26. 性能优化点
using += instead of array.push
12年5月28日星期⼀一
27. str += "one" + "two";
When evaluating this code, four steps are taken:
1. A temporary string is created in memory.
2. The concatenated value "onetwo" is assigned to the temporary string.
3. The temporary string is concatenated with the current value of str.
4. The result is assigned to str.
- Hign Performance Javascript
12年5月28日星期⼀一
28. str = ["one", "two"].join(‘’);
This dramatic improvement results from avoiding repeatedly allocating memory for
and copying progressively larger and larger strings. When joining an array, the
browser allocates enough memory to hold the complete string, and never copies the
same part of the final string more than once.
- Hign Performance Javascript
12年5月28日星期⼀一
30. 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
12年5月28日星期⼀一
31. The V8 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, "");
}
12年5月28日星期⼀一
34. 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();
12年5月28日星期⼀一
35. 性能优化点
cache the compiled template.
12年5月28日星期⼀一
36. Cache The Compiled Template
JavaScript, like many scripting languages, allows you to take a string containing
code and execute it from within running code. There are four standard ways to
accomplish this: eval(), the Function() constructor, setTimeout(), and setInterval().
Each of these functions allows you to pass in a string of JavaScript code and have it
executed.
- Hign Performance Javascript
12年5月28日星期⼀一