我们一般写js或者jquery的时候 一般都是随性的 用click 用var申请全局变量 或者局部变量
这个是我在工作中像我的一个js很牛逼的一个同事学习到的 在此共享出来 多总结 主要的话 多看我红色注释部分
//这个是我的一个遮罩层方法 方法定义在我之前博客里面
var mask=new WindowMask();
//将所有的变量定义在一个函数里面 或者是一个对象里面 那么每次改动的话 只要改这个地方 每次获取也就获取这个地方 这个就是我们代码里面的封装 面向对象编程 这样代码易于维护
//最终返回所以的变量的一个数组
function GetParm(obj){
//获取操作下拉框
var sel=$(obj);
//获取当前td的前一个td
var prevtd=sel.parent().prev();
//获取当前td的下一个td
var nexttd=sel.parent().next();
//获取源环境ID
var hidSrcSerialID=prevtd.children(":first").val();
//源环境编号+名称
var SrcNo_Name=encodeURI($.trim(prevtd.text()).replace(" ","&"));
//目标环境ID
var hidAimSerialID=prevtd.children(":eq(1)").val();
//目标环境select
var enviSelect=nexttd.children(".SelectSrc");
//目标环境显示内容
var enviShowName=nexttd.children(".ShowName_No");
//操作的值
var selectAction=sel.val();
return {
SrcSerialID: hidSrcSerialID,
SrcNo_Name:SrcNo_Name,
AimSerialID:hidAimSerialID,
EnviSelect:enviSelect.is(":visible"),
EnviSelectValue:enviSelect.val(),
ActionWay:selectAction
};
}
//还有一种方法就是定义一个全局的对象来存储所有的变量已经相应的方法
var ListVar={
isFullScreen:false, //窗体是否是全屏
status:[
{text:'失败',val:0},
{text:'不适用',val:1},
{text:'待执行',val:2},
{text:'执行中',val:3},
{text:'成功',val:4},
{text:'阻塞',val:5}
],
optionText:"<option value =\"0\">失败</option><option value =\"1\">不适用</option><option value =\"2\">待执行</option><option value =\"3\">执行中</option><option value =\"4\">成功</option><option value =\"5\">阻塞</option>",
Operate:{
checkRow:"checkRow",
status:"status",
desc:"desc",
ecNumber:"ecNumber",
caseNo:"caseNo",
doTime:"doTime",
annex:"znnex",
newEc:"newEc",
relationEC:"relationEC",
cancelEc:"cancelEc",
step:"step",
reportLink:"reportLink"
},
getOptionText:function(value){
var options=[];
for(var i=0,item;i<this.status.length;i++)
{
item=this.status[i];
options.push("<option value =\""+item.val+"\" ");
if(value==item.text)
options.push("selected=\"selected\"");
options.push(">"+item.text+"</option>");
}
return options.join('');
}
}
//还有一种方法是定义一个全局变量 存储所有的变量 但是 却加一个初始化方法 在需要的时候 初始化就行
//dom加载完毕后 调用相应的初始话方法
$(function(){
MenuBar.init();
CaseDoList.init();
GTGrid.init();
});
var MenuBar={
init:function(){
//调用筛选状态的初始化方法
this.screenStatus.init();
$("#showCheckMenu").click(MenuBar.checkCondition);
this.modifyStatus.init();
....
},
checkCondition:function(){//弹出框过滤条件
.......
},
setFilterText:function(){
...
},
screenStatus:{//筛选状态
init:function(){
//自定义初始化方法
....
},
show:function(){
//自定义方法
........
},
hide:function(){
//自定义方法
........
},
chang:function(){
//自定义方法
........
}
},
} //MenuBar
//调用第一种方法
$(".Change").change(function(){
//调用方法获取所有的变量
var paramJson=GetParm(this);
var nexttd=$(this).parent().next();
var enviShowName=nexttd.children(".ShowName_No");
var enviSelect=nexttd.children(".SelectSrc");
switch($(this).val()){
//选择了 复制
case "0":
//上面定义的遮罩层
mask.show("数据处理中");
enviSelect.hide();
enviShowName.show();
$.post("FrmTestCaseCopyEnviroment.aspx", { SrcNo_Name: paramJson.SrcNo_Name, isAjaxRequest: "1"},
function(data) {
enviShowName.html(data.replace("&"," "));
//上面定义的遮罩层
mask.hide();
});
break;
//选择了不 复制
case "1":
enviSelect.hide();
enviShowName.hide();
break;
//选择了对应
case "2":
enviShowName.hide();
enviSelect.show();
//如果目标环境id不存在 则追加一条 请选择
if(paramJson.AimSerialID=="-1"||paramJson.AimSerialID==undefined)
{
mask.show("数据处理中");
enviSelect.html('');
enviSelect.append("<option value='-1' selected='selected'>请选择</option>");
//从后台加载select
$.post("FrmTestCaseCopyEnviroment.aspx", { isAjaxRequest: "2"},
function(data) {
var jsonObj = $.parseJSON(data);
for (i=0;i<jsonObj.length;i++) {
enviSelect.append("<option value=\"" + jsonObj[i].value + "\" >" + jsonObj[i].text + "</option>") ;
}
mask.hide();
});
}
else{
enviSelect.val(paramJson.AimSerialID);
}
break;
}
})