前台JS模块设计_前台页面模块设计-CSDN博客

本文链接：https://blog.csdn.net/Leon_He_CN/article/details/1473517

前台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>

[[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		执行提示
输出参数	参数名	参数类型		参数描述

返回值
备注