首页 > 代码库 > 我过去的那些编程思想

我过去的那些编程思想

2024-09-19 05:15:18   204人阅读

我从开始工作,直至现在已经可以说有好几年了,所以说谈谈我过去的那些编程的思想,算是个人工作历程的一段总结吧.


在过去做过的项目中曾经发生过这样的事情,那就是项目中有茫茫多的js,一个页面,dom元素没有多少,但是与其相关的js到是有很多,可能是上百行亦或是上千行,可是不幸的是,写这些代码的人离职了,而项目又没有留下什么开发文档之类的技术手册,结果可想而知,就这是一个大大的坑,由于新接手的人不可能立马就能上手该项目的业务流程,更不可能在繁杂的js中理清项目的业务逻辑,遇到了问题,连个请教的人都找不到.


从此我就知道了,前端,尤其是页面是一个坑,一个大大的坑,但是坑总是要解决的,尤其是我当上了项目负责人之后,我意识到,这种问题不解决不行,否则整个项目就无法进行把控,所以必须得解决,我的解决方法是这样的,先从容易上手的方面入手,前端页面,其实严格划分的话可以分为前台前端与后台的前端,前台的前端有时候需要很多展示css样式特效,对其相应的操作也就会显得麻烦些,js的操作既有操作css样式的js,又有操作数据交互的js;而后台的js则主要是数据交互的js，相比较而言就比较的简单了，所以说我就先从后台的前端开始干起，不断的简化其相关的操作，我的终极目标是消灭js，消灭这个容易出现问题的大坑。


下面是我过去开发的一些代码：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt"  uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<script type="text/javascript" src="lib/PIE_IE678.js"></script>
<![endif]-->
<link href="${pageContext.request.contextPath }/h-ui/css/H-ui.min.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/h-ui/css/H-ui.admin.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/h-ui/lib/Hui-iconfont/1.0.6/iconfont.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix(‘*‘);</script>
<![endif]-->
<title></title>
</head>
<body>
<nav class="breadcrumb">
	<a class="btn btn-success radius r mr-20" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont"></i></a>
</nav>
<div class="pd-20">
	<div id="search" class="text-c"> 
		<!-- 日期范围：
		<input type="text" onfocus="WdatePicker({maxDate:‘#F{$dp.$D(\‘datemax\‘)||\‘%y-%M-%d\‘}‘})" id="datemin" class="input-text Wdate" style="width:120px;">
		-
		<input type="text" onfocus="WdatePicker({minDate:‘#F{$dp.$D(\‘datemin\‘)}‘,maxDate:‘%y-%M-%d‘})" id="datemax" class="input-text Wdate" style="width:120px;">
		 -->
		<input type="text" class="input-text" style="width:250px" placeholder="输入信息内容" id="M_NAME" name="" value="">
		<button type="submit" class="btn btn-success radius" name="" onclick="searchMethod(‘#HomeMessageList‘)" ><i class="Hui-iconfont"></i> 搜索</button>
	</div>
	<div class="cl pd-5 bg-1 bk-gray mt-20"> 
	<span class="l">
		<a href="javascript:;" onclick="member_del(‘../homeMessage/deleteHomeMessage‘)" class="btn btn-danger radius"><i class="Hui-iconfont"></i> 删除</a> 
		<a href="javascript:;" onclick="member_add(‘添加‘,‘../homeMessage/insertHomeMessage‘,‘‘,‘510‘)" class="btn btn-primary radius"><i class="Hui-iconfont"></i> 添加</a>
		<a href="javascript:;" onclick="member_edit(‘修改‘,‘../homeMessage/updateHomeMessage‘,‘‘,‘510‘)" class="btn btn-primary radius"><i class="Hui-iconfont"></i> 修改</a>
		<a href="javascript:;" onclick="member_msg_single(‘../homeMessage/pushHomeMessage‘,‘推送‘)" class="btn btn-primary radius"><i class="Hui-iconfont"></i> 推送</a>
	</span>
	<div class="mt-20">
	<table id="HomeMessageList" class="table table-border table-bordered table-hover table-bg table-sort">
		<thead>
			<tr class="text-c">
				<th width="25"><input type="checkbox" name="" value=""></th>
				<th data-field="H_ID">ID</th>
                <th data-field="H_MESSAGE">信息内容</th>
                <th data-field="H_TIME" data-formatter="dateFormatter">添加时间</th>
                <th data-field="H_MESSAGE_1">推送状态</th>
			</tr>
		</thead>
	</table>
	</div>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/layer/2.1/layer.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/laypage/1.2/laypage.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/My97DatePicker/WdatePicker.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/moment.min.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/js/H-ui.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/js/H-ui.admin.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/Validform/5.3.2/Validform.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/tableAddData.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/tableBtnGroup.js"></script>
