一年过去了，系统也开发了一年，这一年里，我从菜鸟一步一步的学习web前端知识，去了解，去深入，系统也从无到有的搭建了起来，从一开始的难看难用，到现在简洁美观，方便实用，也耗费了我不少心血，系统开发大致上完成了，只剩下些优化和局部调整，而我也想离开上海去深圳发展，多学习学习，规划好自己的路线，学习更多新的、实用的知识，更深入去掌握，所以写下总结，方便后来的人员理解和二次开发。因为项目是公司内部使用，不方便公开，所以现在我总结也不会涉及到项目，主要是对于开发过程中的一些知识点的讲解和一些系统的套用模板的介绍，方便后来的人。

一.弹框设计

为了方便开发弹框，减少代码重复量，本系统的弹框依赖于layui,每个页面只要有引入top.jsp页面（）即可，不需再重复引用。 根据系统的使用，目前有三种弹框，提交弹框和信息弹框和确认弹框。

提交弹框

需要有内容的隐藏域，比如项目界面的导入项目计划功能，需要有<div id=”importDiv” style=”display:none;”>内容</div>,然后点击导入，触发函数:

function show(obj) {		
		var jj = document.getElementById('hhh');//可不需
		jj.value = obj; //可不需
		layer.open({
				type : 1,
				title :'导入项目计划',
				skin : 'layui-layer-molv', //加上边框
				area :['400px','300px'], //宽高
				content : $("#importDiv"),
				btn : [ '确定', '取消' ],
				yes : function() {
				$('#uploader').submit();//适用于form表单action提交
				//ajax提交，需要写ajax处理函数即可
                 layer.closeAll();//关闭弹框
layer.msg('加载中', {icon: 16,shade:0.5,time:5000000});//加载动画
				},
				btn2:function(){layer.closeAll();
}
				});
	}
	

信息弹框

同样需要有需要显示信息的隐藏域<div id=”bes” style=”display:none;”>内容</div>，以实验室预约界面的显示已预约信息的弹框为例：

layer.open({
	      type: 1,
		  title:false,
		  shadeClose:true,//点击遮罩层就关闭
		  closeBtn: 0,
		  skin: 'layui-layer-rim', //加上边框
		  area: ['300px', 'auto'], //宽高
		  content:$("#bes")
	      });

确认弹框

即确认你是否操作的弹框，以项目删除为例:

layer.confirm('确定删除选中项目？', {
				icon : 3,
				title : '提示'
			}, function(index) {
				layer.close(index);
				//处理函数
			}, function(index) {
				layer.close(index);
			});

后面的弹框开发安全可以套用这三种方法，如果需要了解，可以直接访问layui的官网，查看使用手册

二.调用函数

我将通用的一些函数放在了ie.js文件里面，需要什么函数就去调用，不需要再本页面重新写。关于函数的用途我已经都注释出来了，可以直接看。同样，每个页面需要引入top.jsp页面（），需要用到时就直接调用。 页面里面也有很多对于页面的一些操作的函数，基本上都写了注释，如果有用到的地方可以依葫芦画瓢

三.重点js文件以及代码讲解

bootstrap-select这个js插件是用于select渲染的，根据定义 <select class=” form-control selectpicker” multiple data-live-search=”true” data-size=”15”></select> 依次设置渲染成bootstrapselect样式、可以搜索、显示出来的高度为15个option的高度。 记住，如果是动态添加的option数据，需要重新渲染，$(‘.selectpicker’).selectpicker(‘refresh’);，如果需要匹配数据，可以用 $(‘.selectpicker’).selectpicker(‘val’,arr);其中arr是你需要匹配到的数据组成的数组，详见policy.js文件240-252行代码

autosize.js这个是用于控制textarea随字符长度或输入的字符长度而变化高度的控件，详用于计划模板界面，计划编辑界面和周报界面，需要在控制元素之后之后引入代码（推荐在</body>之后）： 如果是字符是通过脚本输入的，那么可以写autosize.update(obj);//obj即为element对象

Echarts.js是用来控制输出数据统计图像的插件，是百度开发的，可以访问官网去看看具体用法，我在系统中主要用到的是柱状图和折线图，详情可参见实验室预约数据统计界面，然后导出图片到Excel文件中，因为echarts显示的图像实际是cavans构成，所以可以通过var picinfo1=myChart1.getDataURL();装成base64编码，传到后台处理，其中注意，myCharts必须是全局变量，详细使用可以看周报页面deday.jsp

scrollfix.js用于控制界面滑动的，用于周报界面和实验室预约界面，通过ID选择器控制滑动到哪里并保持该元素不变：

		$('#startTop td:eq('+i+')').css('width',wid);
		}
		$('#startTop td').css('height','40px');			
	})
</script>

四.使用jquery和JavaScript的套路和注意点

关于dom节点的操作

关于页面的一些数据或者参数的传递，用到了dom节点的知识，也就是父节点，子节点和相同向前或向后遍历的节点，使用界面获取参数比在函数里面直接写参数传递要更为正确些，比如之前点击项目计划进入的不是对应项目或者编辑计划，计划显示在别的项目中，都是因为项目id传错或数据混淆的原因。 但是在使用dom获取数据时要注意，有些点击响应函数的地方是和另外一处响应的相同的函数，那么需要保持这两个元素的结构是一样的，比如Myproject界面的查看计划的计划名称的点击处和操作栏的查看计划的点击处。 接下来介绍一些dom节点的知识和应用函数，关于节点之间的关系，可以参照w3cschool的教程： //obj为对象元素

