實際開發篇-----截取地址欄url參數

前言

在最近開發過程當中遇到了這樣一個問題，一樣兩個活動，一個是春節活動，另外一個是元宵節活動，關於活動期間用戶上傳的做品進行初審啊、複審啊、查詢啊，小夥伴可能會問，這麼簡單遇到啥問題了，好奇的話就繼續看吧！

清奇的腦回路

• 因爲這兩類活動的後臺頁面徹底相同，由於這是在週一部門老大開會的時候分配給個人需求，聽到以後腦子一開始想的思路就是，還不算太難，就是兩種類型的活動ID不同，作完一套，複製一套，改一下ID就行了嘛，沒毛病。
• 就在我想的時候，部門老大就順口給我指點了兩句，讓我作一套就好，根據活動id的不用拉取到不一樣的任務就好。我隨口嗯了一聲。
• 散會以後,我開始了冥想（這一過程就體現了本身的小白，經驗不足），我想這也不像以前有下拉選擇，能夠直接判斷，那還能怎麼樣呢，想啊想，終於有了眉目，在配置菜單入口的時候，在地址欄中用type區分兩種類型，而後傳給後臺，就能拿到了活動id，那有了思路就開始行動起來。

實現過程

首先呢，我去配置了路徑菜單，而後開始去想在地址欄中怎麼樣拿到type的值，由於在地址欄後邊就拼接了一個參數，本身也沒有多想，就想着直接用‘截取字符串’大法，取到'type='後邊的數字就行了。代碼以下所示：

var locUrl = "http://localhost:88/music/index.html?id=1"    //這是一個本地連接
var type = locUrl.substring(locUrl.lastIndexOf("=")+1);     //截取type的值
console.log(type);  //輸出：1


複製代碼

取到以後覺得這樣就能夠了吧~而後就繼續開發，繼續作，很快，完成了這個活動的管理後臺界面的開發，而後去告訴部門老大交工，老大很負責任有心的問我，作了幾套，我說一套，他問我怎麼實現的，我給他講了講，以後他說打開我看看代碼，看的時候有問題了，雖然取到了，可是這樣若是在後邊繼續拼接參數怎麼辦，這樣取是否是很不靈活，不可取呢，通過他的耐心指導，我大概知道了，要經過參數名來取，這樣就有了下邊的代碼：

function GetQueryValue(queryName) {
     var query = decodeURI('http://localhost:88/music/index.html?id=1&actName=春節'.substring(1));
     var vars = query.split("&");
     for (var i = 0; i < vars.length; i++) {
         var pair = vars[i].split("=");
        if (pair[0] == queryName) { return pair[1]; }
     }
     return null;
 }
 var queryVal=GetQueryValue('actName');
 console.log(queryVal);  //春節
複製代碼

這看上去其實都不難理解，兩種方式，一種是截取字符串參數獲取到，另外一種是經過參數名查找到本身所需的屬性值，我以爲兩種方式均可以，可是呢，根據合理性來講，修改以後的代碼，在實際項目開發中更加實用，快記錄下來吧~

小結

實習這麼久，雖然接觸到的項目不是太難，可是本身也能從學到一些知識，實踐中也會發現本身的不足。關於地址欄截取參數也許對於小夥伴來講可能很簡單，可是在實際項目場景下，尤爲是對於剛步入工做中的萌新小白來講，各類條件啊場景啊混淆咱們，這就須要咱們，‘撥開雲霧’-‘發現本質’-‘多思索，耐心分析’，尋找最合理的方法去解決，相信小夥伴在這一過程當中也會有些許收穫~一塊兒加油~

前端路，長途漫漫，踩坑ing，總結ing，回顧ing，持續更新中。。。