仿服务器端脚本方式的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>
«
»