实际开发篇-----截取地址栏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，持续更新中。。。