<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;
}
}
}
},
//singlebyte
singlebyte: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 .
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
