js中url对象化管理分析
时间:2019-04-12
本文章向大家介绍js中url对象化管理分析,主要包括js中url对象化管理分析使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1.问题描述
url是web编写过程中一种不可或缺的需要打交道的值,不论是在页面跳转中,还是ajax请求数据或是其他框架插件的url提供.
对于很多程序猿来说,js中经常遇到需要变更url(主要是其中所包含的参数)的情况,大多数人使用的方法是直接拼接.
这种方法胜在简单,同样存在不少不足,如:
拼接形成的url安全性上总是存在潜在的危险;
从某个完整url中获取其中所包含的参数和纯地址,以进行下一步的比较,也是件较麻烦的事情;
2.解决思路
基于以上问题,我的解决策略是将url进行对象化的管理,将url纯地址,url参数分别放到一个对象的各个属性中.
每次对url的变更,可使用先分析为对象格式,再变更其中某些参数,再组建成为新的url方法.
这样构建再开始做的时候也许会觉得有些多此一举,但在处理一些比较复杂的情况时,会非常方便.
3.演示代码
首先提供分析和组建url的方法(可以考虑将之封装成一个方法,方法称的话可以起的再复杂些以避免重复):
/** * 数据处理-解析url为一个对象 */ function parseUrl(strUrl){ var arrUrlPart=strUrl.split('?'); var strUrl=arrUrlPart[0]; var mUrl={ url:strUrl }; if(arrUrlPart.length===2){ var strParam=arrUrlPart[1]; var arrParamPart=strParam.split('&'); for(i in arrParamPart){ var strParamPart=arrParamPart[i]; var arrParamKy=strParamPart.split('='); var strKey=arrParamKy[0]; var strValue=decodeURIComponent(arrParamKy[1]); mUrl[strKey]=strValue; } } return mUrl; } /** * 数据处理-构成/组建url(字符串) */ function concatUrl(mUrl){ var strUrl=mUrl.url; var strParam=''; for(strKey in mUrl){ if(strKey==='url'||mUrl[strKey]===null) continue; strParam+=(strKey+'='+encodeURIComponent(mUrl[strKey])+'&');//注入避免 } if(strParam!==''){ strParam=('?'+strParam.substring(0,strParam.length-1)); } return strUrl+strParam; }
以下是用法示例,当然仅展示了比较简单的情况,可能不能完全体现url对象化管理的威力:
var strUrl1='www.example.com/admin/product/main?group_code=test_group&p_code=shangpin1'; var mUrl1=parseUrl(strUrl1); console.log(mUrl1.p_code); mUrl1.p_code='shangpin2'; var strUrl2=concatUrl(mUrl1); console.log(strUrl2); mUrl1.group_code=null; mUrl1.user_name='用?&=户'; var strUrl3=concatUrl(mUrl1); console.log(strUrl3); var mUrl3=parseUrl(strUrl3); console.log(mUrl3.user_name);
打印结果为:
shangpin1 www.example.com/admin/product/main?group_code=test_group&p_code=shangpin2 www.example.com/admin/product/main?p_code=shangpin2&user_name=%E7%94%A8%3F%26%3D%E6%88%B7 用?&=户
以上情况,特别是情况3,可以说将url转换功能使用的非常灵活了.
当然实际在使用的时候,为安全起见,产生一个新的url通常会先创建一个新的对象,而非在原有对象基础上修改.
4.待改进的地方
以上情况适用于非路径参数的情况下,当使用路径参数时,如:
www.example.com/admin/product/list/1
这个1作为参数,在该方法就不适用了.
也可以优化方法,将方法转化为适用于路径参数的解析与重构,这又是后话了。
以上就是我们给大家详细介绍的关于JS中URL对象化管理的全部内容,感谢你对脚本之家的支持。
- android分包方案
- 系统负载能力浅析
- 微软正式发布了Microsoft.Bcl.Async
- parcel和parcelable
- Windows Phone 7 WebBrowser 中文乱码问题
- Java并发包类总览
- 作业调度框架 Quartz.NET 2.0 beta 发布
- 系统捕获异常并发送到服务器
- 当调用GetAuthorizationGroups() 的错误-“试图访问卸载的应用程序域“(Exception from HRESULT: 0x80131014)解决方案
- WCF 4.0路由服务Routing Service
- ExpandableListView简单应用及listview模拟ExpandableListView
- 文件句柄与文件描述符
- android GifView分享
- VAE、GAN、Info-GAN:全解深度学习三大生成模型
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 安装ActiveMQ
- Spring Cloud Zuul 快速入门
- Spring Cloud 集成 RabbitMQ
- SpringBoot2.x集成Apache Shiro并完成简单的Case开发
- Spring Security权限框架理论与简单Case
- leetcode树之N叉树的前序遍历
- Spring Security 中的 hasRole 和 hasAuthority 有区别吗?
- python常见的import导包技巧
- 真正了解贪心算法,这是一篇精华入门总结...
- MGR修改max_binlog_cache_size参数导致异常
- 【技术创作101训练营】TensorFlow Lite的 GPU 委托(Delegate)加速模型推理
- 弄懂这 5 个问题,拿下 Python 迭代器!
- 1500字,8个问题,彻底理解堆!
- Python画王者荣耀英雄能力雷达图
- Python语言的精华:Itertools库