`
Small嗳TT
  • 浏览: 11745 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

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

阅读更多

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

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.zip (2.9 MB)
  • 下载次数: 2
分享到:
评论

相关推荐

    TT随笔四 前台的CURD封装

    这篇名为“TT随笔四 前台的CURD封装”的博客文章可能讨论了如何在前端应用中优雅地执行CURD操作。尽管描述为空,我们可以推测作者可能分享了如何使用JavaScript(可能包括ES6语法)或者特定的前端框架如React、Vue或...

    TT随笔一 啰嗦

    【标题】"TT随笔一:啰嗦"的博客文章主要围绕着源码解析和工具应用这两个主题展开,虽然标题看似简洁,但其中蕴含的知识点却颇为丰富。在IT行业中,源码分析和工具的使用是提升开发效率、理解系统运行机制、优化代码...

    TT随笔二 TInit以及TMap

    本篇随笔“TT随笔二 TInit以及TMap”将探讨这两个主题,聚焦于一个特定的初始化过程(TInit)和一种数据结构(TMap)。 首先,让我们来看看TInit。在很多编程语言中,初始化是一种确保对象或变量在使用前处于预定...

    tt数字三趋势软件

    "tt数字三"的精确时间对应功能恰恰填补了这一市场空白。该功能可以精准地与彩票开奖的时间节点相对应,使得用户能够清楚地看到每个开奖周期内的数据波动。这对于那些善于发现时间序列规律的购彩者来说,无疑提供了一...

    TT随笔五 Nutz自定义视图以及提示信息的统一管理

    【标题】:“TT随笔五 - Nutz自定义视图以及提示信息的统一管理” 这篇博客文章主要探讨了如何在Nutz框架中实现自定义视图(views)以及如何进行提示信息的统一管理。Nutz是一款轻量级的Java开发框架,它提供了包括...

    TT作曲家简谱软件(不要注册全功能不能)

    总的来说,"TT作曲家"是一款功能强大且易于使用的简谱编辑软件,它以其免费且全功能的特点,成为音乐爱好者和初级作曲者理想的创作伙伴。无论你是想记录灵感,还是系统学习乐理,或者是创作自己的音乐作品,"TT作曲...

    tt.rar_TT计算器_TT软件代码_tt.r_计算器中TT

    这个"TT软件代码"是作者初次尝试编程的作品,它主要用于实现计算功能。"tt.r"可能是源代码文件或者某种特定格式的资源文件,与计算器程序相关。"计算器中TT"标签表明该代码是用于构建一个具有TT标识或特色的计算器...

    24tt多功能抽奖软件

    标题“24tt多功能抽奖软件”表明这是一款用于举办晚会抽奖活动的应用程序,它具备多种功能,能够满足不同场合的抽奖需求。描述中的“晚会抽奖软件,很实用,强大”进一步强调了该软件的易用性和高效性,暗示它可能...

    TT网页协议

    "TT网页协议"是一种专为特定网页交互设计的通信协议,它可能包含了高效的数据传输机制、安全认证方式以及特定的请求响应格式。在互联网技术领域,自定义的网页协议往往是为了满足特定应用或服务的需求,比如优化数据...

    TT TT TT TT TT TT TT TT TT

    TT

    TT电机(TT马达)三维模型图纸step格式

    TT电机(TT马达)三维模型图纸step格式

    Type tutor(TT) 经典打字软件TT

    "Type Tutor(TT)"以其独特的教学模式和强大的功能,赢得了"打字高手之必备"的美誉。它不仅帮助初学者快速掌握正确的打字姿势和技巧,还为有经验的用户提供了提高打字速度和准确性的平台。其核心在于科学的教学体系,...

    tt.zip_TT_tt名字代码

    【标题】"tt.zip_TT_tt名字代码" 涉及的是一份关于统计源代码信息的项目,其中包含了各种类的设计以及类中函数的实现。这个项目的主要目标是统计源代码中的函数数量、代码行数以及与空格相关的函数框架。 【描述】...

    tt打字+dosbox

    tt打字软件,附加dosbox;因为tt是很老的一个dos程序了,在windows下不能直接打开,需要安装dosbox。安装完dosbox之后,打开,并执行一下命令: 》mount c E:\tt 其中E:\tt是存放了tt.exe文件的目录。该命令是指将E:...

    24TT多功能抽奖软件

    《24TT多功能抽奖软件深度解析》 24TT多功能抽奖软件是一款专为各类活动设计的抽奖工具,其最新版本为4.1.5.1,发布日期为2013年12月22日。该软件的核心功能是提供灵活多样的抽奖方式,适用于各种场合,如企业年会...

    TT 项目方案 計劃書

    在第二章中,我们将详细讨论TT的核心功能模块,这些模块构成了TT软件的基础架构,也是吸引用户的关键所在。 2.1. TT提醒模块 TT提醒模块是一个强大的日程管理工具,用户可以设置定时提醒,确保不会错过任何重要的...

    tt二位作图软件

    5. **交互式操作**:tt二位作图软件可能具备交互式功能,允许用户在图表上直接进行数据点的选择、拖拽,或者通过鼠标滚轮缩放视图,增强数据探索体验。 6. **保存与导出**:完成绘图后,用户可以将图表保存为图像...

    24TT多功能抽奖软件v4.7.6.1官方简体中文安装版

    24TT多功能抽奖软件是一款功能全面、设置灵活、操作简单、界面美观的电脑抽奖工具。图片、文字、编号全搞定,除抽奖外同时集合会议二维码、照片采集、签名签到、签退,带二维码的入场券打印等参会人员管理功能。操作...

Global site tag (gtag.js) - Google Analytics