url操作一网打尽（一）
1：url实际应用简介
近期研究发现通过url传递参数很普遍的（淘宝也是这样做的），
通过修改url来传递参数，比如通过关键字搜索某件商品的时候，链接便追加了相应参数。在请求接口的时候直接对url进行解析就行了。我在实际应用中请求结构中page参数结构层级经常发生变化
例如淘宝男装页面是：https://www.taobao.com/markets/nanzhuang/index2016?spm=a219r.lm895.0.0.ADf1F1
当在搜索框中输入英伦时候则变成了以下链接
https://s.taobao.com/list?spm=a217m.8005144.302279.27.1OmJGz&q=%E8%8B%B1%E4%BC%A6&cat=50344007&style=grid&seller_type=taobao
页面是根据链接来呈现的。通过对&q=%E8%8B%B1%E4%BC%A6&cat=50344007&style=grid&seller_type=taobao这几个参数进行解析，
构造出接口需要的数据，提交给接口。然后根据接口返回数据在页面展现出来。
这样的好处是，如果其他模块也用到参数的话，也可以来解析url中的参数 比如：页码，按照销量筛选，按照地址筛选。
2 url结构
在控制台输入location则出现下面结构：
hash ""
host "s.taobao.com"
hostname "s.taobao.com"
href "https://s.taobao.com/list?spm=a217m.8005144.302279.27.1OmJGz&q=%E8%8B%B1%E4%BC%A6&cat=50344007&style=grid&seller_type=taobao"
origin "https://s.taobao.com"
pathname "/list"
port ""
protocol "https:"
search "?spm=a217m.8005144.302279.27.1OmJGz&q=%E8%8B%B1%E4%BC%A6&cat=50344007&style=grid&seller_type=taobao"
可以在控制台进行一一验证：如 window.location.origin
hash 设置或获取 href 属性中在井号“#”后面的分段。
host 设置或获取 location 或 URL 的 hostname 和 port 号码。
hostname 设置或获取 location 或 URL 的主机名称部分。
href 设置或获取整个 URL 为字符串。
pathname 设置或获取对象指定的文件名或路径。
port 设置或获取与 URL 关联的端口号码。
protocol 设置或获取 URL 的协议部分。
search 设置或获取 href 属性中跟在问号后面的部分。
3：url操作
3-1 获取当前url完整地址
window.location
location
其他获取方法如下（此处内容参考http://www.jb51.net/article/47288.htm）
document.URL;
document.location;
top.location.href;
parent.document.location;
3-2 只获取hash 等属性则只需要在3-1后面加上相应属性
比如： window.location.origin
3-3 url转换成对象（预留）
/** * 分解URL中的参数到JS对象。<br/> * 将JS对象组装为参数字符串方法参见{@link #queryString}<br/> * 获得表单内所有元素提交参数字符串表示方法参见{@link #formQuery} * @param {String} url * @return {Object} 永远不会为空 */ dequery: function (url) { var param = {}; url = url.substr(url.indexOf('?') + 1); if (url) { url = url.split('&'); for (var i = 0, len = url.length; i < len; i++) { var arr = url[i].split('='); param[arr[0]] = decodeURIComponent(arr[1]); } } return param; },
3-4 对象转换成url
/**
* 返回对象查询字符串表示形式.
* <pre><code>
var obj = {name:'Exiu', age:'25'};
//显示 name=Exiu&age=25
alert(queryString(obj));
// 也可以双重键值对形式
{"doAction":"interView","extra_params":{"interview_id":"27"}}
=> 'doAction=interView&extra_params['interview_id']=27'
* </code></pre>
* 提取url参数转为JS对象方法参见{@link #dequery}<br/>
* 获得表单内所有元素提交参数字符串表示方法参见{@link #formQuery}
* @param {Object} obj
* @return {String} 对象的查询字符串表示形式
*/
queryString: function (obj) {
if (!obj)
return '';
var arr = [];
for (var k in obj) {
var ov = obj[k], k = encodeURIComponent(k);
var type = typeof ov;
if (type === 'undefined') {
arr.push(k, "=&");
} else if (type != "function" && type != "object") {
arr.push(k, "=", encodeURIComponent(ov), "&");
} else if (ov instanceof Array) {
if (ov.length) {
for (var i = 0, len = ov.length; i < len; i++) {
arr.push(k, "=", encodeURIComponent(ov[i] === undefined ? '' : ov[i]), "&");
}
} else {
arr.push(k, "=&");
}
} else if (type === 'object') {
// 例如"extra_params":{"interview_id":"27"}形式
for (var kk in ov) {
arr.push(k, '[', kk, ']', '=', encodeURIComponent(ov[kk]), '&');
}
}
}
arr.pop();
return arr.join("");
}
3-4 url修改单个参数
3-5 url修改多个参数
我现在做的功能展示中需要 对分页，关键字，地区，商品分类，店铺类别，时间顺序，好评顺序 这个几个因素
根据实际场景构造数据请求借口
//根据传入参数更改链接，如果链接中有page,应去掉page参数，
goUrl: function (name,value) {
var urlObj = Util.dequery(location.href);
if(urlObj.page){
delete urlObj.page;
}
urlObj[name]=value;
var urlStr =Util.queryString(urlObj);
location.href = '?' + urlStr;
}
