有一段时间没写过技术干货文了,这两天刚好遇到一个以前没太在意的一个功能实现–前端获取URL传递的参数
毕竟平时都是在后台处理,掉了一堆头发后,想想还是写出来跟你们分享一下,以后要是你们遇到了也有个参考
要只是获取一些常规字符串到没什么难的,关键还有些乱七八糟的需求,什么同一个参数名传递了多次啊,传数组啊。搞来搞去就写了一大堆
先说说思路吧,如果你看这文章是想要解决问题,拿着代码直接用的话,就直接看最后面的Code实现以及使用方法吧
用框架思维分析问题
给你一个如下的URL:
http://NaoNao.com/?product=shirt&color=blue&newuser&size=m#Hello
将URL里传递的参数转换为object
对象,这样我们在使用参数的时候也更为方便
我曾多次强调框架思维,现在遇到这个问题了,我们就拿框架思维来分析一下,该怎样才能快速解决
首先是要了解我们的目的是什么?目的很简单,取得URL内传递的参数,并且解析成对象
接着再分析我们现在知道些什么?有一串URL
我们再来分析,如果从URL中获得传递的参数,也就是为了达到目的,我们该做些什么?
URL的特征我们大致都知道,就是第一个?
后面的字符串,都是传递的参数,但是有个特殊情况请不要忘记了,URL后面有时候会带上一个#
,而#
后面的内容,并不是我们要传递的参数,而是网页位置的标识符
如果URL中包含了#
,我们只需要解析?
到#
之间的字符串就可以了,如果不包含,那么第一个?
后所有的内容都是我们需要解析的
你可能觉得我是在说废话,这么明显的事情,只要不是白痴都能看得懂
我当然知道,只要不是白痴都能看得懂,但我为什么要强调呢?因为我们想要快速的解决问题,必须具备框架思维,也可以说是工程思维
你可能有会说,这么简单的问题需要这样分析么?我们一看就知道了,闹闹你这是杀鸡用牛刀
虽说是杀鸡用牛刀,可要想培养自己的工程思维,那么必须保持刻意训练,直到随手拈来
好了,分析完后,我们按照上面的思路来逐步实现,实现的时候可能会遇到其它的问题,到时候再分析,再解决
毕竟再牛逼的工程师,也不会在动手前就想的面面俱到,只能是在动手实现前尽可能的考虑周到,遇到问题时再快速的迭代更新
JS获取URL参数的过程
先用JS拿到URL,如果函数传参了URL,那就用参数。如果没传参,就使用当前页面的URL
var queryString = url ? url.split('?')[1] : window.location.search.slice(1);
如果后面的字符串存在#
,我们还得将#
后面的字符串去掉,因为#
后面的内容并不是我们需要获取的参数,而是网页位置的标识符
queryString = queryString.split('#')[0];
好了,把干扰的部分都移除后,我们可以开始安心的解析参数了,先将传递的参数分成数组
var arr = queryString.split('&');
现在我们可以获得一个字符串数组
['product=shirt', 'color=blue', 'newuser', 'size=m']
将字符串拆分成数组后,我们通过创建一个对象,用来存储我们所有的参数
var obj = {
};
我们可以通过遍历数组arr
,将它拆分成键值对。把这个字符串做成key:value
的对象
var a = arr[i].split('=');
接下来就是要为每一个变量key
分配对应的值value
,如果我们得到的value
不是一个正确的参数,我们就用true
来表示这个参数名存在,当然了,你也可以根据自己的实际情况来做改变
var paramName = a[0];
var paramValue = typeof(a[1]) === 'undefined' ? true : a[1];
在这里我只是对undefined
做了标记,如果是N