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

이 버전은 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!