以往的BS程序开发注重的是后端动态脚本的开发(即S的部分),随着这几年web2.0的不断推广,将来前端开发的部分(即B的部分)很可能成为主导,后台的构架需要配合前段的部分,以B为主导,S作为B的辅助.
在上边的这个效果图里,因為數據量很大,因此S端所扮演的角色就是建立和修改一下各个地区的名称及他们的所属分类,然后把整个结构图生成Json,保存到服务器的Js文件中,而所有显示及排版的部分,都是客户端通过读取到该Js文件来实现的,不管网站同时有多少人在浏览,服务器都不需要读取数据库,也不需要进行运算,它仅仅是需要响应客户端的http请求返回js文件的内容就行了,也就是说在整个过程中服务器只需要支付一点下载该js文件所需的网路带宽而已.如果要轉載本文請注明出處,Seven的部落格,Email:See7di@Gmail.com
而在以往,人们的做法通常是前台需要显示该效果的时候首先和服务器的数据库建立链接,然后请求需要的数据,把数据请求回来之后再在前台进行排版,更有甚者,某些人干脆直接在服务器端让服务器来把版面给排好,然后把已经排好的版面返回至客户端进行显示.这是三种不同的做法,第一种方式服务器需要做的工作最少,最节约系统资源,算是最聪明的做法.而第二种做法算是小聪明,想像一下如果当1000人同时访问该网站时,那么就需要和服务器建立1000个请求数据库的链接.第三种做法是最不长脑子的人想出来的,目前还在使用这种做法的人我建议你改行了.
我的json結構為:
var Town=[
{"_p":[1,3,"基隆市"],"_l":["67|仁愛區","68|信義區","69|中正區","70|中山區","71|安樂區","72|暖暖區","73|七堵區",]},
{"_p":[4,5,"新竹市"],"_l":["87|香山區","88|東區","89|北區",]},
{"_p":[9,13,"嘉義市"],"_l":["209|西區","210|東區",]},
];
顯示的方式為:
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('$.1S=J(f,g,h){$("#k").1r();$.1T();F(1U(f)==\'1V\'){f=f}1s{f="#"+f}F(!f){1t}v j,1b,l;1W{j=$(f).1X();g=(!g)?(w($(f).x("C"))+6):w(g);1b=w($(f).x("y"))}1Y(e){}l=\'<p D="k"><K 1c="1d/x">\';l+=\'#k{C:1Z;L:\'+w(j.L)+\'V;A:\'+(w(j.A)+g)+\'V;W-s:#1u;t:B G #1v;X:B;1w:1x;P:1y;z-1z:20;1A-21:22;23-24:B 25 Y #26;}\';l+=\'#k Q,#k o{1e:0;X:0;27-K:R;}#k M{28-1B:29;1e-L:0;}\';l+=\'#k #1f{Z-y:1C;1d-2a:2b;C:\'+g+\'V;y:\'+1b+\'V;W-s:#1u;1w:1x;z-1z:2c;t-C:B;t-s:#1v;t-K:G R G G;s:#2d;\'+h+\'}\';l+=\'#k .f{N-1g:1h-N;Z-y:1D;s:#2e;}\';l+=\'#k .E{N-1g:1h-N;1i:A;C:1j;y:2f !2g;y:1j;2h-y:1j;t-1E:B G #1F;}\';l+=\'#k .E o{W-s:#2i;t:B G #1F;t-1E:R;s:#2j;1e:Y 0 Y 2k;1d-1B:2l;X:B 0;}\';l+=\'#k .E o.15{2m:2n;W-s:#2o;t-s:#2p;t-A:Y G #2q;s:#1G;}\';l+=\'#k .E o.c{s:#1G;}\';l+=\'#k .q{N-1g:1h-N;C:2r;1i:A;Z-y:1D;}\';l+=\'#k .q o{X:B 0;C:2s;1i:A;}\';l+=\'#k .q .b{Z-y:1C;}\';l+=\'#k .q .b 16{t-C:B 0 0;t-s:#2t;t-K:2u;}\';l+=\'#k .q .b 16 1k{1A-2v:2w;}\';l+=\'</K>\';l+=\'<p H="f"><Q H="E"><o H="c">關閉選單</o></Q><Q H="q"></Q></p><p D="1f"></p></p>\';$("2x").1l(l);$("#k #1f").1H($(f).1H()).x({L:(w(j.L)-w($("#k").x("L"))-1),A:(w(j.A)-w($("#k").x("A"))-1)});$.2y("../@2z/2A/2B.2C",J(){v a=m n();1I=($.1J.1K)?(u.I-1):u.I;17(v i=0;i<1I;i++){O=(u[i].18[0]);F(!a[O]){a[O]=\'\'}a[O]+=\'<16><1k><M 1c="1L" D="\'+u[i].18[1]+\'S" 1M="\'+u[i].18[1]+\'">\'+u[i].18[2]+\'&2D;</1k>\';1N=($.1J.1K)?(u[i].19.I-1):u[i].19.I;17(v r=0;r<1N;r++){F(u[i].19[r]){v b=m n();b=u[i].19[r].2E("|");a[O]+=\'<o><M 1c="1L" D="\'+b[0]+\'S" 1M="\'+b[0]+\'">\'+b[1]+\'</o>\'}}a[O]+="</16>"}v c=m n(m n(1,\'宜蘭基隆\'),m n(2,\'台北縣市\'),m n(3,\'桃園縣\'),m n(4,\'新竹縣市\'),m n(5,\'苗栗縣\'),m n(6,\'台中縣市\'),m n(7,\'彰化縣\'),m n(8,\'南投雲林\'),m n(9,\'嘉義縣市\'),m n(10,\'台南縣市\'),m n(11,\'高雄縣市\'),m n(12,\'屏東縣\'),m n(13,\'花蓮台東\'),m n(14,\'離島\'));v d=T=\'\';17(v i=0;i<c.I;i++){F(d.I<1){1m=\' H="15"\'}1s{1m=\'\'}d+=\'<o\'+1m+\' D="1O\'+c[i][0]+\'">\'+c[i][1]+\'</o>\';T+=\'<p D="1O\'+c[i][0]+\'S" H="b" K="P:R;">\';T+=a[(i+1)];T+=\'</p>\'}$("#k .E").1l(d);$("#k .q").1l(T);$("#k .q p.b").2F().x(\'P\',\'1y\');$("#k .E o").2G(J(){F($(U).1a("H")=="c"){$("#k").1r();1t}$("#k .q p").1P(J(i){$(U).x("P","R")});$("#k .E o").1P(J(i){$(U).2H("15")});$(U).2I("15");$("#k .q #"+$(U).1a("D")+"S").x("P","")}).2J(J(){1n=$("#k .q p:1o o M").I;1p=\'|\';17(v i=0;i<1n;i++){1q=$("#k .q p:1o o M:1Q("+i+")").1a(\'D\');1R=1q.2K(0,1q.2L(\'S\'));1p+=1R+\',2|\';$("#k .q p:1o o M:1Q("+i+")").1a(\'2M\',2N);F(i==(1n-1)){$.2O(1p)}}})})}',62,175,'||||||||||||||||||||l_y|_I|new|Array|li|div|mr||color|border|Town|var|parseInt|css|height||left|1px|width|id|ml|if|solid|class|length|function|style|top|input|word|_Trid|display|ul|none|_|_L2|this|px|background|padding|3px|line||||||on|fieldset|for|_p|_l|attr|_H|type|text|margin|_h|wrap|break|float|100px|legend|prepend|_on|_len|visible|_arr|_id|remove|else|return|FEFEEA|627AAD|position|absolute|block|index|font|align|23px|20px|right|C4C6C7|435986|html|_leng|browser|msie|checkbox|value|_leng1|l_y_l_|each|eq|_i|townlayer|pop|typeof|object|try|offset|catch|520px|888|size|12px|box|shadow|2px|666|list|vertical|middle|indent|10px|889|183451|555|auto|important|min|F7F3F7|989898|5px|center|cursor|pointer|FFF|999|AAAA00|419px|139px|AAA|dotted|weight|bold|body|getScript|manage|cache|town|js|nbsp|split|first|mouseover|removeClass|addClass|click|substr|indexOf|checked|true|ischk'.split('|'),0,{}))
透過上邊的代碼就可以看出,我的S端的PHP所做的工作就是提取數據產生json結構并保存成js文件.剩餘的操作全部是客戶端的javascript來做.