以数据为中心的系统 页面表现的思考2
<html> <head> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="log4js-mini.js"></script> <script type="text/javascript" src="function.js"></script> <script type="text/javascript" src="screen_structor.js"></script> <link rel="stylesheet" href="style_cache.css" type="text/css" /> <style> </style> <script>
//页面数据类型的定义 var groupa= { user_cd:{type:'x',length:2,singlebyte:false,mandatry:true,validator_button:['search']}, user_int:{type:'int',length:5,display_only:false,mandatry:true,validator_button:['search','dssaae']}, user_float:{type:'float',length:8.3}, user_date:{type:'date',length:5,display_only:false,mandatry:false,validator_button:['search']}, user_time:{type:'time',length:5,display_only:false,mandatry:true,validator_button:['search']}, } $('document').ready( function(){ var binder =new screen_structor('group1' ,groupa); binder.struct_binding(); //将数据结构映射到页面上。 // event $('#btest').click( function(){ var rs=binder.validate(); //基于数据结构进行页面验证alert(rs.succ);for (o in rs.errorMsg){ alert(o+ ':'+rs.errorMsg[o].error_reason);} } ) } ) </script> </head><body><div id='group1'> x <input type='text' id='user_cd' name='user_cd' maxlength='2'/> int<input type='text' id='user_int' name='user_int' maxlength='2'/> date<input type='text' id='user_date' name='user_date' maxlength='2'/> time<input type='text' id='user_time' name='user_time' maxlength='2'/> float<input type='text' id='user_float' name='user_float' maxlength='2'/> <input type='button' id='search' value='aa' /></div> </body> </html>?将数据绑定到页面结构的方法：
function screen_structor(id,structors){ var myself=this; this.id=id; this.structors=structors; this.logger = new Log(Log.DEBUG, Log.popupLogger) //default structor define var default_structor={display_only:false,singlebyte:true,uppertext:true}; for(default_0 in default_structor){ for(field in this.structors){ if (this.structors[field][default_0]==null) this.structors[field][default_0]= default_structor[default_0];} } // defind processor this.struct_processor={ //length process length:function(field,node){ //myself.logger.debug("node"+node.name); switch(field.type){ //string case 'x': $(node).attr("maxlength",field.length); break; //int case 'int': $(node).attr("maxlength",Math.floor(field.length/3)+field.length); myself._addClass($(node),'int'); myself.logger.debug("node"+(Math.floor(field.length/3)+1)); break; case 'number': $(node).attr("maxlength",field.length); myself._addClass($(node),'number'); break; //date case 'date': $(node).attr("maxlength",8); myself._addClass($(node),'date'); break; //time case 'time': $(node).attr("maxlength",5); myself._addClass($(node),'time'); break; case 'float': var f_length=field['length']; $(node).attr("maxlength",Math.floor(field.length/3)+Math.floor(f_length)+1); var total=Math.floor(f_length); var fraction=Math.floor((f_length-total)*10); myself.logger.debug("f_length:"+'field[length]'+",total:"+total+",fraction:"+fraction+",field:"+field); myself._addClass($(node),'float'+fraction); break; }}, //read only display_only:function(field,node){ if (field['display_only']){ $(node).attr("readonly",'readonly'); myself._addClass($(node),'display'); }},//uppertext uppertext:function(field,node){ if (field['uppertext']){ myself._addClass($(node),'uppertext'); }else{ $(node).removeClass('uppertext');}} //end }; //validate processor this.validate_processor={ //mandatry mandatry:function(field,node,functionName){if (field['mandatry']){ if (jQuery.inArray( functionName,field['validator_button'])){ if (isBlank($(node).val())){ return false; } }}},//singlebytesinglebyte:function(field,node,functionName){ if (field['singlebyte']==false) return true; var g_single_pattern=new RegExp("[^\u0000-\u007F]");var v=$(node).val() if (isBlank(v))return true; myself.logger.debug("singlebyte "+v);return !g_single_pattern.test(v);},//lenght length:function(field,node,functionName){ if (field['type']=='x' && field['singlebyte']==false){ var v=$(node).val(); var valueByteCount=0; for (m=0;m<v.length;m++){ if (v.charCodeAt(m)>127) valueByteCount = valueByteCount + 3; else valueByteCount = valueByteCount + 1; } if (valueByteCount>field['length']) return false; return true;}},//type (for float int )type:function(field,node,functionName){ myself.logger.debug("type "+field.type); if (field['type']=='float' || field['type']=='int'){ var v=$(node).val(); if (isBlank(v)) return true; v=v.replace(",", ""); v=v.replace(/\./, ""); myself.logger.debug("v :"+v+"v.length "+v.length+'field.length:'+field.length); if ((v.length)>Math.floor(field.length)) return false; } return true;} } // private mehtod to add css this._addClass=function(j_node,j_class){ if (j_node.hasClass(j_class)){ return;}else{ j_node.addClass(j_class);} } //do binding this.struct_binding=function(){ var key="#"+id+" input:text"; $(key).each(function (){ var field=myself.structors[this.name]; if (field){ for(o in field){ // process all kinds of type length if (myself.struct_processor[o]){ myself.struct_processor[o](field,this); } } }} ) }; //validate //return: // succ: true or false // errorMsg: error_node: the node which is error // error_reason: the reason of error ex: singglebyte type ..... this.validate=function( functionName){ var rsVal=true;var rsError=[]; var fn=functionName;var key="#"+id+" :input"; $(key).each(function (){ var field=myself.structors[this.name]; if (field){ for(o in field){ // process all kinds of type length if (myself.validate_processor[o]){ if ( myself.validate_processor[o](field,this,functionName)==false){ rsVal=false; rsError[this.name]={error_node:this,error_reason:o,error_type:field.type}; myself.logger.debug("this.name:"+this.name+"value:"+o);} } } }} ) return {succ:rsVal,errorMsg:rsError} } //end }?? 这样将对数据结构的要求与数据的表现分开，集中的放了js一个js文件中，并且集成了 类似struts的validation，信息集中在一个结构中非常方便。
?? binding 方法主要对数据的各个类型（string float ..）加上相应的css这个可以通过htc或者共同的事件绑定到css中统一的处理。
?? validate方法主要是利用已知的类型等信息进行验证。
?
?? 这样我们已经完全把html的数据特征和数据表现分离了，并且将数据特征集中到了一起便于维护。
?? 下一步就是将客户端和服务器分离。
?
?? 传统的web变成调试很麻烦，页面上有很多的tag以及服务器的交互信息，不启动服务器页面也很难调试。jsp的制作完毕后必须启动服务器调试。如果我们能将客户端和服务器彻底分离，客户端html做完后可以单独调试，就非常方便了。这就需要用到ajax的技术。
?? 思路是这样的：
?? ? ? ? 【1】页面就是简单的html
?? ? ? ? 【2】和服务器的交互就是json对象。
?? ? ? ? 【3】页面的调试可以自制json对象类调试，这样就非常方便了。
?
?? 难点：
?? ? ? ? ?struts等mvc的工具体统了很多tag可以自动将数据和form的javabean映射，无论从服务器pull数据下来展现，还是submit数据到服务器都能够实现自动化，节省了不少时间。这个是我们需要解决的。
?? ? ? ? ?如果我们能共在自动从node中收集数据成为对象，再和服务器端用json交互这个问题不就是解决了？这里可用的工具就是dwr。和xstream .
?
?
?
?
?