js分解url参数（面向对象-极简主义法应用）

修改前：


代码如下:

<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>

感谢 草根程序猿很厉害把这个方法重写了一下，更严密，高效了，最后面在些再学习一下！！！


代码如下:

<script type="text/javascript">
function getQueryString(url) {
if(url) {
url=url.substr(url.indexOf("?")+1); //字符串截取，比我之前的split()方法效率高
}
var result = {}, //创建一个对象，用于存name，和value
queryString =url || location.search.substring(1), //location.search设置或返回从问号 (?) 开始的 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() 不接受负的参数。
参见http://www.jb51.net/w3school/js/jsref_substring.htm
2、location.search.substring(1) ，location.search设置或返回从问号 (?) 开始的 URL（查询部分）。
参见http://www.jb51.net/w3school/htmldom/prop_loc_search.htm
3、exec() 方法用于检索字符串中的正则表达式的匹配。太强大了，还不会用
参考http://www.jb51.net/w3school/js/jsref_exec_regexp.htm
4、使用 decodeURIComponent() 对编码后的 URI 进行解码。
参见http://www.jb51.net/w3school/js/jsref_exec_regexp.htm

赞 (0)

相关推荐

  • JS左右无缝滚动（一般方法+面向对象方法）

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • js面向对象设计用{}好还是function(){}好(构造函数)

    在网上看了很多JavaScript的项目, 用到对象都是采用{}的形式: 例如jQuery, TinyMCE等都是形如: 复制代码 代码如下: var Dialog = { int : function() { .... }, insert : function() { .... }, pop : function() { .... } }; //调用就是: Dialog.init(); 而我自己一直使用function闭包的方式, 感觉使用内部私有成员(函数,变量)更方便: 复制代码 代码如下

  • 使用Json比用string返回数据更友好，也更面向对象一些

    以前的程序: 复制代码 代码如下: ViewData["msg"] = "{result:true,FileName:\"" + new FileInfo(Request.Files[0].FileName).Name + "\",FileUrl:\"" + fileurl.Replace("\"", "") + "\"}"; 重构之后的

  • jquery方法+js一般方法+js面向对象方法实现拖拽效果

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • 初步了解javascript面向对象

    前言 基于类的对象:我们都知道面向对象的语言中有一个明显的标志,就是都有类的概念,通过类这个类似模板的东西我们可以创建许多个具有相同的属性和方法的对象.然而在ECMAScript中并没有类的概念,自然它与基于类的语言中的对象也会有所不同. js中的对象: 无序 的属性的集合,属性可以包含基本值.对象.函数.即js中的对象是一组没有特定顺序的值,对象的每个属性或者方法都有一个自己的名字,而每个名字都与一个值相对应. 理解对象 创建对象的方式 1 创建一个对象的最简单的方式是创建一个Object实例

  • 同一页面多个商品倒计时JS 基于面向对象的javascript

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title

  • JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)

    什么是面向对象?面向对象是一种思想!(废话). 面向对象可以把程序中的关键模块都视为对象,而模块拥有属性及方法.这样我们如果把一些属性及方法封装起来,日后使用将非常方便,也可以避免繁琐重复的工作.接下来将为大家讲解在JS中面向对象的实现.   工厂模式 工厂模式是软件工程领域一种广为人知的设计模式,而由于在ECMAScript中无法创建类,因此用函数封装以特定接口创建对象.其实现方法非常简单,也就是在函数内创建一个对象,给对象赋予属性及方法再将对象返回即可. function createBlo

  • JavaScript面向对象(极简主义法minimalist approach)

    极简主义法 荷兰程序员 Gabor de Mooij 提出了一种比 Object.create ()更好的新方法,他称这种方法为"极简主义法"(minimalist approach).这也是我推荐的方法. 3. 1 封装 这种方法不使用 this 和 prototype,代码部署起来非常简单,这大概也是它被叫做"极简主义法"的原因. 首先,它也是用一个对象模拟"类".在这个类里面,定义一个构造函数 createNew (),用来生成实例. 复制

  • js分解url参数（面向对象-极简主义法应用）

    修改前: 复制代码 代码如下: <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; f

  • 极简主义法编写JavaScript类

    这个所谓的"极简主义法"是荷兰程序员Gabor de Mooij提出来的,这种方法不使用this和prototype,代码部署起来非常简单,这大概也是它被叫做"极简主义法"的原因.下面就介绍如何使用极简主义法完成JavaScript的封装和继承 1. 封装 首先,它也是用一个对象模拟"类".在这个类里面,定义一个构造函数createNew(),用来生成实例. var Cat = { createNew: function(){ // some c

  • js获取url参数的使用扩展实例

    最近网站改版,发现网站的广告都是直接网址,如果转向一下,对于本站的全职会好点 需要一个html页面来传递参数所以用到个js获取url参数的代码,就一个funciton 参考http://img.jb51.net/url.htm?url=http://www.baidu.com  复制代码 代码如下: <script language="javascript" type="text/javascript"> //js获取url参数的functionfunc

  • JS获取url参数、主域名的方法实例分析

    本文实例讲述了JS获取url参数.主域名的方法.分享给大家供大家参考,具体如下: <script> alert(location.hostname) alert(location.port) alert(location.pathname) alert(location.search) </script> <script> function winsx(url) //URL传递的参数 { var winurl =url?url:(unescape(window.loca

  • JS获取url参数,JS发送json格式的POST请求方法

    <script type="text/javascript"> 一.获取url所有参数值 function US() { var name, value; var str = location.href; var num = str.indexOf("?"); str = str.substr(num + 1); var arr = str.split("&"); for (var i = 0; i < arr.leng

  • 前端JS获取URL参数的4种方法总结

    前端JS获取URL参数的4种方法总结

    目录 前言 方法1: 字符串 split 方法 方法2: 利用 URLSearchParams 方法 方法3: 利用正则匹配方法 方法4: 使用第三方库 qs 总结: 前言 对于前端来说,无论是在面试或者工作中都可能遇到处理 url 参数的问题,使用框架进行项目开发时或许不用,有自带的获取参数方式,但是抛开使用框架来说我们也可以使用原生 js 方式或者借用第三方库来实现参数的获取并对象化,下面就对具体用法进行介绍整理. 方法1: 字符串 split 方法 因为一个 url 地址是字符串形式的,所

  • js获取url参数代码实例分享(JS操作URL)

    代码很简单,主要一个思路是把url参数解析为js对象,再做增.删.改.查操作就很方便了~,这里做笔记. 复制代码 代码如下: var LG=(function(lg){    var objURL=function(url){        this.ourl=url||window.location.href;        this.href="";//?前面部分        this.params={};//url参数对象        this.jing="&quo

  • javascript[js]获取url参数的代码

    最近做个页面,需要用javascript获取url参数,可发现网上的东西,实在是多了,错误也实在是多啊,真晕,浪费了我不少时间于是,我便总结一下,一个好用的就可以了,先声明下,用正则,是简单,但多浏览器的兼容性,和速度不敢保证了,所以我就用个多浏览器兼容的 复制代码 代码如下: <script language = javascript> function request(paras){ var url = location.href;  var paraString = url.substr

  • 初学prototype,发个JS接受URL参数的代码

    function request(key) { if(typeof(this)=="undefined")return false; if(this.length>0) { var s = this.split("&"); for(var i in s) { var sp=s[i].split("=") if(sp[0]==key)return(sp[1]); } return false; } else return false

随机推荐