The realization method of JS template with the way of simulating server-side script

The realization method of JS template with the way of simulating server-side script _javascript skills

Last Update:2017-01-19 Source: Internet

Author: User

Tags eval flush parse error set cookie

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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 "/>

&LT;TITLE&GT;JSSP Demo </title>

<script language= "JavaScript" >

/**

* @description:

* Use JavaScript to mimic JSP's page parsing and running, running on the client

* Allow the application to use <% like JSP pages. %>

* Allow pages to dynamically include subpages (read pages synchronously)

*

**/

@---------------------------------------------------------------------JSSP Declaration

var jssp=function () {};

/**

* Page Cache Management Instance Object

*/

Jssp.cacheinstance=null;

/**

* Page Load Instance object

*/

Jssp.pageloaderinstance=null;

/**

* After the specified DOM inserts the Pagepath's execution page contents

*/

Jssp.render=function (pagepath,dom) {

if (typeof dom== "string") Dom=document.getelementbyid (DOM);

var content=jssp. Core.run (Pagepath);

Dom.innerhtml=content;

}

@------------------------------------------------------------------------JSSP Run Configuration

/**

* Engine running global configuration

*/

Jssp. config={};

/**

* If you are running on the client, do you want to cache resolved pages

*/

Jssp. Config.cachable=true;

/**

* When JSSP. Config.cacheable is true and the

*/

Jssp. Config.cacheclass= "JSSP. Cache.defaultcache ";

/**

* Page Content Reader

*/

Jssp. Config.pageloaderclass= "JSSP. Core.PageLoader.Ajax ";

@------------------------------------------------------------------------JSSP Page Cache class

/**

* Page Cache class

*/

Jssp. Cache=function () {}

/**

* Set Cache

*/

Jssp. Cache.prototype.set=function (Key,cache) {}

/**

* Get Cache

*/

Jssp. Cache.prototype.get=function (key) {}

/**

* Default Cache implementation Class

*/

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 Run Context class

/**

* JSSP The execution context object of the page

* @member params request parameter array

* @member cookies to operate cookies object JSSP. Cookies

* @member out page Stream output object Jssp. Out

* @method setattribute Set Context parameters

* @method getattribute Get context Parameters

* @method removeattribute Delete context Parameters

* @method include dynamically include child pages

* @method Getcookies,getparameter,getparameters,getout

* @param the context parameters of the Pageurl run

* @param context object for the parent page

*/

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;

}

}

/**

* Parse page suffix parameter

*/

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;

}

/**

* Set parameter values

*/

Jssp. Context.prototype.setattribute=function (Key,value) {

if (!this.context)

This.attributes[key]=value;

Else

This.context.setAttribute (Key,value);

}

/**

* Get the parameter value

*/

Jssp. Context.prototype.getattribute=function (key) {

if (!this.context)

return This.attributes[key];

Else

return This.context.getAttribute (key);

}

/**

* Delete the parameter value of the specified key

*/

Jssp. Context.prototype.removeattribute=function (key) {

if (!this.context)

this.attributes[key]=undefined;

Else

This.context.removeAttribute (key);

}

/**

* GET request parameter value

*/

Jssp. Context.prototype.getparameter=function (key) {

var ps=this.params[key];

if (!PS) return This.context?this.context.getparameter (key): undefined;

Return Ps.join (",");

}

/**

* Get a value with duplicate parameters

*/

Jssp. Context.prototype.getparameters=function (key) {

var pss=this.params[key];

if (!PSS) pss=this.context?this.context.getparameters (key): undefined;

return PSS;

}

/**

* Get the Cookie Object

*/

Jssp. Context.prototype.getcookies=function () {

if (!this.context)

return this.cookies;

Else

return This.context.getCookies ();

}

/**

* Get output stream out object

*/

Jssp. Context.prototype.getout=function () {

if (!this.context)

return this.out;

Else

return This.context.getOut ();

}

/**

* Dynamic inclusion of child pages

*/

Jssp. Context.prototype.include=function (Childpageurl) {

This.getout (). Print (JSSP. Core.run (Childpageurl,this));

}

Jssp. context.prototype.isincluded=false;//determines whether the current page is contained

@-----------------------------------------------------------------------JSSP Run cookies operation class

/**

* Simple way to manipulate cookies

*/

Jssp. Cookies=function () {}

/**

* Set Cookie Item

*/

Jssp. Cookies.set=function (Key,value) {

document.cookie=key+ "=" +escape (value) + ";";

}

/**

* Get Cookie Item

*/

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]);

}

}

/**

* Delete Cookies

*/

Jssp. Cookies.remove=function (key) {

document.cookie=key+ "=null; Expires=fri, Dec 1999 23:59:59 GMT; ";

}

@------------------------------------------------------------------------JSSP page Run output stream class

/**

* Page Flow Output Object

*/

Jssp. Out=function () {

this.datas=[];//Data stream Fragment

this._index=0;

}

/**

* Put the page stream fragment into the buffer

*/

Jssp. Out.prototype.print=function (s) {

This.datas[this._index++]=s;

}

/**

* Data in the output buffer

*/

Jssp. Out.prototype.flush=function () {

var data=this.datas.join ("");

this.datas=[];this._index=0;

return data;

}

@--------------------------------------------------------------------------JSSP page Core class declaration

Jssp. Core=function () {}

