js 物件導向 和方法重載

最近一直都在頻繁的寫js代碼，有的時候代碼疊在一起 ，看起來真是讓人頭痛，就在想有沒有js物件導向的寫法 在網上google了一下，長篇大論的很多 ，下面才說一下自己遇到的問題

需求：後台java程式碼搜尋引擎提供了一個用於拼裝搜尋的java類，裡麵包含眾多的搜尋條件最後轉換為condition=11---1-uptime-02-cat1,cat2,cat3-1，架構師要求前台搜尋網頁面要用get方式 也要提交給後台搜尋這個字串而且這個字串要在地址欄中顯示，於是我想到了用js進行拼裝，平且模仿了後台java實現的代碼

下面來看一下js的封裝的搜尋條件對象

/**  *條件對象   * **/ function  conditionInfo(){ this.searchType='11', this.cat1='', this.cat2='', this.cat3='', this.cat4='', this.cat5='', this.viewMode='', this.keyWords='', this.withoutWords='', this.goodID='', this.minPrice='', this.maxPrice='', this.shopID='', this.orderbyName='uptime', this.orderbyValue='desc', this.pageSize='20', this.pageIndex='1', this.promotionType='', this.attribute='', this.location='', this.isOnline='', this.brand='', this.needCatNum='1', this.catEnum='cat1,cat2,cat3', this.type='' }

當一次請求之後 儲存在request中的condition字元創轉換為conditionInfo js對象

 /**  * 將action傳遞過來的condition字串轉換為conditionInfo js 對象  * */ function StrToConditionInfoObject(url){ var urlStr =url; var obj = new conditionInfo(); if(urlStr!=''){var urls = urlStr.split('-',100);obj.searchType=urls[0]; obj.cat1=urls[1]; obj.cat2=urls[2]; obj.cat3=urls[3]; obj.cat4=urls[4]; obj.cat5=urls[5]; obj.viewMode=urls[6]; obj.keyWords=urls[7]; obj.withoutWords=urls[8]; obj.goodID=urls[9]; obj.minPrice=urls[10]; obj.maxPrice=urls[11]; obj.shopID=urls[12]; obj.orderbyName=urls[13]; obj.orderbyValue=urls[14]; obj.pageSize=urls[15]; obj.pageIndex=urls[16]; obj.promotionType=urls[17]; obj.attribute=urls[18]; obj.location=urls[19]; obj.isOnline=urls[20]; obj.brand=urls[21]; obj.needCatNum='1'; obj.catEnum='cat1,cat2,cat3'; obj.type=urls[24]; }  return obj; }

將js conditionInfo對象轉換為condition字串（類似11---1-uptime-02-cat1,cat2,cat3-1）

/**  *  條件對象轉換為Url地址  * param conditionInfo 條件對象  * */ function createUrl(conditionInfo){ var con = ''; var lastconInfo='';for(var index in condition){//迴圈該對象的每個欄位if(condition[index]==null || condition[index]==''){con+=''+'-';}else{con+=condition[index]+'-';}}if(con!=''){lastconInfo = con.substring(0,con.length-1);}return lastconInfo; }

這樣就完成了js對象和字串的轉換 和後台java實現一樣了

下面來實作類別似於java方法的重載 但是我們不能像java那樣進行方法的重載 js沒有提供，我只能通過 寫幾個方法 ，然後有一個方法統一調用，在這個方法中通過判斷方法參數的個數和類型 來決定調用哪個方法，下面是代碼

 /*** 簡單搜尋條件對象* @param {Object} catId 點擊的類別ID @param {Object} level 點擊的類別level          * @param {Object} catName 點擊類別的名稱* @param {Object} formId 提交表單的名字* action 提交的url* conditionStr * @memberOf {TypeName} */ function simpleSearchObj(catId,level,catName,searchType,shopId,action,conditionStr){ this.catId =catId; this.level = level; this.catName = catName; this.shopId = shopId; this.action = action; this.searchType = searchType; this.conditionInfoObj = StrToConditionInfoObject(conditionStr); }

重載的方法 這雷根據參數的個數進行的重載的實現

 /**

* 根據simpleSearchObj來查詢商品列表* @param {Object} simpleObj* @param {Object} status*/ function searchGoodBySimpleSearchObj(simpleObj,status){ if(arguments.length == 2){ searchGoodByCatOpenWindow(simpleObj); }else{searchGoodByCat(simpleObj)  } }

/*** 搜尋商品列表* @param {Object} simpleObj*/ function searchGoodByCat(simpleObj){ var conInfo = simpleObj.conditionInfoObj; if(simpleObj.level=='1'){conInfo.cat1=simpleObj.catId;conInfo.cat2 = '';conInfo.cat3='';  } if(simpleObj.level=='2'){conInfo.cat2=simpleObj.catId;conInfo.cat1='';conInfo.cat3=''; } if(simpleObj.level=='3'){conInfo.cat1='';conInfo.cat2 = '';conInfo.cat3=simpleObj.catId; } if(simpleObj.shopId!=null){conInfo.shopId = simpleObj.shopId;  } if(simpleObj.searchType!=null){ conInfo.searchType = simpleObj.searchType;  } conInfo.attribute =''; conInfo.pageIndex = 1; conInfo.keyWords = ''; var url = createUrl(conInfo); document.location.href=simpleObj.action+'?condition='+url; }

 /*** 彈出新視窗 * @param {Object} simpleObj */ function searchGoodByCatOpenWindow(simpleObj){  var conInfo = simpleObj.conditionInfoObj; if(simpleObj.level=='1'){conInfo.cat1=simpleObj.catId;conInfo.cat2 = '';conInfo.cat3='';  } if(simpleObj.level=='2'){conInfo.cat2=simpleObj.catId;conInfo.cat1='';conInfo.cat3=''; } if(simpleObj.level=='3'){conInfo.cat1='';conInfo.cat2 = '';conInfo.cat3=simpleObj.catId; } if(simpleObj.shopId!=null){conInfo.shopId = simpleObj.shopId;  } if(simpleObj.searchType!=null){ conInfo.searchType = simpleObj.searchType;  } conInfo.attribute =''; conInfo.pageIndex = 1; conInfo.keyWords = ''; var url = createUrl(conInfo); var href=simpleObj.action+'?condition='+url; window.open (href, '商品列表'); }

/**  * 搜尋商品列表  * @param {Object} conditionInfo 條件對象  * @param {Object} action 提交url  */ function searchByCondition(conditionInfo,action){  var url = createUrl(conditionInfo);  document.location.href=action+'?condition='+url; }