ejs v9 javascript テンプレート system_javascript スキル-jsチュートリアル-php.cn

ejs v9 javascript テンプレート system_javascript スキル

WBOY

リリース： 2016-05-16 17:55:13

オリジナル

1164 人が閲覧しました

このバージョンでは、表示とデバッグを容易にするために、バックエンドデータには引き続き @frontend が含まれています。昨日、TXのフロントエンドエンジニアともこの必要性について話し合いました。テンプレートに入力する必要がある変数を取得し、バックエンドから渡された JSON と比較して、できるだけ早くデータを検証します。この手法については、$ がプレフィックスとして付いている PHP の変数の名前を確認できます。
以前のバージョンでは、出力ステートメントにセミコロンまたはカンマが含まれている場合、エラーが報告されていました。

コードをコピーコードは次のとおりです:

 
内部的に生成される文字列は次のようになります: 
__views(data.tr.name;) 
ユーザーが誤ってアクセスできないようにするためカンマまたはセミコロンを追加すると、このバージョンでは自動的に処理されます。

コードをコピーします

コードは次のとおりです。 rlastSemi = /[,;]s*$/ // 少し case "="://バックグラウンドで返された変数を処理します (ページに出力します)。

ロジック = 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 ); 
} 
 Break; 

 
Example
 以下は、ブラウザーが JS コードの解析を無視するスクリプト タグ内に配置されたテンプレートです。trs と href の前に @ 識別子が付いていることに注意してください。 

コードをコピー

コードは次のとおりです: -- これは子テンプレートです--> ="tmpl" id="tds_tmpl">
静的テーブル

これはその JS コードです:

コードをコピーします

コードは次のとおりです:

$.require("ready,more/ejs,node", function(){
var trs = [

{name:"Invisible Killer",年齢:29,性別: "男性"},
{名前:"そら"、年齢:22、性別:"男性"}、
{名前:"フェショ"、年齢:23、性別:"女性"}、

{名前:"リアン・ヤオ・ポット"、年齢:18、性別:"男性"}、{名前:"竜秋"、年齢:25、性別:"男性"}、{名前:"あなたわかりません",年齢:30,性別:"女性"} ] 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, 
el = document. 
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 の分割バグを回避します 
switch ( els[ 0].charAt(0) ) { 
case "="://处理后台返還的变量（页面に出た）; 
ロジック = els[0].substring(1); 
if(logic.indexOf("@")!==-1){ 
temp.push(startOfHTML,logic.replace(rAt,"$1data.").replace(rlastSemi,''), HTML の終わり ); 
}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片断 
els[1] && temp.push(startOfHTML, $.quote( els[1] ), endOfHTML) 
}else{ 
//处理静态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! 