仿服务器端脚本方式的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>
相关推荐
-
仿服务器端脚本方式的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 languag
-
Ajax上传实现根据服务器端返回数据进行js处理的方法
本文实例讲述了Ajax上传实现根据服务器端返回数据进行js处理的方法.分享给大家供大家参考.具体如下: Ajax上传说白了还是使用form表单提交,在当前页面加一个iframe,将提交的内容跳转到iframe中,造成一种页面无刷新的错觉. 以前也做过上传,基本是是使用commons-fileupload组件,基本的步骤是使用servlet处理完上传之后,使用PrintWrite的对象实例输出显示内容,可以是直接输出内容,也可以是输出script进行操作如 复制代码 代码如下: response.
-
JS模板实现方法
概述 我们在使用JS渲染DOM时,一般使用字符串创建DOM然后附加到父元素上,如果附加的DOM是动态易变的,那需要在函数中写大量逻辑.如果在控件实现过程中,这带来的问题更为严重. 解决这个问题的常见解决方案是是使用模板,作为配置项传入控件,实现数据和渲染的分离.具体的实现方法有以下方法: 字符串替换,使用正则匹配将数据替换进字符串中. 渲染函数,函数返回字符串. 模板引擎,可以将执行字符串中的函数(内置或者自定义的) 替换(Substitute) 字符串替换是最简单的实现模板的方式,看一下具体的
-
多种方式实现JS调用后台方法进行数据交互
项目开发过程中很多地方都需要前端和后台的数据交互,几种典型常用的方法如利用控件的AutopostBack属性.Button提交表单等等.但这些都是有条件的,AutoPostBack具有实时性但会刷新页面,Button提交表单不能实现数据交互的实时性.当然说到前台与后台的数据交互更不能漏掉ajax,ajax实现前台与后台数据的异步交互,并且保证实时的.局部刷新.但有些数据不需要异步交互,例如当交互的数据是下一步执行的条件时,就必须要等到数据前台与后台数据交互完成后才能继续执行程序.所以对于掌握js
-
mongodb eval 执行服务器端脚本
在服务器端可以通过db.eval函数来执行javascript脚本,也可以把javascript脚本保存在数据库中,然后在别的数据库命令中调用. 一.db.eval 执行服务器端脚本 利用db.eval函数可以在MongoDB服务器端执行javascript脚本.这个函数先将给定的javascript字符串传递给MongoDB服务器,在服务器上执行,然后返回结果. db.eval可以用来模拟多文档事务:db.eval锁住数据库,然后执行javascript,再解锁.虽然没有内置的回滚机制,但这能
-
一文详解如何用原型链的方式实现JS继承
目录 原型链是什么 通过构造函数创建实例对象 用原型链的方式实现继承 方法1:Object.create 方法2:直接修改 [[prototype]] 方法3:使用父类的实例 总结 今天讲一道经典的原型链面试题. 原型链是什么 JavaScript 中,每当创建一个对象,都会给这个对象提供一个内置对象 [[Prototype]] .这个对象就是原型对象,[[Prototype]] 的层层嵌套就形成了原型链. 当我们访问一个对象的属性时,如果自身没有,就会通过原型链向上追溯,找到第一个存在该属性原
-
JS模板编译的实现详情
目录 前言 模板编译的简单实现 模板编译 1.构建模板生成函数 2.正则替换 前言 编译是一种格式变成另一种格式的过程.编译会导致好的结果,比如书写简单的代码,编译出来复杂的代码:或者提高代码的使用性能. 这里只聊聊模板编译. 模板编译的简单实现 写一个最简单的模板 <p>Hello, {{name}}!</p> 这个模板用数据{name: "world"}渲染后的结果是: <p>Hello, world!</p> 解决方法:最简单的方案
-
Vue.js 模板语法和数据绑定
目录 模板语法 数据绑定 el的两种写法 data的两种写法 模板语法 Vue 模板语法有两大类 插值语法: 功能:用于解析标签体内容 写法:{{xxx}},xxx是js表达式,可以读取到 data 中属性 指令语法: 功能:用于解析标签(标签属性.标签体内容.绑定事件...) 写法:v-bind:href="xxx" 或简写为 :href="xxx",xxx是js表达式,可以读取到 data 中属性 <!DOCTYPE html> <html l
-
基于Node.js模板引擎教程-jade速学与实战1
环境准备: 全局安装jade: npm install jade -g 初始化项目package.json: npm init --yes 安装完成之后,可以使用 jade --help 查看jade的命令行用法 一.在项目目录下新建index.jade文件 inde.jade代码: doctype html html head meta(charset='utf-8') title body h3 欢迎学习jade 1,标签按照html的缩进格式写 2,标签的属性可以采用圆括号 3,如果标签有
-
采用call方式实现js继承
复制代码 代码如下: //采用call方式实现js继承 function A(color) { this.Acolor = color; this.AshowColor = function() { document.writeln("Acolor: " + this.Acolor); } } function B(color, name) { A.call(this, color); this.Bname = name; this.BshowName = function() { d