</body>
</html>

页面显示风格：

技术分享


可以看出,该页面中没有任何相关的js操作,通过扔掉js,也就扔掉了开发过程中经常所面临的那个大坑,这样就为项目的快速开发打下了基础,这样的代码天生就具有快速开发,低出错率,容易实现模块化的特性.


下面我来解读一下该页面的详细开发过程.

该页面采用的是现在主流的开发框架H-ui,页面表单采用的是datatable,,页面中的字段显示思路是这样的,通过js工具类获取表单中的td,然后扫描td上的相关属性,比如说这里遇到的属性主要是有两个,分别是:"data-field"和"data-formatter",其中"data-field"的值是数据库的字段,也就是说数据库中的ID字段为"H_ID",那么此处的"data-field"的值是"H_ID",依此类推，信息内容的数据库字段为“H_MESSAGE”，那么其相关的"data-formatter"的值是“H_MESSAGE”等，这样，只需要js插件扫描到td的相关属性，就会将从后台取出来的信息放到相应的td中去。


页面中的"data-formatter"属性，代表的是数据类型，数据的类型可以是图片，也可以是时间，一个页面的数据类型主要是这连个，当该数据类型是时间时，从后台取出来的是时间类型的数据，在前台展示的时候是不方便阅读的，要想方便阅读，那就必须得进行格式话，我采用的格式化插件是“moment.min.js”，这是一个专门用于时间格式化的js插件，在js的工具类“tableAddData.js”中有其相关的调用方法，当其扫描到data-formatter="dateFormatter"时，了解到，这里的“data-formatter”代表的是date日期类型的格式化，所以说会自动的格式化时间数据，因而我们在开发该页面的table表单时，只需要这么三个简单的操作：

一、命名当前的table表单的id，因为jquery操作table是根据的table表的id来进行的。

二、从数据库中拷贝相关的字段名，将其赋值为相应的"data-field"

三、指定数据类型data-formatter,如果是纯显示，不管是字符串还是数字，此处均可以省略操作，如果想自定义数据操作，只需要将其值设置成自定义的函数名即可，但是前提是该函数名不能与默认相同，否则就执行默认，不执行自定义了。


通过上面，我们发现对于table表单的操作，最少只需要两步，至多三步就可以解决，而且绝大多数页面都可以实现页面的零js操作。


