当前位置:首页 > 开发 > Web前端 > 前端 > 正文

TT随笔三 前台公共功能猜想

发表于: 2013-05-16   作者:Small嗳TT   来源:转载   浏览:
摘要: 我们先大致的猜想下,前台代码编写过程中,会有哪些功能是可以抽离出来当做公共方法调用的。 1、JS代码编写过程中经常会要用到的方法: isEmpty(), isT(), isF(), getFunc(), getValByDef() 好吧,我又懒了~~勿喷。 2、消息提示框。关于这点,自然不能那么俗的用自动的alert和confirm了。目前我们前台是用EasyUi,而EasyUi的信息提示

我们先大致的猜想下,前台代码编写过程中,会有哪些功能是可以抽离出来当做公共方法调用的。

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的版本等。

 

 

不知道为什么,源码一直传不上去,改天传吧!

TT随笔三 前台公共功能猜想

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
我现在在金融行业里“打工”,其实也就是外包啦T_T,在这个行业里面,几乎不给用这些开源项目的机会
当工程基础打好之后,我就在想,在服务启动的时候,我们往往会需要进行一些处理,包括静态资源的读
首先先来讲讲上个章节的,修正了2个bug:1、自读字段不用disabled而是用readonly;2、修正了parseAt
角谷猜想也叫考拉兹猜想或者3n+1猜想。在1960年代,日本人角谷静夫研究过这个猜想。在1930年代,德
角谷猜想也叫考拉兹猜想或者3n+1猜想。在1960年代,日本人角谷静夫研究过这个猜想。在1930年代,德
角谷猜想也叫考拉兹猜想或者3n+1猜想。在1960年代,日本人角谷静夫研究过这个猜想。在1930年代,德
角谷猜想也叫考拉兹猜想或者3n+1猜想。在1960年代,日本人角谷静夫研究过这个猜想。在1930年代,德
最近手头有个项目,需要实现@功能,之前 @红薯 开源过@功能的实现OSCHINA @提到我 的处理代码,后端
多线程 1、线程是进程中的一条执行路径。进程是系统中正在运行的程序。(进出是一个静态概念,线程
多线程 1、线程是进程中的一条执行路径。进程是系统中正在运行的程序。(进出是一个静态概念,线程
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号