js分解url參數(shù)（面向?qū)ο?極簡主義法應(yīng)用）
更新時間：2012年08月09日 16:53:04 作者：
剛看到笑看風(fēng)云寫的JavaScript面向?qū)ο?極簡主義法)和一個分解url參數(shù)面試題，我作了一下修改，記錄下來
修改前：
<script type="text/javascript">
var url="www.taobao.com?key0=a&key1=b&key2=c";
function parseQueryString(url){
var str=url.split("?")[1],
items=str.split("&");
var arr,name,value;
for(var i = 0, l = items.length; i < l; i++){
arr=items[i].split("=");
name= arr[0];
value= arr[1];
this[name]=value;
}
}
var obj=new parseQueryString(url);
alert(obj.key1)
</script>
修改后：
<script type="text/javascript">
var url="www.taobao.com?key0=a&key1=b&key2=c";
var pQString={
createNew:function(url){
var str=url.split("?")[1],
items=str.split("&");
var arr,name,value;
for(var i = 0, l = items.length; i < l; i++){
arr=items[i].split("=");
name= arr[0];
value= arr[1];
this[name]=value;
}
}
}
var obj=new pQString.createNew(url);
alert(obj.key1)
</script>
感謝 草根程序猿很厲害把這個方法重寫了一下，更嚴密，高效了，最后面在些再學(xué)習(xí)一下！！！
<script type="text/javascript">
function getQueryString(url) {
if(url) {
url=url.substr(url.indexOf("?")+1); //字符串截取，比我之前的split()方法效率高
}
var result = {}, //創(chuàng)建一個對象，用于存name，和value
queryString =url || location.search.substring(1), //location.search設(shè)置或返回從問號 (?) 開始的 URL（查詢部分）。
re = /([^&=]+)=([^&]*)/g, //正則，具體不會用
m;
while (m = re.exec(queryString)) { //exec()正則表達式的匹配，具體不會用
result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]); //使用 decodeURIComponent() 對編碼后的 URI 進行解碼
}
return result;
}
// demo
var myParam = getQueryString("www.taobao.com?key0=a&key1=b&key2=c");
alert(myParam.key1);
</script>
注：
1、substr()與substring(start,stop) ，提取字符串中介于兩個指定下標之間的字符。
重要事項：與 slice() 和 substr() 方法不同的是，substring() 不接受負的參數(shù)。
參見http://www.dbjr.com.cn/w3school/js/jsref_substring.htm
2、location.search.substring(1) ，location.search設(shè)置或返回從問號 (?) 開始的 URL（查詢部分）。
參見http://www.dbjr.com.cn/w3school/htmldom/prop_loc_search.htm
3、exec() 方法用于檢索字符串中的正則表達式的匹配。太強大了，還不會用
參考http://www.dbjr.com.cn/w3school/js/jsref_exec_regexp.htm
4、使用 decodeURIComponent() 對編碼后的 URI 進行解碼。
參見http://www.dbjr.com.cn/w3school/js/jsref_exec_regexp.htm
復(fù)制代碼 代碼如下:
<script type="text/javascript">
var url="www.taobao.com?key0=a&key1=b&key2=c";
function parseQueryString(url){
var str=url.split("?")[1],
items=str.split("&");
var arr,name,value;
for(var i = 0, l = items.length; i < l; i++){
arr=items[i].split("=");
name= arr[0];
value= arr[1];
this[name]=value;
}
}
var obj=new parseQueryString(url);
alert(obj.key1)
</script>
修改后：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
var url="www.taobao.com?key0=a&key1=b&key2=c";
var pQString={
createNew:function(url){
var str=url.split("?")[1],
items=str.split("&");
var arr,name,value;
for(var i = 0, l = items.length; i < l; i++){
arr=items[i].split("=");
name= arr[0];
value= arr[1];
this[name]=value;
}
}
}
var obj=new pQString.createNew(url);
alert(obj.key1)
</script>
感謝 草根程序猿很厲害把這個方法重寫了一下，更嚴密，高效了，最后面在些再學(xué)習(xí)一下！！！
復(fù)制代碼 代碼如下:
<script type="text/javascript">
function getQueryString(url) {
if(url) {
url=url.substr(url.indexOf("?")+1); //字符串截取，比我之前的split()方法效率高
}
var result = {}, //創(chuàng)建一個對象，用于存name，和value
queryString =url || location.search.substring(1), //location.search設(shè)置或返回從問號 (?) 開始的 URL（查詢部分）。
re = /([^&=]+)=([^&]*)/g, //正則，具體不會用
m;
while (m = re.exec(queryString)) { //exec()正則表達式的匹配，具體不會用
result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]); //使用 decodeURIComponent() 對編碼后的 URI 進行解碼
}
return result;
}
// demo
var myParam = getQueryString("www.taobao.com?key0=a&key1=b&key2=c");
alert(myParam.key1);
</script>
注：
1、substr()與substring(start,stop) ，提取字符串中介于兩個指定下標之間的字符。
重要事項：與 slice() 和 substr() 方法不同的是，substring() 不接受負的參數(shù)。
參見http://www.dbjr.com.cn/w3school/js/jsref_substring.htm
2、location.search.substring(1) ，location.search設(shè)置或返回從問號 (?) 開始的 URL（查詢部分）。
參見http://www.dbjr.com.cn/w3school/htmldom/prop_loc_search.htm
3、exec() 方法用于檢索字符串中的正則表達式的匹配。太強大了，還不會用
參考http://www.dbjr.com.cn/w3school/js/jsref_exec_regexp.htm
4、使用 decodeURIComponent() 對編碼后的 URI 進行解碼。
參見http://www.dbjr.com.cn/w3school/js/jsref_exec_regexp.htm
相關(guān)文章
最近有個需求,是需要生成32位長度的隨機數(shù),下面這篇文章主要給大家介紹了關(guān)于前端開發(fā)之JS生成32位隨機數(shù)的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)拖拽照片墻，實現(xiàn)照片互換位置，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了原生JS檢測CSS3動畫是否結(jié)束的方法,結(jié)合實例形式分析了javascript事件響應(yīng)及針對css3屬性檢測相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
第七篇Bootstrap表單布局實例代碼詳解(三種表單布局)
Bootstrap提供了三種表單布局：垂直表單，內(nèi)聯(lián)表單和水平表單。接下來通過本文給大家介紹Bootstrap表單布局實例代碼詳解，非常不錯，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
JS實現(xiàn)的駝峰式和連字符式轉(zhuǎn)換功能分析
這篇文章主要介紹了JS實現(xiàn)的駝峰式和連字符式轉(zhuǎn)換功能,結(jié)合實例形式分析了JS實現(xiàn)字符串的駝峰式與連接符式轉(zhuǎn)換的實現(xiàn)技巧,涉及js字符串遍歷、轉(zhuǎn)換及正則表達式相關(guān)操作方法,需要的朋友可以參考下2016-12-12
js 如何實現(xiàn)對數(shù)據(jù)庫的增刪改查
JavaScript操作數(shù)據(jù)庫JS操作Access數(shù)據(jù)庫，跟其他語言操作差不多，總結(jié)了一下習(xí)慣代碼，需要的朋友可以參考下2012-11-11
這篇文章主要介紹了JavaScript new對象的四個過程,結(jié)合實例形式簡單分析了javascript面向?qū)ο蟪绦蛟O(shè)計中new對象的四個過程相關(guān)原理與實現(xiàn)方法,需要的朋友可以參考下
2018-07-07 
js 函數(shù)的執(zhí)行環(huán)境和作用域鏈的深入解析
在js中對象的外在表現(xiàn)形式為函數(shù)。
2009-11-11 
JavaScript編程設(shè)計模式之觀察者模式(Observer Pattern)實例詳解
這篇文章主要介紹了JavaScript編程設(shè)計模式之觀察者模式(Observer Pattern),簡單說明了觀察者模式的概念、原理并結(jié)合實例形式詳細給出了觀察者模式的相關(guān)實現(xiàn)與使用技巧,需要的朋友可以參考下
2017-10-10