1. 寻找父节点：obj.parentNode；
2. 寻找子节点：$(obj).children();
3. 寻找所有的祖先节点：$(obj).parents()
4. 寻找上一个的兄弟节点：$(obj).prev()
5. 寻找之前的所有的兄弟节点：$(obj).prevAll()//结果是数组
6. 寻找下一个兄弟节点:$(obj).next()
7. 寻找后面的所有的兄弟节点:$(obj).nextAll()//结果是数组
8. 查找兄弟节点，不分前后:$(obj).siblings()//结果是数组
9. 查找某个指定的元素：$(obj).find(‘label.sumtag’)//查找该节点的子节点中为label样式且class=’sumtag’的节点 我在计划策略和计划编辑界面选择测试模块，筛选方法是单一选择的操作中用到了5和7方法，详情可见policy.js文件第443—464行代码。 在系统中我使用最多的是1，寻找父节点，但是请注意，如果你改动了某个元素的构造，增加或删除了元素，那么请相对应的改变和这个元素点可能相关联的函数的关于节点的操作。如果不清楚元素构造，可以使用360浏览器，在需要查询的元素上右击，点击审查元素。或者别的浏览器，按F12，打开控制台，在Elements功能处，展示所有代码，鼠标hover在代码上，浏览器会相应的以蓝色遮罩层显示代码对应控制的地方

关于元素属性的操作

直接操作元素的属性来达到控制元素的样式或动作是一个非常有效的办法，下面来介绍一些在系统中用到的属性操作： 2.1控制对象的css样式：$(obj).css(‘color’,’red’);//控制对象的字体颜色为红色，还有其他的一些操作比如隐藏啥的就不一一列举了。 2.2 从所有匹配的元素中移除指定的属性：$(obj).removeAttr(‘onclick’);//移除元素的onclick方法，起效后，点击元素无效果，同理$(obj).removeAttr(‘href’);也是一样的 2.3 添加class属性:$(obj).addClass(‘name’)，移除class属性$(obj).removeClass(‘name’)。可以通过这个来根据值控制元素样式或动画，如resource.jsp里面关于控制tab页的显示的代码，第461—476行代码 var tags=$(‘#showtab’).text(); if(tags.indexOf(‘tab1’)!=-1){ $(‘#tab2’).removeClass(‘layui-show’); $(‘#tabs2’).removeClass(‘layui-this’); $(‘#tab1’).addClass(‘layui-show’); $(‘#tabs1’).addClass(‘layui-this’); } else{ $(‘#tab1’).removeClass(‘layui-show’); $(‘#tabs1’).removeClass(‘layui-this’); $(‘#tab2’).addClass(‘layui-show’); $(‘#tabs2’).addClass(‘layui-this’); }

2.4 设置元素属性值：$(obj). attr(‘disabled’,’disabled’);可以直接控制元素的一些属性，如只可读，选中等等。 2.5 元素是否包含class :$(obj).hasClass(“name”); 2.6 从匹配的元素中添加或删除一个类：$(obj).toggleClass(“main”);//有则删，无则加，也可以$(obj).toggleClass(“main”，switch);//switch等于true增加 ，false删除，当然也可以把main替换成函数，只要返回对象是class名。 2.7 赋值:$(obj).val(num) $(obj).text(num) 2.8 获取对象ID名或class名：$(obj).attr(‘id’) $(obj).attr(‘class’) 具体使用在实验室预约界面的第889行代码

关于操作根据状态能否操作的控制

因为系统是以项目和计划为基点来进行的，项目是一个进程，是有不同的状态的，所以为了避免误操作，我们需要根据对象状态来控制操作权限。 举个例子，在项目管理界面Myproject.jsp，操作种类有很多，而项目的状态分为新建立，进行中（显示进行的项目版本）和已结束三种（当然后期如果有项目复盘那是另外的需求，现在不做处理） *但是有一点需要注意，因为个人权限的不同，对项目的操作权限也不一样，所以进来时，你看到的操作栏可能就少于6个，之前的编写中，他们是根据权限来来操作有无元素的，这样不利于上述的根据状态来操作，所以建议修改后是决定是否隐藏，部分代码如下，其他的权限控制且有状态的地方也可以这么写：

<span style=”display:none;”><a onclick=”updateRow(this,’<s:propertyvalue=”projectGroup”/>’);”>${pf.edit } </a>|</span> <span style=”display:none;”>${pf.showplan } |</span> 当然也可以全部显示，然后根据传入的权限的tag值来控制，具体使用见office.jsp页面

五.关于css的操作和页面图像动画效果

页面美化主要是由css来设计实现的，css基础可以在w3cschool教程上面看到，为了更加美观，建议使用css3，不过由于设计到版本兼容性的问题，有些样式属性是不能使用的，不过在系统本身有bootstrap和layui的前提下，需要补充美化的地方比较少，下面主要说几个需要注意的点：

1. 一个页面中id是唯一标识的，不要定义多个id，特别是在js代码中需要循坏输出的地方定义id，这样页面中会有很多id，如果不用根据id操作还好，要是需要操作就会很麻烦，一般就是效果无效。
2. Class可以定义多个，进行统一控制，方便管理，但是需要注意不要重名了，特别是一些常规的，建议可以在定义class时写成xx-xxx ,xx可以是一个固定的字符，比如我们这个页面是task页面，那么就定义成task-name。
3. Css动画，本系统需要用到的地方比较少，我有个现成的关于无数据情况下的提示动画animation。 4.我在top.jsp页面定义了一些效果代码，记住，定义新的css和class name 之前，先查看下top.jsp，以免重复，不过你也可以覆盖他。 其他的一些动画比如淡入淡出和隐藏的可以学习jquery的animation函数，寻找动画方法可以参见这两个网址：http://www.htmleaf.com/ http://www.jq22.com/ 也可以在网站https://cssreference.io/查询css方法。 当然，为了管理css代码方便，建议学习下scss，以及前端的打包工具webpack。