我们先大致的猜想下,前台代码编写过程中,会有哪些功能是可以抽离出来当做公共方法调用的。
1、JS代码编写过程中经常会要用到的方法:
isEmpty(), isT(), isF(), getFunc(), getValByDef()
好吧,我又懒了~~勿喷。
2、消息提示框。
关于这点,自然不能那么俗的用自动的alert和confirm了。目前我们前台是用EasyUi,而EasyUi的信息提示如下:
$.messager.alert('Warning','The warning message'); $.messager.confirm('Confirm','Are you sure you want to delete record?',function(r){ if (r){ alert('ok'); } });
如果我们直接使用的话,第一是太烦了,二是如果今后要换一套提示框,就必须到每一个业务代码中去修改,显然不合理。因此我们先定出以下几个方法:
alert(), alertInfo(), alertWarn(), alertErr(), confirm()。
演示例子见AlertDemo.jsp。
3、与后台的交互,分ajax异步和同步两种,并且额外为from表单提交提供一个ajax的异步方式:
callAjax(), callAjaxSync(), submitFrm()。因此我定义了自己的一个公共js:TT.js。设定全局变量$tt作为工具的实例。
在这里我主要讲下callAjax(),具体代码如下:
callAjax : function(action, data, callback){ $.post(action, data, function(ctrlResult) { $tt.alertCtrlMsg(ctrlResult); if(!$tt.isEmpty(callback)) $tt.getFunc(callback)(ctrlResult); }, "json"); }
callAjax方法接收三个参数:访问的url、传递的参数、回调函数。直接使用的是jquery的post方法,数据传输形式为json。访问后台成功后得到了后台返回的数据,在此,我希望后台统一返回给我的数据crtlResult中有如下几个字段:msg(消息内容),msgType(消息类型,例如error等),value(后台真正要返回的数据)。因此后台定义了一个CtrlResult类用于数据的包裹:
/** 提示信息 */ private String msg; /** 提示信息的类型 */ private String msgType = MSG_TYPE_INFO; /** 返回界面的值 */ private Object value;
如此一来,我就可以通过控制后台返回的数据,在前台自动显示提示信息,并且可以把这些提示信息在后台进行统一的规范。这个在今后的MsgLoader设计时我们在考虑。
对于表单的异步提交,我并没有使用easyui的表单提交,原因是其默认返回的对象为字符串而非json。于是我采用了jquery.form.js,但是我又想了下,没必要为了这么一个简单功能去引入一个jquery插件。于是我就直接采用了刚刚实现的callAjax方法,反而觉得十分简单,而且省了对弹出框代码的编写:
submitFrm : function(jqFrm, action, callback){ action = $tt.isEmpty(action) ? jqFrm.attr( 'action' ) : action; $tt.callAjax(action, jqFrm.serialize(), callback); }
演示例子见AjaxDemo.jsp。
在jsp中,我做了如下规范:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE html> <html> <head> <base href="<%=basePath%>" /> <jsp:include page="/pub/Metas4Base.jsp"></jsp:include> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="script/demo/AjaxDemo.js" type="text/javascript"></script> <title>AjaxDemo</title> </head> <body> </body> </html>
用base标签设置当前根路径为工程的根路径,用jsp:include引入Metas4Base.jsp。在这个jsp中,放置了公共的资源,例如js、css,统一使用相对路径的方式(即相对base)。这样可以有利于今后公共资源的修改,例如换easyui的版本等。
不知道为什么,源码一直传不上去,改天传吧!