仿服务器端脚本方式的JS模板实现方法
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了仿服务器端脚本方式的JS模板实现方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含16762字，纯文字阅读大概需要24分钟。
内容图文
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>
内容总结
以上是互联网集市为您收集整理的仿服务器端脚本方式的JS模板实现方法全部内容，希望文章能够帮你解决仿服务器端脚本方式的JS模板实现方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】