仿服务器端脚本方式的JS模板实现方法_javascript技巧-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 07:14 PM

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

jssp演示
<script> /** * @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> 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>

输入JSSP脚本内容：

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript：学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript：コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

See all articles