利用js的闭包原理做对象封装及调用方法

创建一个js文件，名为testClosure.js：

(function () {
  function a()
  {
    alert('i am a');
  }
  outFunc = function () {
    a();
  }
})();

这里不论写多少个function,a b c d ...外面都调用不到，包括这里面var定义的变量也都调用不到，那么你在里面尽情的写，就不用担心这些函数名变量名跟外界冲突；

只需要暴露一个outFunc这个函数供外界调用。这个函数呢没有用var定义，就变成一个全局变量，外界就可以调用的到，利用这一点，让这个函数变成匿名函数和外界沟通的桥梁。

再利用js面向对象的方法，就可以封装出非常好用的组件。

示例一：不需要继承的js组件

(function()
{
  var arrAuthItem = new Array();
  var isInited = false;
  var syncTableObj=findObj("sync-table-id",document);

  var newTR=null;
 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"] + '" /></a>';
  if(getEnabledStatus(isBinded,!isSharedTo,isSelfItemEnabled))
  isEnabled = true;
  strTr+='<tr><td class="inner-table-td-radio-class">'+getRadioCode(isBinded,!isSharedTo,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,!isSharedTo,isSelfItemEnabled,arr[p],numIid)+'</td></tr>';
 }
 authTable.innerHTML = strHead+strTr+'</table>';
 return isEnabled;
  }
  // 返回auth宝贝详情html代码
  function getAuthItemCode(obj,isSharedFrom,isSharedTo,i)
  {
   var labelStr = "";
   if(isSharedFrom) labelStr = '<span style="color:red;">【源】</span>';
   if(isSharedTo) labelStr = '<span style="color:red;">【受】</span>';
   return '<span style="line-height:20px;" columnName="NumIid">'+labelStr+'ID：' + obj["NumIid"] + '</span>'
       + '<span style="padding-left:14px;" columnName="OuterId">商家编码：' + obj["OuterId"] + '</span>'
       + '<span style="padding-left:14px;color:'+getPriceColor(obj["Price"],i)+'" columnName="Price">价格：' + obj["Price"] + '</span>'
       + '<br><span style="line-height:20px;" columnName="Title">' + obj["Title"] + '</span>';
  }
  // 返回self宝贝详情html代码
  function getSelfItemCode(obj)
  {
   var labelStr = "";
   if(stringToBoolean(obj["IsToItemHasShareFrom"])) labelStr = '<span style="color:red;">【源】</span>';
   if(stringToBoolean(obj["IsToItemHasShareTo"])) labelStr = '<span style="color:red;">【受】</span>';
   return '<span class="sync-table-td-class"><span style="line-height:20px;" columnName="NumIid">'+labelStr+'ID：' + obj["NumIidTo"] + '</span>'
       + '<span style="padding-left:14px;" columnName="OuterId">商家编码：' + obj["OuterIdTo"] + '</span>'
       + '<span style="padding-left:14px;color:black;" columnName="Price">价格：' + obj["PriceTo"] + '</span></span>'
       + '<br><span class="sync-table-td-class" style="line-height:20px;" columnName="Title">' + obj["TitleTo"] + '</span>';
  }
  // 返回绑定关系图标的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,isAuthEnabled,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,isAuthEnabled,isSelfEnabled,i,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"] + '" /></a>';

   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, i, 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()+""][checkBoxIndex]["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(isRadioUnChecked) 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组件

(function(){
 //____________________________批量修改的基类_________________________________
 function BatchModify(){}
 //选择了什么id
 BatchModify.prototype.numIids=null;
 BatchModify.prototype.addis=null;
 BatchModify.prototype.oneIid=null;
 BatchModify.prototype.skuIds=null;
 BatchModify.prototype.selectedItemData=null;
 BatchModify.prototype.maxHeightVal=$(window).height()*0.9;

 // 完全克隆一个数组
 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", duration: 300 },
     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', width:100, hidden:true},
       {name: 'OuterId', index: 'OuterId', width: 100, hidden: true },
       {name: this.fieldName, index: this.fieldName, width: 440, sortable: true, 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 "<TextArea id='addiTextId"+rowdata.NumIid+"' style='width:98%;' rows='4'>"+rowdata[currentInstance.fieldName]+"</TextArea>";
 };
 //重写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","<div id='editBatchDiv'><table id='tableEditContent'></table><div id='tablePaper'></div></div>");
  currentInstance=batchAddi;
  batchAddi.cancelBindedItem();
  batchAddi.setNumIids();
  if(!batchAddi.checkIsSelected())
  return;
      batchAddi.popUpDialog();
      batchAddi.createTable();
      batchAddi.initTable();
 }else if (typeCode==openBatchMsgDialogType.batchMsgTradeSuccess)
 {
  if (batchMsgTradeSuccess==null)
  batchMsgTradeSuccess=new BatchMsgModify("批量修改确认收货后发消息","tableEditMsgTradeSuccessContent","tableMsgTradeSuccessPaper","MsgTradeSuccess","x.aspx?method=UpdateMsgTradeSuccess","<div id='editBatchDiv'><table id='tableEditMsgTradeSuccessContent'></table><div id='tableMsgTradeSuccessPaper'></div></div>");
  currentInstance=batchMsgTradeSuccess;
  batchMsgTradeSuccess.cancelBindedItem();
  batchMsgTradeSuccess.setNumIids();
  if(!batchMsgTradeSuccess.checkIsSelected())
  return;
      batchMsgTradeSuccess.popUpDialog();
      batchMsgTradeSuccess.createTable();
      batchMsgTradeSuccess.initTable();
 }else if (typeCode==openBatchMsgDialogType.batchMsgRatedGood)
 {
  if (batchMsgRatedGood==null)
  batchMsgRatedGood=new BatchMsgModify("批量修改好评后发消息","tableEditMsgRatedGoodContent","tableMsgRatedGoodPaper","MsgRatedGood","x.aspx?method=UpdateMsgRatedGood","<div id='editBatchDiv'><table id='tableEditMsgRatedGoodContent'></table><div id='tableMsgRatedGoodPaper'></div></div>");
  currentInstance=batchMsgRatedGood;
  batchMsgRatedGood.cancelBindedItem();
  batchMsgRatedGood.setNumIids();
  if(!batchMsgRatedGood.checkIsSelected())
  return;
      batchMsgRatedGood.popUpDialog();
      batchMsgRatedGood.createTable();
      batchMsgRatedGood.initTable();
 }
 }
 //_______________________________批量修改宝贝类（弹出单独页面，只要弹窗即可）_________________________________
 function BatchItemModify(){}

 myInherits(BatchItemModify,BatchModify);
 //重写
 BatchItemModify.prototype.popUpDialog=function()
 {
 var urledit = "./x.aspx?NumIids="+this.numIids+"&rdm="+Math.random();
    $.get(urledit, {}, function (data, textStatus, object) {
      var str = "<div id='editBatchDiv'>" + object.responseText + "</div>";
      $(str).dialog({
        dialogClass: "untitle",
        closeText: '关闭',
        width: 800,
        height: 400,
        maxHeight: $(window).height() * 0.9,
        modal: true,
        show: { effect: "fade", duration: 300 },
        hide: { effect: "fade", duration: 300 },
        buttons: {
          确定: function() {
            submitAldsItemEditBatch(this, $("#listItemDefine")); //在x.aspx定义
            currentInstance.batchGenerateDesc();
          },
          关闭: function() {
            $( this ).dialog( "close" );
          }
        }
      });
    });
 }

 //实例
 var batchItem=null;
 openBatchItemDialog=function()
 {
 if (batchItem==null)
  batchItem=new BatchItemModify();
 currentInstance=batchItem;
 batchItem.cancelBindedItem();
 batchItem.setNumIids();
 if(!batchItem.checkIsSelected())
  return;
 batchItem.popUpDialog();
 }
 //_______________________________批量生成宝贝描述__________________________________________
 function BatchDescModify(){}

 myInherits(BatchDescModify,BatchModify);

 BatchDescModify.prototype.generating=function()
 {
 if (!confirm("提醒。\n\n是否继续？"))
      return;
    this.batchGenerateDesc(true);
 };

 //实例
 var batchDesc=null;
 onBatchDesc=function()
 {
 if(batchDesc==null)
  batchDesc=new BatchDescModify();
 currentInstance=batchDesc;
 batchDesc.setNumIids();
 if(!batchDesc.checkIsSelected())
  return;
 batchDesc.generating();
 }
 //_____________________________________修改模板______________________________________________
 onDescMouldDialog=function()
 {
 var urledit = "./x.aspx?rdm="+Math.random();
    $.get(urledit,{},function(data,textStatus,object){
      var str="<div id='descTempDiv'>"+object.responseText+"</div>";
      $(str).dialog({
        title:'修改描述模板',
        closeText:'关闭',
        width:850,
        maxHeight:$(window).height() * 0.98,
        modal:true,
        show:{effect:"fade",duration:300},
        hide:{effect:"fade",duration:300},
        buttons:{
          确定:function()
          {
            onTempParaChangeHandler(this);
          },
          关闭:function()
          {
            $(this).dialog("close");
          }
        }
      });

    });
 }
 //___________________________________批量修改sku_______________________________________
 function BatchSkuModify(){}

 myInherits(BatchSkuModify,BatchModify);

 BatchSkuModify.prototype.popUpDialog=function()
 {
 var urledit = "./x.aspx?NumIids="+this.oneIid+"&SkuIds="+this.skuIds+"&IsSkuEditBatch=true&rdm="+Math.random();
    $.get(urledit, {}, function (data, textStatus, object) {
      var str = "<div id='descTempDiv'>" + object.responseText + "</div>";
      $(str).dialog({
        dialogClass: "untitle",
        closeText: '关闭',
        width: 800,
        height: 400,
        maxHeight: $(window).height() * 0.9,
        modal: true,
        show: { effect: "fade", duration: 300 },
        hide: { effect: "fade", duration: 300 },
        buttons: {
          确定: function() {
            submitAldsItemEditBatch(this, $("#listSkuDefine")); //在x.aspx定义
          },
          关闭: function() {
            $( this ).dialog( "close" );
          }
        }
      });
    });
 };

 BatchSkuModify.prototype.checkIsSelected=function()
 {
   if (this.skuIds == "") {
     alert("请选中要批量修改的SKU！");
     return false;
   }
   return true;
 };
 //实例
 var batchSku=null;

 openBatchSkuDialog=function()
 {
 if(batchSku==null)
  batchSku=new BatchSkuModify();
 currentInstance=batchSku;
 batchSku.setOneIid();
 batchSku.setSkuIds();
 batchSku.removeDialog();
 if(!batchSku.checkIsSelected())
  return;
 batchSku.popUpDialog();
 }
 //_______________________________批量修改SKU附言__________________________________________________

 function BatchSkuMsgModify(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(BatchSkuMsgModify,BatchModify);

 BatchSkuMsgModify.prototype.popUpDialog=function()
 {
 $(this.containerDivStr).dialog({
  title: this.title,
     closeText: '关闭',
     width: 980,
     maxHeight: this.maxHeightVal,
     // height: this.maxHeightVal>750 ? 750 : this.maxHeightVal,
     modal: true,
     show: { effect: "fade", duration: 300 },
     hide: { effect: "fade", duration: 300 },
     buttons: {
       确定: function() {
         currentInstance.confirmCallback(this);
       },
       关闭: function() {
         $(this).dialog("close");
       }
     }
 });
 };
 //重写-创建表格
 BatchSkuMsgModify.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:['SkuId','属性名',this.title.indexOf("批量修改")>=0?this.title.substring(4):this.title],
     colModel:[
     {name:'SkuId',index:'SkuId', width:400, hidden:true, key:true},
     {name:'PropertiesName',index:'PropertiesName', width:400,sortable:false, editable: false, hiden:false},
     {name: this.fieldName, index: this.fieldName, width: 440, sortable: true, hidden: false, formatter:this.formatter}
     ]
   });
 };
 //把表格填充进数据
 BatchSkuMsgModify.prototype.initTable=function()
 {
 var gridArrayData=[];
   for(var i=0;i<this.skuIds.length;i++)
   {
     var curRowData=jQuery("#listSkuDefine").jqGrid('getRowData',this.skuIds[i]);

     var obj=new Object();
     obj["SkuId"]=curRowData.SkuId;
     obj["PropertiesName"]=curRowData.PropertiesName;
     obj[this.fieldName]=curRowData[this.fieldName];
     gridArrayData.push(obj);
   }

   $("#"+this.tableId).jqGrid('setGridParam',{data:gridArrayData});
   $("#"+this.tableId).trigger('reloadGrid');
 };
 //重写-格式化字段
 BatchSkuMsgModify.prototype.formatter=function(cellvalue,options,rowdata)
 {
 return "<TextArea id='addiTextId"+rowdata.SkuId+"' style='width:98%;' rows='4'>"+rowdata[currentInstance.fieldName]+"</TextArea>";
 };
 //重写post函数
 BatchSkuMsgModify.prototype.postData=function(urledit,sender)
 {
 $.post( urledit, $("#"+itemEditVars.itemEditClientId.formAldsItemEdit1).serialize())
   .done(function(myJsonResult)
   {
     var data = $.evalJSON(myJsonResult);
     ajaxResponseResult(data);
     if (data.IsSuccess) {
       if (!data.rows)
         showPrompt(currentInstance.title+"成功"+currentInstance.skuIds.length+"个！");
       $("#listSkuDefine").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) {
   });
 };
 //重写-拼装json
 BatchSkuMsgModify.prototype.setAddis=function()
 {
 var _addis="{rows:{";

   for(var i=0;i<this.skuIds.length;i++)
   {
     _addis+='"'+this.skuIds[i]+'":"';
     var tempVal=$("#addiTextId"+this.skuIds[i]).val();
     var val=tempVal.replace(/\"/ig,"\'");
     _addis+=val;
     _addis+='"'

     if(i!=this.skuIds.length-1)
     {
       _addis+=',';
     }
   }
   _addis+="}}";
   this.addis=_addis;
 };
 //重写-设置numIids到组件
 BatchSkuMsgModify.prototype.setNumIidsToCom=function()
 {
 $("#"+itemEditVars.itemEditClientId.HfNumIid).val(this.oneIid);
 };

 //新增-设置skuids到组件
 BatchSkuMsgModify.prototype.setSkuIdsToCom=function()
 {
 $("#"+itemEditVars.itemEditClientId.HfSkuIds).val(this.skuIds);
 };
 //重写
 BatchSkuMsgModify.prototype.setAddisToCom=function()
 {
 $("#"+itemEditVars.itemEditClientId.HfSkuAddiStr).val(this.addis);
 };

 //确认按钮的回调函数
 BatchSkuMsgModify.prototype.confirmCallback=function(sender)
 {
   this.setAddis();
   this.setNumIidsToCom();
   this.setSkuIdsToCom();
   this.setAddisToCom();
   currentInstance.postData(this.editUrl+"&rdm=" + Math.random(),sender);
 };
 //
 BatchSkuMsgModify.prototype.checkIsSelected=function()
 {
   if (this.skuIds == "") {
     alert("请选中要批量修改附言的SKU！");
     return false;
   }
   return true;
 };

 //实例
 var batchSkuAddi=null;
 openBatchSkuMsgDialogType={batchSkuAddi:0};
 openBatchSkuMsgDialog=function(typeCode)
 {
 if (typeCode==openBatchSkuMsgDialogType.batchSkuAddi)
 {
  if (batchSkuAddi==null)
  batchSkuAddi=new BatchSkuMsgModify("批量修改SKU附言","tableEditContent","tablePaper","Additional","x.aspx?method=UpdateMsgAdditional","<div id='descTempDiv'><table id='tableEditContent'></table><div id='tablePaper'></div></div>");
  currentInstance=batchSkuAddi;
  batchSkuAddi.removeDialog();
  batchSkuAddi.setOneIid();
  batchSkuAddi.setSkuIds();
  if(!batchSkuAddi.checkIsSelected())
  return;
      batchSkuAddi.popUpDialog();
      batchSkuAddi.createTable();
      batchSkuAddi.initTable();
 }
 }
 //_______________________________生成描述_________________________________________________
 var descBatchModify=null;

 batchGenerateDesc=function(descNumIds,alertResult)
 {
 if(descBatchModify==null)
  descBatchModify=new BatchModify();
 descBatchModify.numIids=descNumIds;
 descBatchModify.setNumIidsToCom();
 descBatchModify.batchGenerateDesc(alertResult);
 }

 //_______________________________同步类（弹出单独页面，只要弹窗即可）_________________________________
 function SyncModify(){}

 myInherits(SyncModify,BatchModify);
 //重写
 SyncModify.prototype.popUpDialog=function()
 {
 var urledit="./x.aspx?rdm="+Math.random();

 $.post(urledit,{numIids:this.numIids.toString()},function(data,textStatus,object){
  var str = "<div id='descTempDiv'>" + object.responseText + "</div>";
      $(str).dialog({
       title:"同步设置",
        closeText: '关闭',
        width: 1150,
        height: 800,
        maxHeight: $(window).height() * 0.9,
        modal: true,
        show: { effect: "fade", duration: 300 },
        hide: { effect: "fade", duration: 300 },
        buttons: {
          同步: function() {
            onAldsItemSync(this, $("#listItemDefine")); //在x.aspx定义
          },
          取消: function() {
            $( this ).dialog( "close" );
          }
        }
      });
 });
 }

 var syncModify=null;
 openSyncDialog=function()
 {
 if(syncModify==null)
  syncModify=new SyncModify();
 currentInstance=syncModify;
 syncModify.setNumIids();
 if(!syncModify.checkIsSelected())
  return;
 syncModify.removeDialog();
 syncModify.popUpDialog();
 }
 //____________________________同步SKU设置（弹出单独页面，只需弹窗）___________________________________
 function SyncSkuModify(){}
 myInherits(SyncSkuModify,BatchModify);

 SyncSkuModify.prototype.popUpDialog=function()
 {
 var urledit="./x.aspx?rdm="+Math.random();

 $.post(urledit,{numIid:currentInstance.oneIid.toString(),skuIds:currentInstance.skuIds.toString()},function(data,textStatus,object){
  var str = "<div id='descTempDiv'>" + object.responseText + "</div>";
      $(str).dialog({
       title:"同步SKU设置",
        closeText: '关闭',
        width: 1150,
        height: 800,
        maxHeight: $(window).height() * 0.9,
        modal: true,
        show: { effect: "fade", duration: 300 },
        hide: { effect: "fade", duration: 300 },
        buttons: {
          同步: function() {
            onAldsSkuSync(this, $("#listSkuDefine")); //在x.aspx定义
          },
          取消: function() {
            $( this ).dialog( "close" );
          }
        }
      });
 });
 }

 SyncSkuModify.prototype.checkIsSelected=function()
 {
   if (this.skuIds == "") {
     alert("请选中要同步设置的SKU！");
     return false;
   }
   return true;
 };

 var syncSkuModify=null;
 openSkuSyncDialog=function()
 {
 if($("#"+itemEditVars.itemEditClientId.HfNumIidFrom).val()=="none")
 {
  alert("没有找到已经绑定的宝贝！要同步SKU设置，需要先绑定对应的宝贝，才能同步宝贝下面的SKU！");
  return;
 }
 if(syncSkuModify==null)
  syncSkuModify=new SyncSkuModify();
 currentInstance=syncSkuModify;
 syncSkuModify.setOneIid();
 syncSkuModify.setSkuIds();
 if (!syncSkuModify.checkIsSelected())
  return;
 syncSkuModify.removeDialog();
 syncSkuModify.popUpDialog();
 }
 //__________________________item批量（及单独）解除绑定_________________________________
 function BatchDisBindingItem(){}
 myInherits(BatchDisBindingItem,BatchModify);

 // 对非绑定item取消勾选，是为了下一步批量解除绑定
 BatchDisBindingItem.prototype.cancelFreeItem=function()
 {
 var isAlert = false;
 var isBinded = false;
 var tempNumIids = jQuery("#listItemDefine").jqGrid('getGridParam', 'selarrrow');
 var tempNumIidsClone = this.cloneArr(tempNumIids);
 for (var i = 0; i < tempNumIidsClone.length; i++) {
   var numIidTmp = tempNumIidsClone[i];
   var curRowData = jQuery("#listItemDefine").jqGrid('getRowData', numIidTmp);
   if (curRowData.NumIidFrom == "none") {
     isAlert = true;
     jQuery("#listItemDefine").jqGrid('setSelection', numIidTmp);
   }
 }
 if (isAlert)
 {
   alert("未绑定的宝贝不能作解绑的动作！");
   // return true 表示已经alert了
   return true;
 }
 return false;
 }
 BatchDisBindingItem.prototype.popUpDialog=function()
 {
 var showStr='<div id="descTempDiv"><span style="color:red;">注意：您正在批量解除绑定，如果您解除了绑定，今后数据源宝贝设置有更新您的宝贝设置将不会同步更新！</span></div>';

    $(showStr).dialog({
      title: "解除绑定",
      closeText: '关闭',
      width: 600,
      height:300,
      maxHeight: $(window).height() * 0.98,
      minHeight: $(window).height() * 0.7,
      modal: true,
      show: { effect: "fade", duration: 300 },
      hide: { effect: "fade", duration: 300 },
      buttons: {
        解绑: function() {
          disBindingItem(currentInstance.numIids,this);
        },
        关闭: function() {
          $(this).dialog("close");
        }
      }
    });
 }

 var batchDisBindItemInstance = null;
 batchDisBindingItem=function()
 {
 var isAlerted = false;
 if(batchDisBindItemInstance==null)
  batchDisBindItemInstance=new BatchDisBindingItem();
 currentInstance=batchDisBindItemInstance;
 if(batchDisBindItemInstance.cancelFreeItem())
  isAlerted = true;
 batchDisBindItemInstance.setNumIids();

 if(isAlerted)
 {
  if(currentInstance.numIids=="") return;
 }

 if(!batchDisBindItemInstance.checkIsSelected())
  return;
 batchDisBindItemInstance.removeDialog();
 batchDisBindItemInstance.popUpDialog();
 }
 disBindingItem=function(myNumIids,sender)
  {
    var urledit = "./x.aspx?method=DisBinding&NumIids="+myNumIids+"&rdm="+Math.random();
    $.get(urledit, {}, function (dataString, status, object) {
      var data = $.evalJSON(dataString);
      ajaxResponseResult(data);
      if(data.IsSuccess==true)
      {
        $(sender).dialog("close");
        $("#listItemDefine").trigger("reloadGrid");
      }
    });
  }
  //____________________________sku批量及单独解除绑定____________________________________________
  function BatchDisBindingSku(){}
  myInherits(BatchDisBindingSku,BatchSkuModify);

  BatchDisBindingSku.prototype.cancelFreeItem=function()
  {
   var tempNumIids = jQuery("#listSkuDefine").jqGrid('getGridParam','selarrrow');
 var tempNumIidsClone = this.cloneArr(tempNumIids);
 var isAlert=false;
 var isBinded = false;
 for(var i=0;i<tempNumIidsClone.length;i++)
 {
  isBinded = false;
  for(var j=0;j<bindedSkuArr.length;j++)
  {
  if(tempNumIidsClone[i]==bindedSkuArr[j])
  {
   isBinded = true;
   break;
  }
  }
  if(!isBinded)
  {
  isAlert = true;
  jQuery("#listSkuDefine").jqGrid('setSelection',tempNumIidsClone[i]);
  }
 }

 if(isAlert)
 {
  alert("未绑定的SKU不能作解绑的动作！");
  // 返回true表示已经弹出alert了
  return true;
 }
 return false;
  }

  BatchDisBindingSku.prototype.popUpDialog=function()
 {
 var showStr='<div id="descTempDiv"><span style="color:red;">注意：您正在批量解除SKU绑定，如果您解除了绑定，今后数据源宝贝设置有更新您的宝贝设置将不会同步更新！</span></div>';

    $(showStr).dialog({
      title: "解除绑定",
      closeText: '关闭',
      width: 600,
      height:300,
      maxHeight: $(window).height() * 0.98,
      minHeight: $(window).height() * 0.7,
      modal: true,
      show: { effect: "fade", duration: 300 },
      hide: { effect: "fade", duration: 300 },
      buttons: {
        解绑: function() {
          disBindingSku(currentInstance.oneIid,currentInstance.skuIds,this);
        },
        关闭: function() {
          $(this).dialog("close");
        }
      }
    });
 }

 var batchDisBindSkuInstance = null;
 // 批量
 batchDisBindingSku=function()
 {
 var isAlerted = false;
 if(batchDisBindSkuInstance==null)
  batchDisBindSkuInstance=new BatchDisBindingSku();
 currentInstance=batchDisBindSkuInstance;
 if(batchDisBindSkuInstance.cancelFreeItem())
  isAlerted = true;
 batchDisBindSkuInstance.setOneIid();
 batchDisBindSkuInstance.setSkuIds();

 // 如果已经弹过一次了，那再次判断是否没有勾选的时候，就不要再弹了
 if(isAlerted)
 {
  if(currentInstance.skuIds == "") return;
 }

 if(!batchDisBindSkuInstance.checkIsSelected())
  return;
 batchDisBindSkuInstance.removeDialog();
 batchDisBindSkuInstance.popUpDialog();
 }
  // 单独
  disBindingSku=function(numIid, skuIds, sender) {
    var urledit = "./x.aspx?method=DisBinding&NumIid=" + numIid + "&SkuIds="+skuIds+"&rdm=" + Math.random();
    $.get(urledit, {}, function (dataString, status, object) {
      var data = $.evalJSON(dataString);
      ajaxResponseResult(data);
      if (data.IsSuccess == true) {
        $(sender).dialog("close");
        $("#listSkuDefine").trigger("reloadGrid");
      }
    });
  }

})();

以上这篇利用js的闭包原理做对象封装及调用方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。