回顧
- Micro-Templating
出自John Resig 2008年的一片文章，以及其經典實現：
// Simple JavaScript Templating
// John Resig - http://ejohn.org/ - MIT Licensed
(
function
(){
var
cache = {};
this
.tmpl =
function
tmpl
(str, data)
{
// Figure out if we're getting a template, or if we need to
// load the template - and be sure to cache the result.
var
fn = !
/\W/
.test(str) ?
cache[str] = cache[str] ||
tmpl(document.getElementById(str).innerHTML) :
// Generate a reusable function that will serve as a template
// generator (and which will be cached).
new
Function(
"obj"
,
"var p=[],print=function(){p.push.apply(p,arguments);};"
+
// Introduce the data as local variables using with(){}
"with(obj){p.push('"
+
// Convert the template into pure JavaScript
str
.replace(
/[\r\t\n]/g
,
" "
)
.split(
"<%"
).join(
"\t"
)
.replace(
/((^|%>)[^\t]*)'/g
,
"$1\r"
)
.replace(
/\t=(.*?)%>/g
,
"',$1,'"
)
.split(
"\t"
).join(
"');"
)
.split(
"%>"
).join(
"p.push('"
)
.split(
"\r"
).join(
"\\'"
)
+
"');}return p.join('');"
);
// Provide some basic currying to the user
return
data ? fn( data ) : fn;
};
})();
- 基本的replace生成代碼，終端動態編譯方案
- 使用with解決context問題
- Mustache.js & othors
更加豐富的模版語法，以及更加容易擴展。
/**
* Breaks up the given `template` string into a tree of tokens. If the `tags`
* argument
is
given here it must be an array
with
two string values: the
* opening
and
closing tags used
in
the template (e.g. [
"<%"
,
"%>"
]). Of
* course, the default
is
to use mustaches (i.e. mustache.tags).
*
* A token
is
an array
with
at least
4
elements. The first element
is
the
* mustache symbol that was used inside the tag, e.g.
"#"
or
"&"
. If the tag
* did
not
contain a symbol (i.e. {{myValue}}) this element
is
"name"
. For
* all text that appears outside a symbol this element
is
"text"
.
*
* The second element of a token
is
its
"value"
. For mustache tags this
is
* whatever
else
was inside the tag besides the opening symbol. For text tokens
* this
is
the text itself.
*
* The third
and
fourth elements of the token are the start
and
end indices,
* respectively, of the token
in
the original template.
*
* Tokens that are the root node of a subtree contain two more elements:
1
) an
* array of tokens
in
the subtree
and
2
) the index
in
the original template at
* which the closing tag
for
that section begins.
*/
我們可以從這段備注中簡單的看出Mustache.js的編譯原理。
性能優化之路
模版引擎成功將動態HTML代碼從Javascript中分離出來，避免了從前頻繁的Javascript代碼中的字符串拼接，簡化了編碼工作，實則是前端發展的大躍進。但當部分人還在癡迷與模版引擎的功能時，已經有人朝性能方向邁進。
- 緩存技術
每次將Template字符串轉化成函數己經變成一種浪費，緩存簡單說是編譯后將函數cache起來，僅此而已。
- context預賦值
為了避免使用with這種效率較低的方法而出現的，簡單的說就是把傳入的數據對象中的所有節點都變成局部變量，下面是一個簡單的例子：
var
compile =
function
(str){
//避免with語法
var
strFn =
"var _$jstpl='',__fn__=(function(__d__){var __v__='';for(var __k__ in __d__){__v__+=('var '+__k__+'=__d__[\"'+__k__+'\"];');};eval(__v__);_$jstpl+='"
+ parse(str) +
"';__v__=null;})(param);__fn__ = null;return _$jstpl;"
;
return
new
Function(
"param"
, strFn);
};
- 規范關鍵字
作為最快的模版引擎，doT根本不使用with，而是直接通過規范關鍵字傳入參數為it，然后所有參數都用it的節點來引用。
- 線下編譯
瀏覽器編譯過程轉為線下，直接生成執行函數。
- 拼接方法
字符串拼接方法一般有：
- arr.push & arr.join
- res += tmp
- res = res + tmp
很多人誤以為數組 push 方法拼接字符串會比 += 快，要知道這僅僅是 IE6-8 的瀏覽器下。實測表明現代瀏覽器使用 += 會比數組 push 方法快，而在 v8 引擎中，使用 += 方式比數組拼接快 4.7 倍。最新的一些測試結果還發現
res = res + tmp
在v8某些版本甚至比
res += tmp
還快。
未來
有些時候流行總在輪回，比如黑框眼睛以前是我們奶奶那輩人戴的，但現在年輕人都開始戴了。
模版從后端render，變成前端render，變成線下render……現在又隨著NodeJS的崛起回來了后端（前臺？）render，部分大公司如：
Facebook
、
Google
已經線上應用。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
