创建一个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><tr><td></td><td></td><td>此宝贝没有对应的授权宝贝</td><td><span/></td></tr></table>'; return isEnabled; } var arr = arrAuthItem[getAuthShopCurrent()+getSyncFieldCurrent()+""][i]["ListItemFrom"]; var strHead = '<table>'; 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][" NumIid"] + '" target="_blank"><img src="' + arr[p]["PicUrl"] + '_sum.jpg" title="' + arr[p]["Title"] + '" /></a>'; if(getEnabledStatus(isBinded,!isSharedTo,isSelfItemEnabled)) isEnabled = true; strTr+='<tr><td>'+getRadioCode(isBinded,!isSharedTo,isSelfItemEnabled,i,arr.length)+'</td><td>'+picUrl+'</td><td>'+getAuthItemCode(arr[p],isSharedFrom,isSharedTo,i)+'</td><td>'+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>【源】</span>'; if(isSharedTo) labelStr = '<span>【受】</span>'; return '<span columnName="NumIid">'+labelStr+'ID：' + obj["NumIid"] + '</span>' + '<span columnName="OuterId">商家编码：' + obj["OuterId"] + '</span>' + '<spanPrice"],i)+'" columnName="Price">价格：' + obj["Price"] + '</span>' + '<br><span columnName="Title">' + obj["Title"] + '</span>'; } // 返回self宝贝详情html代码 function getSelfItemCode(obj) { var labelStr = ""; if(stringToBoolean(obj["IsToItemHasShareFrom"])) labelStr = '<span>【源】</span>'; if(stringToBoolean(obj["IsToItemHasShareTo"])) labelStr = '<span>【受】</span>'; return '<span><span columnName="NumIid">'+labelStr+'ID：' + obj["NumIidTo"] + '</span>' + '<span columnName="OuterId">商家编码：' + obj["OuterIdTo"] + '</span>' + '<span columnName="Price">价格：' + obj["PriceTo"] + '</span></span>' + '<br><span columnName="Title">' + obj["TitleTo"] + '</span>'; } // 返回绑定关系图标的html代码 function getEnabledCode(isBinded,isAuthEnabled,isSelfEnabled,obj,numIid) { if(isBinded) { // 如果是绑定状态，还要看当前item是否为绑定的item // 在这种情况下，判断是否可绑定，不需要用到selfItem if(obj["NumIid"]==numIid) return '<span/>'; else { if(stringToBoolean(obj["IsFromItemHasShareTo"])) return '<span/>'; else return '<span/>'; } }else { if(isAuthEnabled&&isSelfEnabled) return '<span/>'; else return '<span/>'; } } // 是否可以绑定 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">'; } function setterSelfItem(i) { var isEnabled=true; var picUrl='<a href="http://item.taobao.com/item.htm?id=' + arrAuthItem[getAuthShopCurrent()+getSyncFieldCurrent()+" "][i]["NumIidTo"] + '" target="_blank"><img 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 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组件