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 앞에는 @ 식별자가 있습니다.

코드 복사

코드는 다음과 같습니다. tr = @ trs[i]; &>

;
ejs(" 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*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!