前台JS模块设计

 

前台JS模块设计... 2

1.1          简介... 2

1.2          接口... 2

1.2.1       异步请求数据MyXmlHttp.callMethod(…..)2

1.3          实现方式... 2

1.4          限制条件... 2

1.5          生命周期... 2

1.6          设计概述... 2

1.6.1       单元定义... 2

1.6.2       类图... 3

1.6.3       时序/交互图... 3

1.6.3.1           异步请求执行后台功能时序图... 3

1.6.3.2           创建SmartInput对象... 4

1.6.3.3           检测到用户有输入时... 4

1.6.4       单元设计... 5

1.6.4.1    MyXmlHttp. 5

1.6.4.1.1    单元描述... 5

1.6.4.1.2    单元设计描述... 5

1.6.4.1.2.1    全局变量... 5

1.6.4.1.2.2    单元对外接口方法描述... 5

1.6.4.1.2.2.1    方法callMethod. 5

1.6.4.1.2.3    单元对内方法集... 6

1.6.4.1.2.3.1    创建XMLHttpRequest对象方法... 6

1.6.4.1.2.3.2    从返回结果内提取错误信息XmlHttpGetError6

1.6.4.1.2.3.3    返回结果处理方法handleResponse. 7

1.6.4.2    SmartInput7

1.6.4.2.1    单元描述... 7

1.6.4.2.2    单元设计描述... 8

1.6.4.2.2.1    全局变量... 8

1.6.4.2.2.2    单元对内方法集... 8

1.6.4.2.2.2.1    为提示依附的输入框添加事件InitTextbox()8

1.6.4.2.2.2.2    创建显示提示区域RenderHintsZone()8

1.6.4.2.2.2.3    重画显示区域RedrawHintsZone. 8

1.6.4.2.2.2.4    查询数据QueryMatchs(keyword,pageNo)8

1.6.4.2.2.2.5    查询到数据后的回调函数... 8

 

前台JS模块设计

1.1                简介

前台JS模块主要完成向后台请求提示数据，绘制提示框并控制用户操作提示框时各鼠标和键盘事件。共包括二个子模块MyXmlHttp与SmartInput。MyXmlHttp主要封装了XMLHttpRequest,它屏蔽了各浏览器之间的差别，提供给用户简单的接口完成数据的异步请求；SmartInput则完成了提示数据的显示与控制。

1.2                接口

1.2.1异步请求数据MyXmlHttp.callMethod(…..)

用户只需提供请求后台功能的URL，参数及请求成功后需执行的回调函数。异步请求数据接口就可以自动完成新建与浏览器相适应的XMLHttpRequest对象，发送请求，错误判断及执行回调函数。

附：对于SmartInput模块，如果将它所依附的输入框算为内部成员的话，那以它就没有向外提供接口，因为它本身是通过事件触发的。

1.3                实现方式

本模块通过封装XMLHttpRequest对象来异步请求数据，后台à前台的数据交换采用XML。将需提示的输入框与提示信息的请求、显示与控制封装在一起。

1.4                限制条件

后台的数据格式一定要与前台的解析格式是一致的。后台返回前台的XML格式为：

<xml>

 <error>

     <code>

     </code>

     <desc>

     </desc> 

 </error>

 <results>

 [[total_num],[[id,name,pym,wbm,qtm],[id,name,pym,wbm,qtm].......]]

 </results>

</xml>

1.5                生命周期

模块与所在页面的生命周期相同。

1.6                设计概述

1.6.1单元定义

单元名称

单元描述

MyXmlHttp

异常请求数据

SmartInput

录入信息提示功能

 

1.6.2类图

附：对于SmartInput只建模了关键方法。

1.6.3时序/交互图

1.6.3.1    异步请求执行后台功能时序图

1.6.3.2    创建SmartInput对象

1.6.3.3    检测到用户有输入时

1.6.4    单元设计

1.6.4.1    MyXmlHttp

1.6.4.1.1      单元描述

本单元主要是利用XMLHttpRequest对象，异步地调用后台程序功能。它屏蔽了浏览器创建XMLHttpRequest对象的差异、封装了请求的发送及请求结果信息的判断等功能。

1.6.4.1.2      单元设计描述

1.6.4.1.2.1 全局变量

//需要全局变量is_ie, is_ie5

1.6.4.1.2.2 单元对外接口方法描述

1.6.4.1.2.2.1   方法callMethod

方法原型

callMethod

类型

API

callMethod (callBackMethod, params, listener, execHint,ServerFuncURL,attempts, server,method)

功能说明

异常请求数据

调用关系

无限制

输入参数

参数名

参数类型

参数描述

callBackMethod

String

回调函数名

params

Object

参数

listener

Object

回调函数所在的对象

execHint

Object

功能执行期间提示信息的显示

ServerFuncURL

String

后台功能所在相对地址

server

String

机器地址

method

String

POST/GET请求

输出参数

参数名

参数类型

参数描述

 

 

 

返回值

 

备注

 

方法的内部逻辑：

//以下是方法的伪代码：