@--------------------------------------------------------------------------JSSP page Resolution implementation class

/**

* Page parsing

* @param pagecontent JSSP page content

*/

Jssp. Core.parse=function (pagecontent) {

The buffer of text storage after parsing by Var strbuffer=[];//

var point=0;//buffer pointer

The linenumber=1;//of VAR parsing

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 ("Parse error", "must use '%> ' as end tag");

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" + "execution page exception occurred." Exception type: ' +e.name+ '. Error message: ' +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 \" "+" a exception occurred while parsing on line "+linenumber+". Error type: "+e.name+". Error message: "+e.message+" \ ";";

Strbuffer[point++]= "}";

}

var out=strbuffer.join ("");

return out;

}

/**

* Resolution Indicator Header

*/

Jssp. Core.parse._handledirective=function (Directive) {

var i = 0;

var tolkenindex = 0;

var tolken = new Array ();

Skip spaces;

while (Directive.charat (i) = = "") {

i++;

}

Tolken[tolkenindex] = "";

while (Directive.charat (i)!= ' && i <= directive.length) {

Tolken[tolkenindex] + = Directive.charat (i);

i++;

}

tolkenindex++;

Skip 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 spaces;

while (Directive.charat (i) = = "") {

i++;

}

if (Directive.charat (i)!= ' = ')

throw new JSSP. Core.parse.ParseException ("Sintax error", "Tolken = expected attribute");

i++

Skip spaces;

while (Directive.charat (i) = = "") {

i++;

}

Tolken[tolkenindex] = "";

while (Directive.charat (i)!= ' && i <= directive.length) {

Tolken[tolkenindex] + = Directive.charat (i);

i++;

}

tolkenindex++;

Skip 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;

}

/**

* Parse exception

*/

Jssp. Core.parse.parseexception=function (name,message) {

This.name=name;

This.message=message;

}

@--------------------------------------------------------------------------------page Content load Interface definition

/**

* Page content Load class interface definition

*/

Jssp. Core.pageloader=function () {}

/**

* Read page text

*/

Jssp. Core.pageloader.prototype.loadpage=function (Pagepath) {Throw cannot call the interface directly or you have not implemented this method! ";}

@--------------------------------------------------------------------------------page Run Implementation method

/**

* @param pagepath Loading page

* @parma Context Object

*/

Jssp. Core.run=function (Pagepath,context) {

if (!jssp.pageloaderinstance) {

JSSP Engine Initialization

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 Load page implementation

Jssp. Core.pageloader.ajax=function () {}

Jssp. Core.pageloader.ajax.prototype.loadpage=function (Pagepath) {

var content=jssp. Ajax.send (Pagepath, "get", false);

if (!content) {

Alert ("Request page: +pagepath+" returns to null! "); return null;

}

return content;

}

@-----------------------------------------------------------------------------------AJAX Operations Implementation

Jssp. Ajax=function () {}

/**

* Establish an HTTP connection

*/

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 component client does not support! ";

}

}

}

return request;

}

/**

* Send Ajax request

* @param URL Request page

* @param method Request methods Get or Post

* @param whether Async is an asynchronous call

* @param callback callback function

* @param execute function before Prehook call

* Request return execution function @param posthook call

*/

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 "must set callback function";

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;

}

}

/**

* Accept the response, call the custom callback function

*/

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 ();

}

/**

* Chinese garbled processing

*/

Jssp. Ajax._chartset=function (R) {

var t=bytes2bstr (r.responsebody);

return t;

}

</script>

<script language= "JavaScript" >

Jssp. Config.pageloaderclass= "JSSP. Core.PageLoader.CustomerInput ";/set Page Read interface

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 "test contains subpages, path:" +pagepath;

return document.getElementById ("PageContent"). Value;

}

function ShowPage () {

Jssp.render ("Hello.jssp?name=" +math.random (), "Pagearea");

}

</script>

<style type= "Text/css" >



</style>

</head>

<body>

Enter JSSP script content:

<textarea id= "PageContent" style= width:100%; "Rows=" >

<table width= "100%" border= "0" align= "center" cellpadding= "4" cellspacing= "2" >

<tr>

&LT;TD align= "center" valign= "Middle" bgcolor= "#666699" ><span class= "STYLE1" >order</span></td >

&LT;TD align= "center" valign= "Middle" bgcolor= "#666699" ><span class= "STYLE1" >number1</span></td >

&LT;TD align= "center" valign= "Middle" bgcolor= "#666699" ><span class= "STYLE1" >number2</span></td >

&LT;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%>" >

&LT;TD align= "center" valign= "Middle" ><%=i%></td>

&LT;TD align= "center" valign= "Middle" ><%=math.random ()%></td>

&LT;TD align= "center" valign= "Middle" ><%=math.random ()%></td>

&LT;TD align= "center" valign= "Middle" ><%=math.random ()%></td>

</tr>

<%}%>

</table>

<%

Window.alert ("Time Consuming:" + (New Date ()-begintime) + "MS");

%>

</textarea>

<button onclick= "showpage ()" > Display content </button>

<hr>

<div id= "Pagearea" ></div>

</hr>

</body>

</html>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

The realization method of JS template with the way of simulating server-side script _javascript skills

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

The realization method of JS template with the way of simulating server-side script _javascript skills

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

Trending Topic

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support