ejs v9 자바스크립트 템플릿 system_javascript 기술-JS 튜토리얼-php.cn

ejs v9 자바스크립트 템플릿 system_javascript 기술

WBOY

풀어 주다： 2016-05-16 17:55:13

원래의

1160명이 탐색했습니다.

이 버전은 v6 형식으로 다시 변경됩니다. 백엔드 데이터에는 쉽게 보고 디버깅할 수 있도록 여전히 @frontend가 있습니다. 어제도 TX 프론트엔드 엔지니어와 이 필요성에 대해 논의했습니다. 템플릿에 채워야 할 변수를 얻은 다음 백엔드에서 전달된 JSON과 비교하여 가능한 한 빨리 데이터를 확인합니다. 이 기술의 경우 $ 접두사가 붙은 PHP의 변수 이름을 볼 수 있습니다.
이전 버전에서는 출력 문에 세미콜론이나 쉼표가 포함되어 있으면 오류가 보고되었습니다.

코드 복사 코드는 다음과 같습니다:

 
내부적으로 생성된 문자열은 다음과 같습니다. 
__views(data.tr.name;) 
사용자가 실수로 쉼표나 세미콜론을 추가하면 이 버전이 자동으로 처리합니다.

코드 복사

코드는 다음과 같습니다. rlastSemi = /[,;]s*$/ // 약간

case "="://백그라운드에서 반환된 변수 처리(페이지로 출력)

 logic = els[0].substring(1); 
if(logic.indexOf("@")!==-1){ 
temp.push( startOfHTML, logic.replace(rAt,"$1 data .").replace(rlastSemi,''), endOfHTML ); 
}else{ 
temp.push( startOfHTML, logic.replace(rlastSemi,''), endOfHTML ); 
} 
 

 
예
다음은 브라우저가 JS 코드 구문 분석을 무시하는 스크립트 태그 내에 배치된 템플릿입니다. trs 및 href 앞에는 @ 식별자가 있습니다. 

코드 복사

코드는 다음과 같습니다.

< ="tmpl" id="tds_tmpl">
정적 테이블 정적 테이블 script>

JS 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

$.require("ready,more/ejs,node", function(){

var trs = [ {name:"보이지 않는 살인자",age:29,sex: "남성"}, {이름:"Sora",age:22,sex:"남성"}, {name:"fesyo",age:23,sex:"여성"}, {name:"Lian Yao Pot",age:18,sex:"Male"}, {name:"竜秋",age:25,sex:"Male"}, {name:"You 이해가 안 돼요",age:30,sex:"female"}

]

var html = $.ejs("table_tmpl",{ 
trs: trs, 
href: "http :/ /www.jb51.net//rubylouvre/202906/o_type4.jpg" 
}); 
$("#table_tc").html(html) 
}); 

ejs 소스 코드

코드 복사

코드는 다음과 같습니다.

 
$.define("ejs", "lang",function(){ 
var 
_startOfHTML = "t__views.push(", 
_endOfHTML = ");n", 
sRight = "&>", 
rLeft = /s*<&s*/, 
rRight = /s*&>s*/, 
rAt = /(^|[^wu00c0- uFFFF_])(@)(?=w)/g, 
rLastSemi = /[,;]s*$/ 
var ejs2 = $.ejs = function(id,data){ 
data = data ||.startOfHTML = _startOfHTML, 
endOfHTML = _endOfHTML, str , logic, 
el = document.getElementById(id) 
if (!el) throw "대상 요소를 찾을 수 없습니다" 
str = el.innerHTML; 
var arr = str.trim().split(rleft), 
buff = ["var __views = [];n"],temp = [],i = 0, n = arr .length,els,segment; 🎜>if( ~segment.indexOf(sright) ){//这里不使用els.length === 2是为了避开IE의 분할 버그 
스위치( els[ 0].charAt(0) ) { 
case "="://处理后台返回的变weight(输流到页면적); 
논리 = 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 ); 
} 
휴식; 
case "#"://处理注释 
break; 
default://处理逻辑 
logic = els[0]; 
if(logic.indexOf("@")!==-1){ 
temp.push( logic.replace(rAt,"$1data."), "n" ); 
}else{ 
temp.push( logic, "n" ); 
} 
} 
//处理静态HTML Pictures断 
els[1] && temp.push(startOfHTML, $.quote( els[1] ), endOfHTML) 
}else{ 
//处理静态HTMLpiece断 
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! 