<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. 表现层：这是用户与系统交互的部分，通常由HTML、CSS和JavaScript组成，负责显示数据和接收用户输入。ASP...
当进程运行过程中需要访问的数据不在内存中时，会发生“缺页”中断，系统会通过特定的算法选择内存中的某一页淘汰，以便将所需页面调入内存。 #### 三、LRU置换算法详解 **LRU置换算法原理:** LRU（Least Recently...
在操作系统中，页面淘汰算法是内存管理的重要组成部分，特别是在虚拟内存系统中，当物理内存不足时，必须将一些页面从内存中移出，为新数据腾出空间。本实验报告聚焦于页面淘汰算法的模拟实现与比较，主要针对北京...
- **具体作用**：通过这种方式，CPU将跳转到以GDT第2项中的base_addr为基地址、偏移量为0的位置执行代码，即head程序的起始位置。这里使用了保护模式下的段选择符。 #### 三、保护模式的关键技术 **6. 保护模式的...
运行截图和结果分析可以帮助我们理解不同算法在不同场景下的表现，而心得体会部分则反映了作者在完成课程设计过程中的思考和成长。 总的来说，页面置换算法是操作系统中虚拟存储管理的关键组件，理解和优化这些算法...
3. **分页与请求分页系统**：分页将内存划分为固定大小的页，请求分页系统在此基础上增加了动态调页和置换功能，允许进程在需要时才加载部分代码和数据。 4. **请求分段系统**：类似地，分段允许按照逻辑结构划分...
2. **问题定义**：系统主要针对网吧管理人员和上机人员，管理人员需通过密码登录，有权限进行数据操作，而上机人员权限较低，只允许上网，超时会收到提醒。 3. **需求分析**：系统应具备的主要功能包括初始化数据、...
以区域为例 各区域充值总金额、充值人数、充值次数、付费率、arpu值分布 交叉分析 以区域和性别为例 不同性别+不同地域环境下，付费率数据…… 渠道分布 品牌、机型、操作系统、分辨率、联网、版本、设备均价、运营...
以目标为导向，学会数据拆分 细分到极致 追踪思路 运营的问题，是追踪出来的，不是一次就看出来的 所有的数据都是靠积累和沉淀才能发现问题，单一的数字没有任何意义，只能称为 “数值” 结合/拆分思路 追踪...
吞吐量是衡量系统处理请求能力的重要指标，它通常以请求数/秒、页面数/秒、人数/天或业务处理数/小时等单位来表示。在没有遇到性能瓶颈的情况下，吞吐量与虚拟用户数（VU）之间的关系可以用公式F=VU*R/T来描述，其中...
性能计数器则提供了服务器和操作系统性能的监控数据，能够帮助我们发现性能瓶颈。 思考时间是指用户在执行连续操作之间，对系统响应的等待时间。在性能测试中，对思考时间的模拟至关重要，因为它更真实地反映了用户...
在当今Web开发领域，Node.js以其异步非阻塞I/O、高性能和可扩展性等特点，已经成为构建高效后端服务的重要工具。本篇将深入探讨一个基于Node.js的图书管理系统，包括其核心概念、设计思路、主要功能以及实现细节。 ...
ASP.NET的核心特性包括：模型-视图-控制器（MVC）架构、动态数据支持、自动页面状态管理等，这些都在餐饮管理系统中得以体现。 三、毕业设计论文结构 1. 任务书：明确项目目标、需求分析和预期成果，为后续设计提供...
在实验结果一节中，报告会展示代码运行的截图和数据，这些证据直观地反映了程序的运行效果和性能表现，这对于验证理论正确性和程序的稳定性至关重要。 报告之后，代码部分则将理论转化为实践。在进程管理模块，代码...
当内存中没有足够的空闲页面时，该算法会淘汰最早进入内存的页面，以便为新进入的页面腾出空间。虽然其实现简单，但其性能可能不是最优的，因为它可能会导致Belady异常，即分配更多内存反而导致更多的页面置换。 **...
项目开发过程中，开发者需要掌握ASP.NET中的关键概念和技术，如ASP.NET页面生命周期、控件事件处理、数据绑定、ADO.NET数据库操作等。此外，他们还需要熟悉SQL语言，以便在数据访问层中编写高效的SQL查询语句，与...
这个名为"ASP.NET基于WEB的工作计划统计分析系统的设计与实现(源代码+论文).zip"的压缩包文件，显然包含了使用ASP.NET技术构建的一个工作计划统计分析系统的完整源代码和相关论文，为学习者或开发者提供了深入了解和...
- **战略调整**：鉴于上述观察，公司认识到需要将更多的资源和注意力转移到H5页面上，以充分利用其作为新用户入口的作用，并支持APP的持续增长。 #### 二、移动SEO做什么？ - **组织结构调整**：为了更好地支持...
《JSP计算机等级考试查询系统》是一个基于Java服务器页面（JSP）技术开发的应用程序，主要功能是为用户提供计算机等级考试的成绩查询服务。这个系统包含了源代码、论文以及答辩PPT，是学习和理解JSP应用开发的一个...
### 性能测试方案详解：以新闻中心项目为例 在IT行业，尤其是软件开发与运维领域，性能测试是一项至关重要的工作，它确保了应用系统在高负载下的稳定性和可靠性。本次我们将以“新闻中心”项目作为案例，深入探讨一...