快捷導(dǎo)航

ejs v9 javascript模板系統(tǒng)

更新時(shí)間：2012年03月21日 17:04:42 作者：

我的模板系統(tǒng)升一下級(jí), 繼續(xù)在新公司里面用。現(xiàn)在幾在互聯(lián)網(wǎng)公司沒(méi)有不用javascript模板了，什么TX，百度，新浪， 360什么的，最后瀑布流的流行，里面又有許多用到模板

本版本就是改回v6的形態(tài)，后端數(shù)據(jù)還是帶@前端才方便查看與調(diào)試。昨天也與一TX前端工程師討論過(guò)這個(gè)必要性。取得模板中的需要填寫的變量，再與后端傳過(guò)來(lái)的JSON進(jìn)行比較，盡早進(jìn)行數(shù)據(jù)驗(yàn)證。這種技術(shù)，可以看一看PHP的變量命名就知了，帶是帶$前綴。
在之前的版本中，如果輸出語(yǔ)句帶分號(hào)或逗號(hào)是會(huì)報(bào)錯(cuò)的

復(fù)制代碼代碼如下:

 
<script type="tmpl" id="table_tmpl"> 
<table> 
<& for(var i=0,tl = @trs.length,tr;i<tl;i++){ &> 
<& tr = @trs[i]; &> 
<tr> 
<td><&= tr.name; &></td> <td><&= tr.age; &></td> <td><&= tr.sex || "男" &></td> 
</tr> 
<& } &> 
</table> 
<&# 怎么可能不支持圖片 &> 
<img src="<&= @href &>"> 
</script> 

因?yàn)閮?nèi)部生成的字符串是這個(gè)樣子的:
__views(data.tr.name;)
為了防止用戶順手把個(gè)逗號(hào)或分號(hào)上去,本版本自動(dòng)幫你處理了.

復(fù)制代碼代碼如下:

 
rlastSemi = /[,;]\s*$/ 
// 略 
case "="://處理后臺(tái)返回的變量（輸出到頁(yè)面的); 
logic = els[0].substring(1); 
if(logic.indexOf("@")!==-1){ 
temp.push( startOfHTML, logic.replace(rAt,"$1data.").replace(rlastSemi,''), endOfHTML ); 
}else{ 
temp.push( startOfHTML, logic.replace(rlastSemi,''), endOfHTML ); 
} 
break; 

例子
下面是一個(gè)模板，放置于瀏覽器會(huì)忽略解析JS代碼的script標(biāo)簽之內(nèi)，注意trs與href前面都帶有@標(biāo)識(shí)符。

復(fù)制代碼代碼如下:

 
<script type="tmpl" id="table_tmpl"> 
<table> 
<& for(var i=0,tl = @trs.length,tr;i<tl;i++){ &> 
<& tr = @trs[i]; &> 
<tr> 
<td><&= tr.name &></td> <td><&= tr.age &></td> <td><&= tr.sex || "男" &></td> 
<&# 導(dǎo)入子模板 &> 
<&= $.ejs("tds_tmpl"); &> 
</tr> 
<& } &> 
</table> 
<&# 怎么可能不支持圖片 &> 
<img src="<&= @href &>"> 
</script> 
<!-- 這是子模板 --> 
<script type="tmpl" id="tds_tmpl"> 
<td>靜態(tài)的表格</d> <td>靜態(tài)的表格</d> <td>靜態(tài)的表格</d> 
</script> 

這是它的JS代碼：

復(fù)制代碼代碼如下:

 
$.require("ready,more/ejs,node", function(){ 
var trs = [ 
{name:"隱形殺手",age:29,sex:"男"}, 
{name:"索拉",age:22,sex:"男"}, 
{name:"fesyo",age:23,sex:"女"}, 
{name:"戀妖壺",age:18,sex:"男"}, 
{name:"竜崎",age:25,sex:"男"}, 
{name:"你不懂的",age:30,sex:"女"} 
] 
var html = $.ejs("table_tmpl",{ 
trs: trs, 
href: "http://chabaoo.cn//rubylouvre/202906/o_type4.jpg" 
}); 
$("#table_tc").html(html) 
}); 

ejs源代碼

復(fù)制代碼代碼如下:

 
$.define("ejs", "lang",function(){ 
var 
_startOfHTML = "\t__views.push(", 
_endOfHTML = ");\n", 
sRight = "&>", 
rLeft = /\s*<&\s*/, 
rRight = /\s*&>\s*/, 
rAt = /(^|[^\w\u00c0-\uFFFF_])(@)(?=\w)/g, 
rLastSemi = /[,;]\s*$/ 
var ejs2 = $.ejs = function(id,data){ 
data = data || {}; 
if( !ejs2[id] ){ 
var rleft = rLeft, 
rright = rRight, 
sright = sRight, 
rlastSemi = rLastSemi, 
startOfHTML = _startOfHTML, 
endOfHTML = _endOfHTML, str , logic, 
el = document.getElementById(id); 
if (!el) throw "can not find the target element"; 
str = el.innerHTML; 
var arr = str.trim().split(rleft), 
buff = ["var __views = [];\n"],temp = [],i = 0,n = arr.length,els,segment; 
while(i < n){//逐行分析，以防歧義 
segment = arr[i++]; 
els = segment.split(rright); 
if( ~segment.indexOf(sright) ){//這里不使用els.length === 2是為了避開(kāi)IE的split bug 
switch ( els[0].charAt(0) ) { 
case "="://處理后臺(tái)返回的變量（輸出到頁(yè)面的); 
logic = els[0].substring(1); 
if(logic.indexOf("@")!==-1){ 
temp.push( startOfHTML, logic.replace(rAt,"$1data.").replace(rlastSemi,''), endOfHTML ); 
}else{ 
temp.push( startOfHTML, logic.replace(rlastSemi,''), endOfHTML ); 
} 
break; 
case "#"://處理注釋 
break; 
default://處理邏輯 
logic = els[0]; 
if(logic.indexOf("@")!==-1){ 
temp.push( logic.replace(rAt,"$1data."), "\n" ); 
}else{ 
temp.push( logic, "\n" ); 
} 
} 
//處理靜態(tài)HTML片斷 
els[1] && temp.push(startOfHTML, $.quote( els[1] ), endOfHTML) 
}else{ 
//處理靜態(tài)HTML片斷 
temp.push(startOfHTML, $.quote( els[0] ), endOfHTML ); 
} 
} 
ejs2[id] = new Function("data",buff.concat(temp).join("")+';return __views.join("");'); 
return ejs2[id]( data ) 
} 
return ejs2[id]( data ) 
} 
}) 
// ejs v9! 