页面的请求分为两种，一种是页面数据的查询，一种是页面数据的持久化，我是这样规定的，所有的数据请求用get方法，所有的持久化操作（增、删、改）用post操作，其中get请求路径放在工具类“tableAddData.js”中，并且是集中存放，比如说下面的get请求：

	//管理员管理
	table_add_data(‘#AdminList‘,‘../admin/adminList‘);
	//会员管理
	table_add_data(‘#MemberList‘,‘../member/memberList‘);
	//通知公告管理
	table_add_data(‘#HomeMessageList‘,‘../homeMessage/homeMessageList‘);

所有的get请求路径均集中存放，这样方便于维护与管理，由于所有的list页面中均引入了该“tableAddData.js”工具类，所以说一旦向后台get数据，js将依次操作其中的js请求id及路径，如果路径对应的页面不是当前页面，那么在查找table表的id时就是空数据，那么该路径就不会向后台请求了，所以说能够向后台请求的路径一定是当前正在活动的页面，只有当前页面中的table的id是存在的，所以说也只有其对应的路径才会被执行，其它的一律不会执行。所以说我们在get页面数据的时候也只是写一行js代码而已，而且是写在js的工具类中，页面中根本不用再去添加，所以说也可以实现无js的编程。


页面的增、删、改于此类似，与此相关的js操作在js的工具类“tableBtnGroup.js”中进行，通过a标签的onclick属性来进行调用。这里是该js中的部分代码：

/*用户-添加*/
function member_add(title,url,w,h){
	layer_show(title,url,w,h);
}

/*用户-编辑*/
function member_edit(title,url,w,h){
	var checkboxes=$(‘table tbody tr‘).find(‘input[type="checkbox"]‘);
	var tr_num = null;
	var checkboxVal=‘‘;
	checkboxes.each(function(){
		if($(this).prop(‘checked‘)==true){
			tr_num++;
			checkboxVal=$(this).val();
		}
	});
	if(tr_num==null){
		layer.msg(‘请选择要修改的数据！‘,{icon:0,time:1000});
	}else if(tr_num==1){
		url+=‘?id=‘+checkboxVal;
		layer_show(title,url,w,h);
	}else{
		layer.msg(‘请选择一条数据！‘,{icon:0,time:1000},function(){
			return null;
		});
	}
}

上面仅列举了两个，实际不止这些，但是思路基本上都是一致的，这样，增、删、改也只是对于属性的操作，工具类不用进行任何操作，只需要引入js工具包即可。


数据的查询操作：

数据的查询操作是通过扫描id="search"包裹下元素的所有id来实现的，凡是被该元素所包裹下的所有元素的id均被视为搜索条件，id的值即为后台数据库中对应的相关字段，当然，这里传递的值绝大多数是文本框中的，但是除了这些之外还有其它的，比如说select下拉列表框等，所以说要想执行查询操作，只需一步，就是简单的添加id即可。如上面截图中的查询信息内容，就是简单的添加一个id="M_NAME".


这里是修改页面：

技术分享


可以看到页面很简洁，我的观点是简介就是美，所以说我所设计的页面一向都比较简洁。但是简洁之处并不失强大，比如说该页面，弹窗口是采用的现在比较前卫的layer弹层插件，该插件简洁，美观，容易上手功能还不失强大。

在该页面中还有表单验证，此处我采用的表单验证插件是比较流行的“Validform”，如果你要是以为该页面中采用了js相关操作，那你就是打错特错了，该页面仍然不用编写任何js，如下：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt"  uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src=http://www.mamicode.com/"lib/html5.js"></script>>
页面元素的赋值采用的是el表达式：“${}”格式来完成，表单验证通过的是工具类扫描“datatype”和“nullmsg”来完成，表单的提交通过的是“omclick”属性，就如上面的提交按钮所示的那样，要知道，在这里，所有的增删改都是通过ajax回调来完成，因为所有的数据持久化操作都要提示用户该持久化是否成功，代码如下所示：
//保存表单数据
function operationdata(dataurl,fromid){
	//判断必填文本框是否为空
	$(fromid).find(‘[datatype]‘).each(function(){
		if($(this).val().trim() == ""){
			var tishistr = $(this).addClass(‘Validform_error‘);
			$(this).parent().next().find(‘span‘).addClass(‘Validform_wrong‘).html(‘不能为空！‘);
		}
	});
	//判断文本框的内容是否填写正确
	var haserror = $(fromid).find(‘.Validform_error‘).length;
	if(haserror>0){
		alert(‘请填写正确数据！‘);
	}else{
		var index1 = layer.load(1); //换了种风格
		$.ajax({
			async:false,
			url:dataurl,
			data:$(fromid).serialize(),
			type:‘post‘,
			success:function(result){
				var status=result.msg.status;
				 var desc=result.msg.desc;
				    if(status == 0){
				    	layer.msg(desc, {icon: 1,time: 1000},
				    	 function(){
				    			//关闭子页面，刷新父页面
				    			var index = parent.layer.getFrameIndex(window.name);
						    	window.parent.location.reload();
						    	parent.layer.close(index);//关闭弹框 
						    	layer.close(index1);
				    	 }
				    	); 
				    
				    }else{
				    	layer.msg(desc, {icon: 0,time: 1000});
				    	layer.close(index1);
				    }
			},
			error:function(){
				alert("运行错误！");
			}
		});
		
	}
}

上面的功能是如果“Validform”验证不通过，则不向后台提交数据，如果通过1秒后，则关闭父页面（弹层页面），刷新子页面，同时还会关闭遮罩层，遮罩层的目的就是防止用户多次向后台提交数据，如果出现其它错误，则直接弹窗提示。

由于用户的添加操作页面于此类似，这里我就不分开讲了。

页面的树形列表：
我们先看页面效果图，页面的树形列表如下：
技术分享
该页面也相当的简介，这是我的一贯风格，我不喜欢在页面中堆一大堆的各种文本框，各种面板以及其它dom组件。
这个看似复杂的界面貌似要写好多js，实际上。。。。仍然是不用的，代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt"  uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<script type="text/javascript" src="lib/PIE_IE678.js"></script>
<![endif]-->
<link href="${pageContext.request.contextPath }/h-ui/css/H-ui.min.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/h-ui/css/H-ui.admin.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/h-ui/lib/icheck/icheck.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/h-ui/lib/Hui-iconfont/1.0.6/iconfont.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix(‘*‘);</script>
<![endif]-->
<title></title>
</head>
<body>
<div class="pd-20">
  <form action="javascript:void(0)" method="post" class="form form-horizontal" id="form-user-add">
  	<input type="hidden" id="ssId" name="ssId" value="${signSchool.ssId }">
    <div class="row cl">
      <label class="form-label col-2"><span class="c-red">*</span>岗位名称：</label>
      <div class="formControls col-5">
        <input type="text" class="input-text" value="${signSchool.ssName }" placeholder="请输入岗位名称" datatype="*2-16" id="user-name" name="ssName">
      </div>
      <div class="col-5"> </div>
    </div>
    <div class="row cl">
      <label class="form-label col-2"><span class="c-red">*</span>类别：</label>
      <div class="formControls col-5">
        <input type="text" class="input-text" value="${signSchool.ssType }" placeholder="请输入类别" datatype="*2-16" id="user-name" name="ssType">
      </div>
      <div class="col-5"> </div>
    </div>
    <div class="row cl">
      <label class="form-label col-2"><span class="c-red">*</span>计划报名人数：</label>
      <div class="formControls col-5">
        <input type="text" class="input-text" value="${signSchool.ssMessage2 }" placeholder="请输入计划报名人数" datatype="n" id="user-name" name="ssMessage2">
      </div>
      <div class="col-5"> </div>
    </div>
    <%-- <div class="row cl">
      <label class="form-label col-2">岗位备注：</label>
      <div class="formControls col-5">
        <textarea name="sscMessage1" cols="" rows="" class="textarea"  placeholder="说点什么...最少输入10个字符" datatype="*10-100" dragonfly="true" nullmsg="备注不能为空！" onKeyUp="textarealength(this,100)">${signSchoolClass.sscMessage1 }</textarea>
        <p class="textarea-numberbar"><em class="textarea-length">0</em>/100</p>
      </div>
      <div class="col-5"> </div>
    </div> --%>
    <div class="row cl">
      <div class="col-9 col-offset-2">
        <!-- <input class="btn btn-primary radius" type="submit" value="  提交  "> -->
        <a class="btn btn-primary radius"  onclick="operationdataZtree(‘../signSchool/updateSignSchoolClass‘,‘.form-horizontal‘)">  修改  </a>
      	<a class="btn btn-danger radius"  onclick="deleteZtree(‘../signSchool/deleteSignSchoolClass‘,‘.form-horizontal‘)">  删除  </a>
      </div>
    </div>
  </form>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/icheck/jquery.icheck.min.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/Validform/5.3.2/Validform.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/layer/2.1/layer.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/js/H-ui.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/js/H-ui.admin.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/tableAddData.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/tableBtnGroup.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/ztreeBtnGroup.js"></script>
</body>
</html>

该页面采用的树形列表是现在比较流行的zTree,我们在这里可以对树节点进行任意的增删改，而我们所做的操作仅仅是对于"onclick"的属性操作，下面是其数节点的添加。
技术分享

树节点的添加于此类似，我就在此省去了代码，此处仍然是有数据效验，以及数据的ajax回调等，功能一点都不少。

下面是图片的添加：
技术分享

仍然延续了我的那种简洁的风格，这里采用的图片上传插件为“webuploader”，页面中仍然没有js，而调用的时候采用的是工具类中封装的方法，默认是将图片上传到服务器的“upload”文件夹下，所以说路径是直接写死的，采用的是相对路径。

如果说想上传多张图片怎么办？
答案是如下所示：
技术分享

要知道，这个和上面那个是同样的上传图片控件，同样是采用的“webuploader”控件，所以说在这里，仍然不用写任何的js。
其实该页是被弹层出来的页面，其父页面由于组件比较多，所以说就采用了弹层方式来进行处理，其父页面如下：
技术分享
这里的每一个组件都有表单验证，在写这么多内容的情况下，我们的页面中仍然不用写任何js，不信，看下面代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt"  uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link href=http://www.mamicode.com/"${pageContext.request.contextPath }/h-ui/css/H-ui.min.css" rel="stylesheet" type="text/css" />>

下面是富文本编辑器：
技术分享

这里我采用的是“ueditor”，下面是其实现的代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt"  uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link href=http://www.mamicode.com/"${pageContext.request.contextPath }/h-ui/css/H-ui.min.css" rel="stylesheet" type="text/css" />>
额。。。。终于在这里见到了久违的js，其实我是有封装该富文本编辑器的方法的，奈何此处需要中英文切换，坑爹的中英文切换有木有？！除去中英文切换，此处在工具类中也有方法，也就是说如果不考虑中英文双语界面问题，此处完全可以省去js。
再后来页面的时间控件后来也改成了laydate,单选，复选改成了icheck，图片展示改成了jqthumb，包括还升级了jquery插件，比如下面就是laydate的工具类中的方法：
function initLaydate(){
	var layer_date=$(‘.layer-date‘);
	if(layer_date.length>0){
		var elementId=‘#layerDate‘;
		if($(elementId).length>0){
			var end = {
			        elem: elementId,
			        format: "YYYY-MM-DD hh:mm:ss",
			        min: laydate.now(),
			        max: "2099-06-16 23:59:59",
			        istime: true,
			        istoday: false,
			        choose: function(datas){ //选择日期完毕的回调
			        	$(elementId).removeClass(‘Validform_error‘);
			        	$(elementId).parent().next().find(‘span‘).removeClass(‘Validform_wrong‘).addClass(‘Validform_right‘).text(‘‘);
			        }
			    };
			    laydate(end);
		}
	}
}

这里需要注意的是，将单选框，复选框选中，jquery版本不同，方法也不一样，我们之前用的是1.4版本，用的是attr(‘checked‘,true);即可完成选中，但是在1.8之后的版本中就改成了prop(‘checked‘,true)。

除此之外还有页面命名规范，java命名规范，包括数据库数据表建表规范，业务逻辑，工作流程处理等等的我都有相关的规定，这里由于篇幅有限，我就不一一展看来讲了。

最后我还要说的是，干程序，永远都不要死记硬背，能简化就简化，能查文档就查文档，要知道，在这个符合摩尔定律的it行业，每隔18个月就会涌现出一些新的东西需要我们去学习，有些经久不用的东西总会忘记，之后还要再次记起，我包括我对下面的组员的要求从来都不是去死记硬背代码，去背方法，参数之类的，相反，我要求他们会查文档，尤其是查一手文档的能力，在这个知识不断涌现的行业，只有掌握了查api文档的机巧，这样才能将主要的精力放置于业务的处理以及代码的逻辑上来，而这才是我们应该发挥的地方，而绝不是去敲那些既耗时又费力的机械式的重复代码操作。

我过去的那些编程思想


联系
我们