创建一个js文件，名为testClosure.js：
这里不论写多少个function,a b c d ...外面都调用不到，包括这里面var定义的变量也都调用不到，那么你在里面尽情的写，就不用担心这些函数名变量名跟外界冲突；
只需要暴露一个outFunc这个函数供外界调用。这个函数呢没有用var定义，就变成一个全局变量，外界就可以调用的到，利用这一点，让这个函数变成匿名函数和外界沟通的桥梁。
再利用js面向对象的方法，就可以封装出非常好用的组件。
示例一：不需要继承的js组件
var checkBox=null;
var authTable = null;
var selfPicUrl=null;
var selfItem=null;
var isAuthItemEnabled=false;
var isSelfItemEnabled=false;
function getAuthShopCurrent()
{
return $("#"+globalSyncVars.serverComClientId.AuthShopListId).val();
}
function getSyncFieldCurrent()
{
return $("#"+globalSyncVars.serverComClientId.SyncFieldListId).val();
}
function setTitle()
{
$("#sync-table-title-id").html("从“"+getAuthShopCurrent()+"”同步");
}
function getNumIidFrom(numIidTo)
{
var curRowData = jQuery("#listItemDefine").jqGrid('getRowData',numIidTo);
return curRowData.NumIidFrom;
}
function insertRows()
{
deleteAll();
for(var i=0;i<arrAuthItem[getAuthShopCurrent()+getSyncFieldCurrent()+""].length;i++)
{
newTR=syncTableObj.insertRow(syncTableObj.rows.length);
// 0 checkbox
checkBox=newTR.insertCell(0);
// 1 auth table
authTable=newTR.insertCell(1);
// 2 self picurl
selfPicUrl=newTR.insertCell(2);
// 3 self item
selfItem=newTR.insertCell(3);
isSelfItemEnabled=setterSelfItem(i);
isAuthItemEnabled=setterAuthItem(i);
if(isAuthItemEnabled&&isSelfItemEnabled)
setterEnableStatus(true,i);
else
setterEnableStatus(false,i);
}
}
function setterAuthItem(i)
{
var isEnabled=false;
if (!stringToBoolean(arrAuthItem[getAuthShopCurrent()+getSyncFieldCurrent()+""][i]["HasSameItem"]))
{
authTable.innerHTML='<table class="inner-table-class inner-table-from-class"><tr><td class="inner-table-td-radio-class"></td><td class="inner-table-td-class main-img-class"></td><td class="inner-table-td-class" style="padding-top:21px;padding-bottom:21px;">此宝贝没有对应的授权宝贝</td><td class="inner-table-td-class sync-img-class"><span class="icon-no-class"/></td></tr></table>';
return isEnabled;
}
var arr = arrAuthItem[getAuthShopCurrent()+getSyncFieldCurrent()+""][i]["ListItemFrom"];
var strHead = '<table class="inner-table-class inner-table-from-class">';
var strTr = "";
var isBinded = false;
// 如果已经绑定了，标记一下，是否已经授权过也标记
var numIid = getNumIidFrom(arrAuthItem[getAuthShopCurrent()+getSyncFieldCurrent()+""][i]["NumIidTo"]);
if(numIid!="none")
{
for(var j=0;j<arr.length;j++)
{
if(arr[j]["NumIid"]==numIid)
{
isBinded=true;
break;
}
}
}
for(var p=0;p<arr.length;p++)
{
var isSharedFrom = stringToBoolean(arr[p]["IsFromItemHasShareFrom"]);
var isSharedTo = stringToBoolean(arr[p]["IsFromItemHasShareTo"]);
var picUrl='<a href="http://item.taobao.com/item.htm?id=' + arr[p][" rel="external nofollow" NumIid"] + '" target="_blank"><img class="icon" style="padding:0px;width:60px" src="' + arr[p]["PicUrl"] + '_sum.jpg" title="' + arr[p]["Title"] + '" />';
if(getEnabledStatus(isBinded,!isSharedTo,isSelfItemEnabled))
isEnabled = true;
strTr+='<tr><td class="inner-table-td-radio-class">'+getRadioCode(isBinded,isSelfItemEnabled,i,arr.length)+'</td><td class="inner-table-td-class main-img-class">'+picUrl+'</td><td class="inner-table-td-class">'+getAuthItemCode(arr[p],isSharedFrom,isSharedTo,i)+'</td><td class="inner-table-td-class sync-img-class">'+getEnabledCode(isBinded,arr[p],numIid)+'</td></tr>';
}
authTable.innerHTML = strHead+strTr+'</table>';
return isEnabled;
}
// 返回auth宝贝详情HTML代码
function getAuthItemCode(obj,i)
{
var labelStr = "";
if(isSharedFrom) labelStr = '<span style="color:red;">【源】';
if(isSharedTo) labelStr = '<span style="color:red;">【受】';
return '<span style="line-height:20px;" columnName="NumIid">'+labelStr+'ID：' + obj["NumIid"] + ''
- '<span style="padding-left:14px;" columnName="OuterId">商家编码：' + obj["OuterId"] + ''
- '<span style="padding-left:14px;color:'+getPriceColor(obj["Price"],i)+'" columnName="Price">价格：' + obj["Price"] + ''
- '
<span style="line-height:20px;" columnName="Title">' + obj["Title"] + '';
}
// 返回self宝贝详情HTML代码
function getSelfItemCode(obj)
{
var labelStr = "";
if(stringToBoolean(obj["IsToItemHasShareFrom"])) labelStr = '<span style="color:red;">【源】';
if(stringToBoolean(obj["IsToItemHasShareTo"])) labelStr = '<span style="color:red;">【受】';
return '<span class="sync-table-td-class"><span style="line-height:20px;" columnName="NumIid">'+labelStr+'ID：' + obj["NumIidTo"] + '' - '<span style="padding-left:14px;" columnName="OuterId">商家编码：' + obj["OuterIdTo"] + ''
- '<span style="padding-left:14px;color:black;" columnName="Price">价格：' + obj["PriceTo"] + ''
- '
<span class="sync-table-td-class" style="line-height:20px;" columnName="Title">' + obj["TitleTo"] + '';
}
// 返回绑定关系图标的HTML代码
function getEnabledCode(isBinded,isAuthEnabled,isSelfEnabled,obj,numIid)
{
if(isBinded)
{
// 如果是绑定状态，还要看当前item是否为绑定的item
// 在这种情况下，判断是否可绑定，不需要用到selfItem
if(obj["NumIid"]==numIid)
return '<span class="icon-bind-class"/>';
else
{
if(stringToBoolean(obj["IsFromItemHasShareTo"]))
return '<span class="icon-no-class"/>';
else
return '<span class="icon-ok-class"/>';
}
}else
{
if(isAuthEnabled&&isSelfEnabled)
return '<span class="icon-ok-class"/>';
else
return '<span class="icon-no-class"/>';
}
}
// 是否可以绑定
function getEnabledStatus(isBinded,isSelfEnabled)
{
if(isBinded) return false;
if(isAuthEnabled&&isSelfEnabled)
{
return true;
}
else
{
return false;
}
}
// 返回radio的HTML代码
/**
- isBinded 是否已经绑定
- isAuthEnabled auth是否可同步
- isSelfEnabled self是否可同步
- 当前rows的index
- 当前auth-list的长度（如果是一对一，当然不需要radio）
*/
function getRadioCode(isBinded,length)
{
if(isBinded) return "";
if(length==1) return "";
if(isAuthEnabled==false||isSelfEnabled==false) return "";
return '<input type="radio" name="radio'+i+'">';
}
function setterSelfItem(i)
{
var isEnabled=true;
var picUrl='<a href="http://item.taobao.com/item.htm?id=' + arrAuthItem[getAuthShopCurrent()+getSyncFieldCurrent()+" rel="external nofollow" "][i]["NumIidTo"] + '" target="_blank"><img class="icon" style="padding-left:11px;width:60px" src="' + arrAuthItem[getAuthShopCurrent()+getSyncFieldCurrent()+""][i]["PicUrlTo"] + '_sum.jpg" title="' + arrAuthItem[getAuthShopCurrent()+getSyncFieldCurrent()+""][i]["TitleTo"] + '" />';
selfPicUrl.innerHTML = picUrl;
selfItem.innerHTML = getSelfItemCode(arrAuthItem[getAuthShopCurrent()+getSyncFieldCurrent()+""][i]);
if(stringToBoolean(arrAuthItem[getAuthShopCurrent()+getSyncFieldCurrent()+""][i]["IsToItemHasShareFrom"])) isEnabled = false;
if(stringToBoolean(arrAuthItem[getAuthShopCurrent()+getSyncFieldCurrent()+""][i]["IsToItemHasShareTo"])) isEnabled = false;
return isEnabled;
}
function getPriceColor(price,i)
{
if(arrAuthItem[getAuthShopCurrent()+getSyncFieldCurrent()+""][i]["PriceTo"]==undefined) return "black";
if(price==undefined) return "black";
return (price==arrAuthItem[getAuthShopCurrent()+getSyncFieldCurrent()+""][i]["PriceTo"])?"black":"red";
}
function setterEnableStatus(isEnabled,i)
{
if(isEnabled)
checkBox.innerHTML='<input class="enableCheckBox" type="checkBox" checked="checked" index="'+i+'"/>';
else
checkBox.innerHTML='<input type="checkbox" disabled="true"/>';
}
function stringToBoolean(str)
{
if (str==undefined) return false;
switch(str.toLowerCase())
{
case "true": case "yes": case "1": return true;
case "false": case "no": case "0": case null: return false;
default: return Boolean(str);
}
}
function deleteAll()
{
for(var i=syncTableObj.rows.length-1;i>2;i--)
{
syncTableObj.deleteRow(i);
}
}
function selectAll(isSelect)
{
if(isSelect)
{
$(".enableCheckBox").prop("checked",true);
}else
{
$(".enableCheckBox").prop("checked",false);
}
}
function findObj(theObj,theDoc)
{
var p,foundObj;
if(!theDoc) theDoc = document;
if((p = theObj.indexOf("?")) > 0 && parent.frames.length)
{
theDoc = parent.frames[theObj.substring(p+1)].document;
theObj = theObj.substring(0,p);
}
if(!(foundObj = theDoc[theObj]) && theDoc.all)
foundObj = theDoc.all[theObj];
for (i=0; !foundObj && i < theDoc.forms.length; i++)
foundObj = theDoc.forms[i][theObj];
for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++)
foundObj = findObj(theObj,theDoc.layers[i].document);
if(!foundObj && document.getElementById)
foundObj = document.getElementById(theObj);
return foundObj;
}
function refrash()
{
deleteAll();
if(!isInited)
return;
setTitle();
//现在js还没有数据的，去取值
if(arrAuthItem[getAuthShopCurrent()+getSyncFieldCurrent()+""]==null)
{
var urledit="./x.aspx?method=GetAuthItem&rmd="+Math.random();
$.post(urledit,$("#"+globalSyncVars.serverComClientId.form1).serialize())
.done(function(myJsonResult) {
var data = $.evalJSON(myJsonResult);
ajaxResponseResult(data);
if (data.IsSuccess) {
arrAuthItem[getAuthShopCurrent()+getSyncFieldCurrent()+""]=data.rows;
insertRows();
$("#sync-table-id").css("display","inline-table");
}
})
.fail(function(data) {
ajaxResponseResult(data);
})
.always(function(myJsonResult) {
});
}else
{
insertRows();
}
}
function checkIsEnabledBind(i)
{
if(stringToBoolean(arrAuthItem[getAuthShopCurrent()+getSyncFieldCurrent()+""][i]["IsFromItemHasShareTo"])) return false;
if(stringToBoolean(arrAuthItem[getAuthShopCurrent()+getSyncFieldCurrent()+""][i]["IsToItemHasShareFrom"])) return false;
if(stringToBoolean(arrAuthItem[getAuthShopCurrent()+getSyncFieldCurrent()+""][i]["IsToItemHasShareTo"])) return false;
return true;
}
function setSyncValueToCom()
{
var numIidsSelf="";
var numIidsAuth="";
var isBind="";
var isRadioUnChecked = false;
$(".enableCheckBox:checked").each(function()
{
if(checkIsEnabledBind($(this).attr("index")))
{
var checkBoxIndex = $(this).attr("index");
var radioIndex = 0;
isRadioUnChecked = false;
// 通过[0]判断radio是否存在
if($('input:radio[name=radio'+checkBoxIndex+']')[0])
{
var isCheckedLabel = false;
// 检查每个radio选项是否被选择
$('input:radio[name=radio'+checkBoxIndex+']').each(function()
{
if($('input:radio[name=radio'+checkBoxIndex+']')[radioIndex].checked)
{
isCheckedLabel = true;
// 这里是跳出each循环（里层）
return false;
}
radioIndex++;
});
if(!isCheckedLabel)
isRadioUnChecked = true;
// 如果存在checkBox有选择，但是radio没选择，应该提醒
// 然后就退出了，没有后续的提交
if(isRadioUnChecked)
{
checkBoxIndex++;
alert("第"+checkBoxIndex+"个宝贝有多个对应的授权宝贝，应该仔细查看并选择合适的宝贝同步！");
// 这里跳出循环（外层）
return false;
}
}
var arrAuth = arrAuthItem[getAuthShopCurrent()+getSyncFieldCurrent()+""][check<a href="/tag/Box/" target="_blank" class="keywords">Box</a>Index]["ListItemFrom"]
if(numIidsSelf==""){
numIidsSelf+=arrAuthItem[getAuthShopCurrent()+getSyncFieldCurrent()+""][checkBoxIndex]["NumIidTo"];
}else
{
numIidsSelf+=","+arrAuthItem[getAuthShopCurrent()+getSyncFieldCurrent()+""][checkBoxIndex]["NumIidTo"];
}
if(numIidsAuth=="")
{
numIidsAuth+=arrAuth[radioIndex]["NumIid"];
}else
{
numIidsAuth+=","+arrAuth[radioIndex]["NumIid"];
}
}
});
isBind=$("#isBind:checked").val()=="on"?"true":"false";
$("#"+globalSyncVars.serverComClientId.HfNumIidsSelf).val(numIidsSelf);
$("#"+globalSyncVars.serverComClientId.HfNumIidsAuth).val(numIidsAuth);
$("#"+globalSyncVars.serverComClientId.HfIsBind).val(isBind);
if(isRa<a href="/tag/dio/" target="_blank" class="keywords">dio</a>UnChecked) return -1;
if(numIidsSelf=="") return 0;
else return 1;}
initTable=function()
{
refrash();
isInited=true;
}
onSelectAllCheckBox=function()
{
if($("#selectAllCheckBox:checked").val()=="on")
{
selectAll(true);
}else
{
selectAll(false);
}
}
onPreview=function()
{
refrash();
}
onAldsItemSync=function(sender,jqgridObjRefresh)
{
var callbackCode = setSyncValueToCom();
if(callbackCode == 0)
{
alert("没有可以同步设置的宝贝！");
return;
}else if(callbackCode == -1)
{
// 当存在没有选择的radio时
return;
}
var urledit="./x.aspx?method=SaveSyncItem&rmd="+Math.random();
$.post(urledit,$("#"+globalSyncVars.serverComClientId.form1).serialize())
.done(function(myJsonResult) {
var data = $.evalJSON(myJsonResult);
ajaxResponseResult(data);
if (data.IsSuccess)
{
showPrompt(data.PromptMsg);
if(sender)
{
$(sender).dialog("close");
$(sender).dialog("destroy");
}
if(jqgridObjRefresh)
{
$(jqgridObjRefresh).trigger("reloadGrid");
}
}
})
.fail(function(data) {
ajaxResponseResult(data);
})
.always(function(myJsonResult) {
});}
})();
示例二：有继承关系的js组件
// 完全克隆一个数组
BatchModify.prototype.cloneArr=function(arr)
{
var arrNew = [];
for(var i=0;i<arr.length;i++)
{
arrNew.push(arr[i]);
}
return arrNew;
}
// 通过jqGrid('getGridParam','selarrrow');取值是不可靠的，经常会变动
// 在设置jqGrid('setSelection',bindedArr[i]);之后取出来的值经常会变化，要么长度变化，要么顺序变化
BatchModify.prototype.cancelBindedItem=function()
{
var tempNumIids=jQuery("#listItemDefine").jqGrid('getGridParam','selarrrow');
var tempNumIidsClone = this.cloneArr(tempNumIids);
var isAlert=false;
for(var i=0;i<bindedArr.length;i++)
{
for(var j=0;j<tempNumIidsClone.length;j++)
{
if(tempNumIidsClone[j]==bindedArr[i])
{
isAlert=true;
jQuery("#listItemDefine").jqGrid('setSelection',bindedArr[i]);
break;
}
}
}
if(isAlert) alert("已经绑定了数据来源的宝贝不能修改宝贝设置，如果需要修改请先点击宝贝最右栏的解绑按钮解绑！");
}
BatchModify.prototype.setNumIids=function()
{
this.numIids=jQuery("#listItemDefine").jqGrid('getGridParam','selarrrow');
};
//拼装addi的json串并赋值给addi
BatchModify.prototype.setAddis=function()
{
var _addis="{rows:{";
for(var i=0;i<this.numIids.length;i++)
{
_addis+='"'+this.numIids[i]+'":"';
var tempVal=$("#addiTextId"+this.numIids[i]).val();
var val=tempVal.replace(/\"/ig,"\'");
_addis+=val;
_addis+='"'
if(i!=this.numIids.length-1)
{
_addis+=',';
}}
_addis+="}}";
this.addis=_addis;
};
//（单个）修改页面传进来的一个id
BatchModify.prototype.setOneIid=function()
{
this.oneIid=$("#"+itemEditVars.itemEditClientId.HfNumIid).val();
};
//sku的所有已选id（一个字符串）
BatchModify.prototype.setSkuIds=function()
{
this.skuIds=jQuery("#listSkuDefine").jqGrid('getGridParam','selarrrow');
};
//设置numIids的值到服务器组件
BatchModify.prototype.setNumIidsToCom=function()
{
$("#"+globalVars.serverComClientId.HfItemDefineIdsSelect).val(this.numIids);
};
//设置addis的值到服务器组件
BatchModify.prototype.setAddisToCom=function()
{
$("#"+globalVars.serverComClientId.HfAddiStr).val(this.addis);
};
//检查是否有勾选宝贝
BatchModify.prototype.checkIsSelected=function()
{
if (this.numIids == "") {
alert("请选中要批量修改的行！");
return false;
}
return true;
};
//批量生成描述
BatchModify.prototype.batchGenerateDesc=function(alertResult)
{
this.setNumIidsToCom();
var urledit = "x.aspx?method=BatchGenerateDesc&rdm=" + Math.random();
if (alertResult)
urledit += "&generateByManual=true";
this.postData(urledit,alertResult);};
//post数据
BatchModify.prototype.postData=function(urledit,alertResult)
{
$.post( urledit,$("#"+globalVars.serverComClientId.formAldsItemDefine1).serialize())
.done(function(myJsonResult) {
var data = $.evalJSON(myJsonResult);
ajaxResponseResult(data);
if (data.IsSuccess) {
if (!data.rows)
showPrompt("宝贝描述生成修改成功！");
}
if(alertResult && data.ErrMsg && $.trim(data.ErrMsg) != "")
alert("提醒：\n\n" + data.ErrMsg);
})
.fail(function(data) {
ajaxResponseResult(data);
})
.always(function(myJsonResult) {
});};
BatchModify.prototype.removeDialog=function()
{
try{ $("#descTempDiv").remove(); } catch(e){}
}
function myInherits(Child,Parent)
{
function F(){}
F.prototype=Parent.prototype;
Child.prototype=new F();
Child.prototype.constructor=Child;
}
function createobject(proto)
{
function F(){}
F.prototype=proto;
return new F();
}
//批量修改(附言，确认收货后发消息，好评后发消息)类____
function BatchMsgModify(title,tableId,paperId,fieldName,editUrl,containerDivStr)
{
BatchModify.call();
this.title=title;
this.tableId=tableId;
this.paperId=paperId;
this.fieldName=fieldName;
this.editUrl=editUrl;
this.containerDivStr=containerDivStr;
}
myInherits(BatchMsgModify,BatchModify);
//弹窗
BatchMsgModify.prototype.popUpDialog=function()
{
$(this.containerDivStr).dialog({
title: this.title,closeText: '关闭',width: 980,maxHeight: $(window).height() 0.98,minHeight: $(window).height() 0.7,modal: true,show: { effect: "fade",duration: 300 },hide: { effect: "fade",buttons: {
确定: function() {
currentInstance.confirmCallback(this);
},关闭: function() {
$(this).dialog("close");
}
}
});
};
//创建表格
BatchMsgModify.prototype.createTable=function()
{
$("#"+this.tableId).jqGrid({
viewrecords: true,// show the current page,data rang and total records on the toolbar
datatype: 'local',rowNum:100,rowList:[100],height: "auto",pager: "#"+this.paperId,colNames:['主图','宝贝','NumIid','Price','OuterId',this.title.indexOf("批量修改")>=0?this.title.substring(4):this.title],colModel:[
{name:'PicUrl',index: 'PicUrl',width: 60,align: "center",sortable: false,formatter: imgFormatter,unformat:imgUnFormat},{name:'Title',index:'OuterId',width:430,sortable: true,formatter: itemDescFormatter,unformat:itemDescUnFormat},{name:'NumIid',index:'NumIid',width:100,hidden:true,key:true},{name:'Price',index:'Price',hidden:true},{name: 'OuterId',index: 'OuterId',width: 100,hidden: true },{name: this.fieldName,index: this.fieldName,width: 440,hidden: false,formatter:this.formatter}
]
});
};
//把表格填充进数据
BatchMsgModify.prototype.initTable=function()
{
var gridArrayData=[];
for(var i=0;i<this.numIids.length;i++)
{
var curRowData=jQuery("#listItemDefine").jqGrid('getRowData',this.numIids[i]);
var obj=new Object();
obj["PicUrl"]=curRowData.PicUrl;
obj["Title"]=curRowData.Title;
obj["NumIid"]=curRowData.NumIid;
obj["Price"]=curRowData.Price;
obj["OuterId"]=curRowData.OuterId;
obj[this.fieldName]=curRowData[this.fieldName];
gridArrayData.push(obj);}
$("#"+this.tableId).jqGrid('setGridParam',{data:gridArrayData});
$("#"+this.tableId).trigger('reloadGrid');
};
//格式化字段
BatchMsgModify.prototype.formatter=function(cellvalue,options,rowdata)
{
return "";
};
//重写post函数
BatchMsgModify.prototype.postData=function(urledit,sender)
{
$.post( urledit,$("#"+globalVars.serverComClientId.formAldsItemDefine1).serialize())
.done(function(myJsonResult)
{
var data = $.evalJSON(myJsonResult);
ajaxResponseResult(data);
if (data.IsSuccess) {
if (!data.rows)
showPrompt(currentInstance.title+"成功"+currentInstance.numIids.length+"个！");
$("#listItemDefine").trigger('reloadGrid');
setTimeout(function () { $(sender).dialog("close"); },0);
setTimeout(function () { $(sender).dialog("destroy"); },1000);
}
if(data.ErrMsg && $.trim(data.ErrMsg) != "")
alert(currentInstance.title+"出错：\n\n" + data.ErrMsg);
})
.fail(function(data) {
ajaxResponseResult(data);
})
.always(function(myJsonResult) {
});
};
//确认按钮的回调函数
BatchMsgModify.prototype.confirmCallback=function(sender)
{
this.setAddis();
this.setNumIidsToCom();
this.setAddisToCom();
this.postData(this.editUrl+"&rdm=" + Math.random(),sender);
};
//实例
var batchAddi=null;
var batchMsgTradeSuccess=null;
var batchMsgRatedGood=null;
var currentInstance=null;//指向当前对象，当this指向失效的时候可以使用这个
openBatchMsgDialogType={batchAddi:0,batchMsgTradeSuccess:1,batchMsgRatedGood:2};
openBatchMsgDialog=function(typeCode)
{
if(typeCode==openBatchMsgDialogType.batchAddi)
{
if (batchAddi==null)
batchAddi=new BatchMsgModify("批量修改附言","tableEditContent","tablePaper","Additional","x.aspx?method=UpdateMsgAdditional","
