仿服务器端脚本方式的JS模板实现方法

http://bbs.51js.com/thread-65160-1-1.html 

 

 

 

<html xmlns="http://www.w3.org/1999/xht... 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>jssp演示</title> 
<script language="javascript"> 
/** 
* @description: 
* 使用javascript模仿JSP的页面解析和运行,运行于客户端 
* 允许应用人员象开发JSP页面一样使用<%..%> 
* 允许页面动态包括子页面(同步读取页面) 

**/ 

//@--------------------------------------------------------------------- JSSP声明 
var jssp=function(){}; 

/** 
* 页面缓存管理实例对象 
*/ 
jssp.cacheInstance=null; 
/** 
* 页面加载实例对象 
*/ 
jssp.pageLoaderInstance=null; 

/** 
* 在指定dom插入pagePath的执行后的页面内容 
*/ 
jssp.render=function(pagePath,dom){ 
if(typeof dom=="string") dom=document.getElementById(dom); 
var content=jssp.Core.run(pagePath); 
dom.innerHTML=content; 


//@------------------------------------------------------------------------ JSSP运行配置 
/** 
* 引擎运行全局配置 
*/ 
jssp.Config={}; 
/** 
* 如果在客户端运行,是否缓存解析的页面 
*/ 
jssp.Config.cachable=true; 
/** 
* 当jssp.Config.cacheable为true且在 
*/ 
jssp.Config.cacheClass="jssp.Cache.DefaultCache"; 
/** 
* 页面内容读取器 
*/ 
jssp.Config.pageLoaderClass="jssp.Core.PageLoader.Ajax"; 

//@------------------------------------------------------------------------ JSSP页面缓存类 
/** 
* 页面缓存类 
*/ 
jssp.Cache=function(){} 
/** 
* 设置缓存 
*/ 
jssp.Cache.prototype.set=function(key,cache){} 
/** 
* 得到缓存 
*/ 
jssp.Cache.prototype.get=function(key){} 
/** 
* 默认的缓存实现类 
*/ 
jssp.Cache.DefaultCache=function(){ 
this.caches={}; 

jssp.Cache.DefaultCache.prototype.set=function(key,cache){ 
this.caches[key]=cache; 

jssp.Cache.DefaultCache.prototype.get=function(key){ 
return this.caches[key]; 


//@----------------------------------------------------------------------- JSSP运行上下文类 
/** 
* jssp页面的执行上下文对象 
* @member params 请求参数数组 
* @member cookies 操作cookies对象 jssp.Cookies 
* @member out 页面流输出对象 jssp.Out 
* @method setAttribute 设置上下文参数 
* @method getAttribute 得到上下文参数 
* @method removeAttribute 删除上下文参数 
* @method include 动态包含子页面 
* @method getCookies,getParameter,getParameters,getOut 
* @param pageUrl 运行的上下文参数 
* @param context 父页面的上下文对象 
*/ 
jssp.Context=function(pageUrl,context){ 
this.params=this._resolveParam(pageUrl); 
if(!context){ 
this.cookies=jssp.Cookies; 
this.out=new jssp.Out(); 
this.attributes=[]; 
}else{ 
this.context=context; 
this.isIncluded=true; 



/** 
* 解析页面后缀参数 
*/ 
jssp.Context.prototype._resolveParam=function(pageUrl){ 
var i1=pageUrl.indexOf("?"); 
if(i1<=0) return []; 
pageUrl=pageUrl.substring(i1+1); 
var s1=pageUrl.split("&"); 
var params=[]; 
for(var i=0;i<s1.length;i++){ 
var s2=s1[i].split("="); 
var key=s2[0];var value=s2[1]; 
var ps=params[key]; 
if(!ps) ps=[]; 
ps[ps.length]=value; 
params[key]=ps; 

return params; 

/** 
* 设置参数值 
*/ 
jssp.Context.prototype.setAttribute=function(key,value){ 
if(!this.context) 
this.attributes[key]=value; 
else 
this.context.setAttribute(key,value); 

/** 
* 得到参数值 
*/ 
jssp.Context.prototype.getAttribute=function(key){ 
if(!this.context) 
return this.attributes[key]; 
else 
return this.context.getAttribute(key); 

/** 
* 删除指定键的参数值 
*/ 
jssp.Context.prototype.removeAttribute=function(key){ 
if(!this.context) 
this.attributes[key]=undefined; 
else 
this.context.removeAttribute(key); 

/** 
* 得到请求参数值 
*/ 
jssp.Context.prototype.getParameter=function(key){ 
var ps=this.params[key]; 
if(!ps) return this.context?this.context.getParameter(key):undefined; 
return ps.join(","); 

/** 
* 得到有重复参数的值 
*/ 
jssp.Context.prototype.getParameters=function(key){ 
var pss=this.params[key]; 
if(!pss) pss=this.context?this.context.getParameters(key):undefined; 
return pss; 

/** 
* 得到cookies对象 
*/ 
jssp.Context.prototype.getCookies=function(){ 
if(!this.context) 
return this.cookies; 
else 
return this.context.getCookies(); 

/** 
* 得到输出流OUT对象 
*/ 
jssp.Context.prototype.getOut=function(){ 
if(!this.context) 
return this.out; 
else 
return this.context.getOut(); 

/** 
* 动态包含子页面 
*/ 
jssp.Context.prototype.include=function(childPageUrl){ 
this.getOut().print(jssp.Core.run(childPageUrl,this)); 


jssp.Context.prototype.isIncluded=false;//判断当前页面是否被包含的 

//@-----------------------------------------------------------------------JSSP运行cookies操作类 
/** 
* 简单操纵cookies方法 
*/ 
jssp.Cookies=function(){} 
/** 
* 设置cookie项 
*/ 
jssp.Cookies.set=function(key,value){ 
document.cookie=key+"="+escape(value)+";"; 

/** 
* 得到cookie项 
*/ 
jssp.Cookies.get=function(key){ 
var aCookie=document.cookie.split("; "); 
for(var i=0;i<aCookie.length;i++){ 
var aCrumb=aCookie[i].split("="); 
if(key==aCrumb[0]) 
return unescape(aCrumb[1]); 


/** 
* 删除cookies项 
*/ 
jssp.Cookies.remove=function(key){ 
document.cookie=key+"=null; expires=Fri, 31 Dec 1999 23:59:59 GMT;"; 

//@------------------------------------------------------------------------ JSSP页面运行输出流类 
/** 
* 页面流输出对象 
*/ 
jssp.Out=function(){ 
this.datas=[];//数据流片断 
this._index=0; 

/** 
* 把页面流片断放入缓冲区 
*/ 
jssp.Out.prototype.print=function(s){ 
this.datas[this._index++]=s; 

/** 
* 输出缓冲区里的数据 
*/ 
jssp.Out.prototype.flush=function(){ 
var data=this.datas.join(""); 
this.datas=[];this._index=0; 
return data; 

//@--------------------------------------------------------------------------JSSP页面核心类声明 
jssp.Core=function(){} 
//@--------------------------------------------------------------------------JSSP页面解析实现类 
/** 
* 页面解析 
* @param pageContent JSSP页面内容 
*/ 
jssp.Core.parse=function(pageContent){ 

var strBuffer=[];//解析后文本存放的缓冲区 
var point=0;//缓冲区指针 
var lineNumber=1;//解析的当前行 

try{ 
var betweenPerc=false; 
var isPrint=false; 
strBuffer[point++]="function($context){\n"; 
strBuffer[point++]="var $out=$context.getOut();\n"; 
strBuffer[point++]="var $cookies=$context.getCookies();\n"; 
strBuffer[point++]="try{\n"; 
strBuffer[point++]="$out.print(unescape('"; 
var line=""; 
var value=pageContent; 
var len=value.length; 
for(var i=0;i<len;i++){ 
var nextTwo=""; 
if(i<=len-2) nextTwo=value.charAt(i)+value.charAt(i+1); 
var nextThree=""; 
if(i<=len-3) nextThree=nextTwo+value.charAt(i+2); 
if(nextTwo=="<%"&&nextThree!="<%="&&nextThree!="<%@"){ 
strBuffer[point++]="'));\n"; 
betweenPerc=true; 
i+=1; 
}else if(nextTwo=="<%"&&nextThree=="<%="&&nextThree!="<%@"){ 
strBuffer[point++]=escape(line)+"'));\n"; 
line=""; 
strBuffer[point++]=" $out.print( "; 
betweenPerc=true; 
isPrint=true; 
i+=2; 
}else if(nextTwo=="<%"&&nextThree!="<%="&&nextThree=="<%@"){ 
i+=3; 
var directive=""; 
while(nextTwo!="%>"){ 
directive+=value.charAt(i); 
i++; 
if(i<=value.length-2){ 
nextTwo=value.charAt(i)+value.charAt(i+1); 


strBuffer[point++]=escape(line)+"'));\n"; 
line=""; 
strBuffer[point++]=jssp.Core.parse._handleDirective(directive); 
strBuffer[point++]=" $out.print(unescape('"; 
i++; 
}else if(nextTwo=="%>"){ 
strBuffer[point++]=(isPrint?");":"")+"\n $out.print(unescape('"; 
if(!betweenPerc) throw new jssp.Core.parse.ParseException("解析错误","必须用'%>'作为结束标签"); 
betweenPerc=false; 
isPrint=false; 
i+=1; 
}else if(value.charAt(i)==String.fromCharCode(10)){ 
if(!betweenPerc){ 
strBuffer[point++]=escape(line)+"\\n'));\n"+" $out.print(unescape('"; 
line=""; 
lineNumber++; 

}else if(value.charAt(i)==String.fromCharCode(13)){ 
if(betweenPerc) strBuffer[point++]="\n"; 
}else{ 
if(betweenPerc) 
strBuffer[point++]=value.charAt(i); 
else 
line+=value.charAt(i); 


strBuffer[point++]=escape(line)+"'));\n"; 
strBuffer[point++]="}catch(e){\n"; 
strBuffer[point++]="return '"+"执行页面发生异常.异常类型:'+e.name+'. 错误消息: '+e.message;\n"; 
strBuffer[point++]="}\n"; 
strBuffer[point++]="if(!$context.isIncluded) return $out.flush();\n"; 
strBuffer[point++]="}\n"; 
}catch(e){ 
point=0; 
strBuffer=[]; 
strBuffer[point++]="function($context){\n"; 
strBuffer[point++]="return \""+"An exception occurred while parsing on line "+lineNumber+". Error type: "+e.name+". Error message: "+e.message+"\";"; 
strBuffer[point++]="}"; 

var out=strBuffer.join(""); 
return out; 

/** 
* 解析指示头 
*/ 
jssp.Core.parse._handleDirective=function(directive){ 

var i = 0; 

var tolkenIndex = 0; 
var tolken = new Array(); 

//Skip first spaces; 
while ( directive.charAt(i) == ' ' ) { 
i++; 


tolken[tolkenIndex] = ""; 
while ( directive.charAt(i) != ' ' && i <= directive.length ) { 
tolken[tolkenIndex] += directive.charAt(i); 
i++; 


tolkenIndex++; 

//Skip first spaces; 
while ( directive.charAt(i) == ' ' ) { 
i++; 


tolken[tolkenIndex] = ""; 
while ( directive.charAt(i) != ' ' && directive.charAt(i) != '=' && i <= directive.length ) { 
tolken[tolkenIndex] += directive.charAt(i); 
i++; 


tolkenIndex++; 

//Skip first spaces; 
while ( directive.charAt(i) == ' ' ) { 
i++; 


if( directive.charAt(i) != '=' ) 
throw new jssp.Core.parse.ParseException("Sintax error", "Tolken = expected attribute"); 
i++ 

//Skip first spaces; 
while ( directive.charAt(i) == ' ' ) { 
i++; 


tolken[tolkenIndex] = ""; 
while ( directive.charAt(i) != ' ' && i <= directive.length ) { 
tolken[tolkenIndex] += directive.charAt(i); 
i++; 

tolkenIndex++; 

//Skip first spaces; 
while ( directive.charAt(i) == ' ' && i <= directive.length ) { 
i++; 


tolken[tolkenIndex] = ""; 
while ( directive.charAt(i) != ' ' && directive.charAt(i) != '=' && i <= directive.length && i <= directive.length ) { 
tolken[tolkenIndex] += directive.charAt(i); 
i++; 


tolkenIndex++; 

if( directive.charAt(i) != '=' && i <= directive.length ) 
throw new jssp.Core.parse.ParseException("Sintax error", "Tolken = expected after attribute" ); 
i++ 

tolken[tolkenIndex] = ""; 
while ( directive.charAt(i) != ' ' && i <= directive.length && i <= directive.length ) { 
tolken[tolkenIndex] += directive.charAt(i); 
i++; 


var file = ""; 
var context = ""; 

if ( tolken[0] != "include" ) 
throw new jssp.Core.parse.ParseException("Sintax error","Directive " + tolken[0] + " unknown.") ; 

if ( tolken[1] != "file" ) 
throw new jssp.Core.parse.ParseException("Sintax error", "Attribute file expected after include." ); 
else file = tolken[2]; 

if ( tolken[3] != "context" && tolken[3] != "" ) 
throw new jssp.Core.parse.ParseException( "Sintax error", "Attribute context expected after file."); 
else if ( tolken[3] == "context" ) 
context = tolken[4] 
else 
context = "$context"; 

var out = "$context.include(" + file + ");\n"; 

return out; 


/** 
* 解析异常 
*/ 
jssp.Core.parse.ParseException=function(name,message) { 
this.name=name; 
this.message=message; 

//@--------------------------------------------------------------------------------页面内容加载接口定义 
/** 
* 页面内容加载类接口定义 
*/ 
jssp.Core.PageLoader=function(){} 
/** 
* 读取页面文本 
*/ 
jssp.Core.PageLoader.prototype.loadPage=function(pagePath){throw "不能直接调用接口或您还未实现此方法!";} 
//@--------------------------------------------------------------------------------页面运行实现方法 
/** 
* @param pagePath 加载页面 
* @parma context 上下文对象 
*/ 
jssp.Core.run=function(pagePath,context){ 

if(!jssp.pageLoaderInstance){ 
//jssp引擎初始化 
if(jssp.Config.cachable) jssp.cacheInstance=eval("new "+jssp.Config.cacheClass+"();"); 
jssp.pageLoaderInstance=eval("new "+jssp.Config.pageLoaderClass+"();"); 


var key=pagePath;if(key.indexOf("?")>0) key=key.substring(0,key.indexOf("?")); 

var processer=jssp.Config.cachable?jssp.cacheInstance.get(key):null; 
if(!processer){ 
eval("processer="+jssp.Core.parse(jssp.pageLoaderInstance.loadPage(pagePath))); 
if(jssp.Config.cachable) jssp.cacheInstance.set(key,processer); 
}else{ 
//alert("cache") 


if(!context) 
context=new jssp.Context(pagePath); 
else 
context=new jssp.Context(pagePath,context); 
return processer(context); 

//@-----------------------------------------------------------------------------------AJAX加载页面实现 
jssp.Core.PageLoader.Ajax=function(){} 

jssp.Core.PageLoader.Ajax.prototype.loadPage=function(pagePath){ 
var content=jssp.Ajax.send(pagePath,"GET",false); 
if(!content) { 
alert("请求页面:"+pagePath+" 返回为null!");return null; 

return content; 

//@-----------------------------------------------------------------------------------AJAX操作实现 
jssp.Ajax=function(){} 
/** 
* 建立HTTP连接 
*/ 
jssp.Ajax.createHttpRequest=function(){ 
if(window.XMLHttpRequest) 
return new XMLHttpRequest(); 
var request=null; 
try{ 
request=new ActiveXObject("Msxml2.XMLHTTP.4.0"); 
}catch(e){ 
try{ 
request=new ActiveXObject("Msxml2.XMLHTTP"); 
}catch(e){ 
try{ 
request=new ActiveXObject("microsoft.XMLHTTP"); 
}catch(e){ 
throw "XMLHTTPRequest组件客户端不支持!"; 



return request; 


/** 
* 发送AJAX请求 
* @param url 请求页面 
* @param method 请求方法 get or post 
* @param async 是否为异步调用 
* @param callback 回调函数 
* @param preHook 调用前执行函数 
* @param postHook 调用后请求返回执行函数 
*/ 
jssp.Ajax.send=function(url,method,async,callback,preHook,postHook){ 
method=method.toUpperCase(); 

if(typeof preHook=="function") preHook(); 

var request=jssp.Ajax.createHttpRequest(); 
request.open(method,url,async); 
if(async){ 
if(typeof callback!="function") throw "必须要设置回调函数"; 
request.onreadystatechange=function(){ 
jssp.Ajax.callback(request,callback,postHook); 
}; 

request.send(null); 
if(!async) { 
if(request.status==200||request.status==304) 
return jssp.Ajax._chartset(request); 
else 
return null; 


/** 
* 接受响应,调用自定义回调函数 
*/ 
jssp.Ajax.callback=function(response,callback,postHook){ 
if(response.readyState!=4) return; 
var text; 
if(response.status==200||response.status==304){ 
text=jssp.Ajax._chartset(response); 

callback(text); 
if(typeof postHook=="function") postHook(); 

/** 
* 中文乱码处理 
*/ 
jssp.Ajax._chartset=function(r){ 
var t=bytes2BSTR(r.responseBody); 
return t; 


</script> 

<script language="javascript"> 
jssp.Config.pageLoaderClass="jssp.Core.PageLoader.CustomerInput";//设置页面读取接口 
jssp.Config.cachable=false; 
jssp.Core.PageLoader.CustomerInput=function(){} 
jssp.Core.PageLoader.CustomerInput.prototype.loadPage=function(pagePath){ 
if(pagePath.substring(0,10)!="hello.jssp") return "测试包含子页面,路径:"+pagePath; 
return document.getElementById("pageContent").value; 

function showPage(){ 
jssp.render("hello.jssp?name="+Math.random(),"pageArea"); 

</script> 
<style type="text/css"> 
<!-- 
.STYLE1 {color: #FFFFFF} 
--> 
</style> 
</head> 

<body> 
输入JSSP脚本内容: 
<textarea id="pageContent" style="width:100%;" rows="15"> 
<table width="100%" border="0" align="center" cellpadding="4" cellspacing="2"> 
<tr> 
<td align="center" valign="middle" bgcolor="#666699"><span class="STYLE1">order</span></td> 
<td align="center" valign="middle" bgcolor="#666699"><span class="STYLE1">number1</span></td> 
<td align="center" valign="middle" bgcolor="#666699"><span class="STYLE1">number2</span></td> 
<td align="center" valign="middle" bgcolor="#666699"><span class="STYLE1">number3</span></td> 
</tr> 
<% 
var beginTime=new Date(); 
for(var i=0;i<100;i++){ 
var color=i%2?"#eeeeee":"#aaaaaa"; 
%> 
<tr bgcolor="<%=color%>"> 
<td align="center" valign="middle" ><%=i%></td> 
<td align="center" valign="middle" ><%=Math.random()%></td> 
<td align="center" valign="middle" ><%=Math.random()%></td> 
<td align="center" valign="middle" ><%=Math.random()%></td> 
</tr> 
<%}%> 
</table> 
<% 
window.alert("耗时:"+(new Date()-beginTime)+"ms"); 
%> 
</textarea> 
<button onClick="showPage()">显示内容</button> 
<hr> 
<div id="pageArea"></div> 
</hr> 

</body> 
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值