MyXmlHttp.callMethod = function(callBackMethod, params, listener, execHint,ServerFuncURL, attempts, server,method) {

  //方法执行的必要参数判定;

   // 将params内的参数解析如name=value&…形式的字符串;

   //server+ ServerFuncURL求出后台功能的完整url

   //创建XmlHttpRequest对象;

   var req = this. XmlHttpCreate();

   //回调函数;

var callback = function(){

    If (4 == req.readyState){

   If (200 == req.status){

   //执行MyXmlHttp.handleResponse(..)

}else{//重试attempt次

 //执行MyXmlHttp.callMethod

}

}

}

   If (method = = “GET”)

      //send get request; this.XmlHttpGET (xmlhttp, url, data, handler)

   Else //send post request; this.XmlHttpPOST (xmlhttp, url, data, handler)

}

1.6.4.1.2.3   单元对内方法集

 

1.6.4.1.2.3.1   创建XMLHttpRequest对象方法

方法原型

XmlHttpCreate

类型

API

XmlHttpCreate()

功能说明

创建XMLHttpRequest对象

调用关系

无限制

输入参数

参数名

参数类型

参数描述

输出参数

参数名

参数类型

参数描述

 

 

 

返回值

返回类型 XMLHttpRequest， 成功 XMLHttpRequest对象，失败 null

备注

当用户浏览器不支持XMLHttpRequest对象时，提示用户;

 

  函数内部逻辑：

根据各浏览器的差异创建XMLHttpRequest对象；

1.6.4.1.2.3.2   从返回结果内提取错误信息XmlHttpGetError

方法原型

XmlHttpGetError

类型

API

XmlHttpGetError (rsXML,rsTxt)

功能说明

从中返回结果中解析错误代码与信息

调用关系

无限制

输入参数

参数名

参数类型

参数描述

 

rsXML

XML

 

rsTxt

String

 

输出参数

参数名

参数类型

参数描述

Success

Object

描述执行情况

返回值

返回类型 {code,desc}， 成功code = =0对象，失败 code <> 0

备注

 

 

方法的内部逻辑：

从执行返回结果内提取功能执行的情况的描述信息;

附：这时前后台对于错误信息在XML文档内的格式要达成一致；比如：

 /*<error>

     <code>

     </code>

     <desc>

     </desc> 

 </error>

*/

1.6.4.1.2.3.3   返回结果处理方法handleResponse

方法原型

handleResponse

类型

API

handleResponse(responseXML, callBackMethod, params, responseText, listener,execHint)

功能说明

执行回调函数

调用关系

无限制

输入参数

参数名

参数类型

参数描述

responseXML

XML

返回结果

responseText

String

返回结果

callBackMethod

String

回调函数名

listener

Object

回调函数所在的对象

params

参数

 

execHint

Object

执行提示

输出参数

参数名

参数类型

参数描述

返回值

 

备注

 

方法的内部逻辑：

   调用方法XmlHttpGetError;

   // listener + callBackMethod 执行回调函数;

附：回调函数一种写法为：

    var AJ={};

    AJ.save_onLoad=function(success,rsXML,rsText,params,execHint){   

        execHint.Hide();

        If(success.code!=0){

            alert('发生错误#'+success.code+'):'+success.desc);

            return;

        }

//处理;

     };

XmlHttpSend、XmlHttpGET、XmlHttpPOST方法说明省略。

1.6.4.2    SmartInput

1.6.4.2.1      单元描述

 

1.6.4.2.2      单元设计描述

1.6.4.2.2.1 全局变量

CacheHints缓存对象为全局对象;

1.6.4.2.2.2 单元对内方法集

1.6.4.2.2.2.1   为提示依附的输入框添加事件InitTextbox()

将添加事件：onblur、onkeyup、onkeydown、onfocus

1.6.4.2.2.2.2   创建显示提示区域RenderHintsZone()

方法内部逻辑：

          If 该区域未创建{

                   //插入iframe

                   //构造显示外区域

}

1.6.4.2.2.2.3   重画显示区域RedrawHintsZone

方法内部逻辑：

          If 如果查询的数据不为空 即this.hintsInfo.hints is not null

          //循环 this.hintsInfo.hints 重画显示区域;

          并向区域添加事件onclick、onmouseover等。

1.6.4.2.2.2.4   查询数据QueryMatchs(keyword,pageNo)

方法内部逻辑：

          If 如果缓存内未找到

          调用MyXmlHttp.callMethod()方法异步查询数据;

1.6.4.2.2.2.5   查询到数据后的回调函数

方法原型

QueryMatchs_onLoad

类型

API

QueryMatchs_onLoad (success,rsXML,rsText,params,execHint)

功能说明

查询到数据后的回调函数

调用关系

无限制

输入参数

参数名

参数类型

参数描述

success

Object

错误信息

rsXML

XML

返回结果

rsText

String

返回结果

params

Object

请求参数

execHint

Object

执行提示

输出参数

参数名

参数类型

参数描述

 

 

 

返回值

 

备注

 

方法内部逻辑：

// hints 从rsXML内解析结果；

       this.UpdateMatchs(hints);

       this.UpdateHintsZone();

       //添加到缓存;

对于显示、关闭提示区域及为显示区域添加键盘和鼠标选择事件的方法省略。