日本好好热aⅴ|国产99视频精品免费观看|日本成人aV在线|久热香蕉国产在线

• 電腦軟件
• 單機游戲
• 安卓應用
• 安卓游戲
• 蘋果電腦
• 蘋果手機

軟件

軟件

文章

搜索

首頁 → 編程開發(fā) → javascript|JQuery → javascript 模板系統(tǒng) ejs v6 功能改進

javascript 模板系統(tǒng) ejs v6 功能改進

相關(guān)軟件相關(guān)文章發(fā)表評論 來源：本站整理時間：2010/10/5 9:40:43字體大�。�A-A+

作者：佚名點擊：146次評論：0次標簽： 模板 javascript

“舉個栗子”主題PPT模板

• 類型：卡通模板大�。�431KB語言：中文 評分：10.0
• 標簽：

立即下載

此版本有如下改進：

吸取眾人的意見，防止與ASP等后臺模板的界定符沖突，默認左右界定符為<&，&>
加入新的操作符<&~，至此整個操作符體系為:

<& JS邏輯 &>	<& for(var i=0,tl = @trs.length,tr;i < tl;i++){ &>
<& JS輸出內(nèi)容 &>	<&= tr.name &>
<&# 這是注釋 &>	<&# 導入子模板 &>
<&: CSS選擇符 &>	<&: tds_tmpl &>
<&~ URL地址 &>	<&~ /aaa/bbb.html &>

為了迎合大規(guī)模開發(fā)的需要，后臺數(shù)據(jù)統(tǒng)統(tǒng)增加@標識，一來便于修改，二來內(nèi)部實現(xiàn)拋棄了with語句，強行讓它們依附于data對象，讓我們可以使用||設置默認值。

//http://www.cnblogs.com/rubylouvre/archive/2010/10/04/1841933.html

;(function(){

this.dom = {

quote : String.quote || function (str) {

str = str.replace(/[\x00-\x1f\\]/g, function (chr) {

var special = metaObject[chr];

return special ? special : '\\u' + ('0000'+chr.charCodeAt(0).toString(16)).slice(-4);

});

return '"' + str.replace(/"/g, '\\"') + '"';

}

}



if(!String.prototype.trim){

String.prototype.trim = function(){

return this.replace(/^[\s\xa0]+|[\s\xa0]+$/g, '');

}

}

;(function(w,s){

//http://blogs.msdn.com/xmlteam/archive/2006/10/23/using-the-right-version-of-msxml-in-internet-explorer.aspx

s = ["XMLHttpRequest",

"ActiveXObject('Msxml2.XMLHTTP.6.0')",

"ActiveXObject('Msxml2.XMLHTTP.3.0')",

"ActiveXObject('Msxml2.XMLHTTP')",

"ActiveXObject('Microsoft.XMLHTTP')"];

//IE專有的JScript方法：ScriptEngine，ScriptEngineBuildVersion，ScriptEngineMajorVersion，ScriptEngineMinorVersion，CollectGarbage，RuntimeObject和GetObject。

if( !-[1,] && w.ScriptEngineMinorVersion() === 7 && location.protocol === "file:"){

s.shift();

}

for(var i = 0 ,el;el=s[i++];){

try{

if(eval("new "+el)){

dom.xhr = new Function( "return new "+el);

break;

}

}catch(e){}

}

})(window);



var

metaObject = {

'\b': '\\b',

'\t': '\\t',

'\n': '\\n',

'\f': '\\f',

'\r': '\\r',

'\\': '\\\\'

},

_startOfHTML = "\t__views.push(",

_endOfHTML = ");\n",

_rAt = /(^|[^\w\u00c0-\uFFFF_])(@)(?=\w)/g,

_partial = function(url){

var xhr = dom.xhr();

xhr.open("GET",url,false);

xhr.setRequestHeader("If-Modified-Since","0");

xhr.send(null);

return xhr.responseText|| ""

}

dom.ejs = function(obj,usePart){

if(!usePart){//如果普通模板，則要整理配置文件

obj.left = obj.left || "<&";

obj.right = obj.right || "&>";

obj.rLeft = obj.rLeft || new RegExp("\\s*"+ obj.left+"\\s*");

obj.rRight = obj.rRight || new RegExp("\\s*"+ obj.right+"\\s*");

}

var key = obj.selector || obj.url,

rAt = _rAt,

startOfHTML = _startOfHTML,

endOfHTML = _endOfHTML,

partial = _partial,

self = arguments.callee,

buff = ["var __views = [];\n"],str,logic;

if(obj.selector){

var el = document.getElementById(key);

if (!el) throw "can not find the target element";

str = el.text;

}else {

str = partial(obj.url);

if (!str) throw "the target file does not exist";

}

if(!self[key]){

var arr = str.trim().split(obj.rLeft),temp = [],url,selector,i=0,n=arr.length,els,segment;

while(i<n){

segment = arr[i++];

els = segment.split(obj.rRight);

if(segment.indexOf(obj.right) !== -1){//這里不使用el.length === 2是為了避開IE的split bug

switch (els[0].charAt(0)) {

case "~"://include局部模板 以URL方式引入

delete obj.selector;

obj.url = els[0].substring(1).trim();

self[url] = self[url] || self(obj,true);

temp = temp.concat(self[url] );

break;

case ":"://include局部模板 以元素選擇符方式引入

delete obj.url;

selector = obj.selector = els[0].substring(1).trim();

self[selector] = self[selector] || self(obj,true);

temp = temp.concat(self[selector] );

break;

case "="://處理后臺返回的變量（輸出到頁面的);

logic = els[0].substring(1);

if(logic.indexOf("@")!==-1){

temp.push(startOfHTML, logic.replace(rAt,"$1data."), endOfHTML);

}else{

temp.push(startOfHTML, logic, 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, dom.quote.call(null,els[1]), endOfHTML)

}else{

//處理靜態(tài)HTML片斷

temp.push(startOfHTML, dom.quote.call(null,els[0]), endOfHTML)

}

}

if(usePart){//局部模板

return (self[key] = temp);

}else{

self[key] = new Function("data",buff.concat(temp).join("")+';return __views.join("");');

}

}

return self[key](obj.data || {});

}

})();

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="IE=8" http-equiv="X-UA-Compatible"/>
<title>javascript 模板系統(tǒng) ejs v6 by 司徒正美</title>
<style type="text/css">
table {
border:1px solid #a9ea00;
border-collapse:collapse;
width:80%;
}
td{
border:1px solid #a9ea00;
padding:0;
text-align:center;
}
</style>
<script>
;(function(){
this.dom = {
quote : String.quote || function (str) {
str = str.replace(/[\x00-\x1f\\]/g, function (chr) {
var special = metaObject[chr];
return special ? special : '\\u' + ('0000'+chr.charCodeAt(0).toString(16)).slice(-4);
});
return '"' + str.replace(/"/g, '\\"') + '"';
}
}

if(!String.prototype.trim){
String.prototype.trim = function(){
return this.replace(/^[\s\xa0]+|[\s\xa0]+$/g, '');
}
}
;(function(w,s){
//http://blogs.msdn.com/xmlteam/archive/2006/10/23/using-the-right-version-of-msxml-in-internet-explorer.aspx
s = ["XMLHttpRequest",
"ActiveXObject('Msxml2.XMLHTTP.6.0')",
"ActiveXObject('Msxml2.XMLHTTP.3.0')",
"ActiveXObject('Msxml2.XMLHTTP')",
"ActiveXObject('Microsoft.XMLHTTP')"];
//IE專有的JScript方法：ScriptEngine，ScriptEngineBuildVersion，ScriptEngineMajorVersion，ScriptEngineMinorVersion，CollectGarbage，RuntimeObject和GetObject。
if( !-[1,] && w.ScriptEngineMinorVersion() === 7 && location.protocol === "file:"){
s.shift();
}
for(var i = 0 ,el;el=s[i++];){
try{
if(eval("new "+el)){
dom.xhr = new Function( "return new "+el);
break;
}
}catch(e){}
}
})(window);

var
metaObject = {
'\b': '\\b',
'\t': '\\t',
'\n': '\\n',
'\f': '\\f',
'\r': '\\r',
'\\': '\\\\'
},
_startOfHTML = "\t__views.push(",
_endOfHTML = ");\n",
_rAt = /(^|[^\w\u00c0-\uFFFF_])(@)(?=\w)/g,
_partial = function(url){
var xhr = dom.xhr();
xhr.open("GET",url,false);
xhr.setRequestHeader("If-Modified-Since","0");
xhr.send(null);
return xhr.responseText|| ""
}
dom.ejs = function(obj,usePart){
if(!usePart){//如果普通模板，則要整理配置文件
obj.left = obj.left || "<&";
obj.right = obj.right || "&>";
obj.rLeft = obj.rLeft || new RegExp("\\s*"+ obj.left+"\\s*");
obj.rRight = obj.rRight || new RegExp("\\s*"+ obj.right+"\\s*");
}
var key = obj.selector || obj.url,
rAt = _rAt,
startOfHTML = _startOfHTML,
endOfHTML = _endOfHTML,
partial = _partial,
self = arguments.callee,
buff = ["var __views = [];\n"],str,logic;
if(obj.selector){
var el = document.getElementById(key);
if (!el) throw "can not find the target element";
str = el.text;
}else {
str = partial(obj.url);
if (!str) throw "the target file does not exist";
}
if(!self[key]){
var arr = str.trim().split(obj.rLeft),temp = [],url,selector,i=0,n=arr.length,els,segment;
while(i<n){
segment = arr[i++];
els = segment.split(obj.rRight);
if(segment.indexOf(obj.right) !== -1){//這里不使用el.length === 2是為了避開IE的split bug
switch (els[0].charAt(0)) {
case "~"://include局部模板 以URL方式引入
delete obj.selector;
obj.url = els[0].substring(1).trim();
self[url] = self[url] || self(obj,true);
temp = temp.concat(self[url] );
break;
case ":"://include局部模板 以元素選擇符方式引入
delete obj.url;
selector = obj.selector = els[0].substring(1).trim();
self[selector] = self[selector] || self(obj,true);
temp = temp.concat(self[selector] );
break;
case "="://處理后臺返回的變量（輸出到頁面的);
logic = els[0].substring(1);
if(logic.indexOf("@")!==-1){
temp.push(startOfHTML, logic.replace(rAt,"$1data."), endOfHTML);
}else{
temp.push(startOfHTML, logic, 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, dom.quote.call(null,els[1]), endOfHTML)
}else{
//處理靜態(tài)HTML片斷
temp.push(startOfHTML, dom.quote.call(null,els[0]), endOfHTML)
}
}
if(usePart){//局部模板
return (self[key] = temp);
}else{
self[key] = new Function("data",buff.concat(temp).join("")+';return __views.join("");');
}
}
return self[key](obj.data || {});
}
})();

//var a=[1,2];for(var i in a)alert(delete a[i+1]);
</script>
<script>
window.onload = 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 tmpl = dom.ejs({
selector:"table_tmpl",//指定主模板
data:{trs:trs}//數(shù)據(jù)源
});
document.getElementById("table_tc").innerHTML = tmpl;
};

</script>
</head>
<body>
<h2>dom.ejs v6 by 司徒正美</h2>
<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>
<&# 導入子模板 &>
<&: tds_tmpl &>
</tr>
<& } &>
</table>
</script>
<script type="tmpl" id="tds_tmpl">
<td>靜態(tài)的表格</d> <td>靜態(tài)的表格</d> <td>靜態(tài)的表格</d>
</script>
<div id="table_tc">

</div>
</body>
</html>


重申一次，并不是前臺模板系統(tǒng)無能，只是你我做的項目不同，訪問量大小決定著代碼需要用另一種截然不同的方式實現(xiàn)。我想到一個例子，就是騰訊的QQ群，里面80%的內(nèi)容都是JS模板。

相關(guān)文章

06-08鋼鐵雄心4怎么新建師模板 新建師模板方法一覽

04-13朋友圈小視頻ae模板制作 朋友圈小視頻廣告制作【素材+教程】

03-15爐石傳說各職業(yè)卡組模板是什么樣子 各職業(yè)預設卡組模板匯總詳細介

03-09爐石傳說新版本套牌模板怎么玩 新版本新功能套牌模板詳細介紹

11-17語戲怎么玩 語戲app提示暫時沒有人設模板怎么回事

09-23cad2004怎么創(chuàng)建模板 cad2004新建模板問題介紹

07-21會聲會影導入模板時顯示黑白條怎么辦 會聲會影打開模板顯示黑白

06-17008神器怎么用 008k神器模板安裝使用教程

05-28ppt模板怎么保存

05-28ppt模板怎么導入ppt

相關(guān)評論

閱讀本文后您有什么感想? 已有23人給出評價!

• 8 喜歡
• 3 頂
• 1 難過
• 5 囧
• 3 圍觀
• 2 無聊

熱門評論

最新評論

發(fā)表評論 查看所有評論(0)

昵稱:

表情:

字數(shù): 0/500 (您的評論需要經(jīng)過審核才能顯示)

推薦文章

u3d快速入門圖文教程 jQuery選擇器介紹：基本選擇器、層次選擇器、過濾選擇器、表單選擇器

• javascript中字符串常用操作總結(jié)、JS字符串操作大全
• jQuery選擇器介紹：基本選擇器、層次選擇器、過濾選擇器、表單選擇器
• node.js+express安裝配置教程、構(gòu)建JavaScript的Web開發(fā)環(huán)境
• 使用jquery和MySql創(chuàng)建一個ajax關(guān)鍵詞數(shù)據(jù)搜索
• javascript中如何做對象的類型判斷

相關(guān)下載

名稱大小下載

• 1“舉個栗子”主題PPT模板431KB下載
• 2《1368個單詞就夠了》讀書筆記PPT模板1.5M下載
• 3《21世紀資本論》讀書筆記PPT模板9.9M下載
• 4《6個月學會任何一種外語》讀書筆記PPT模板4.2M下載
• 5《90后創(chuàng)業(yè)家》讀書筆記PPT模板30.8M下載
• 6《booboo波波》繪本故事PPT模板380KB下載
• 7《愛她》表白PPT模板431KB下載
• 8《把每一天，當做夢想的練習》讀書筆記PPT模板988KB下載
• 9《把時間當作朋友》讀后感PPT模板3.4M下載
• 10《補發(fā)商標注冊證申請書》模板5KB下載

最新文章

• 

  u3d快速入門圖文教程

  14-04-01
• 

  javascript函數(shù)調(diào)用的幾種方法

  14-01-06
• 

  JavaScript的正則表達式語法、經(jīng)典 Jav

  13-12-19
• 

  jQuery選擇器介紹：基本選擇器、層次選

  13-07-03
• 

  網(wǎng)頁設計中 如何調(diào)試 javascript

  10-07-08