【JS库】URI.js
做前端的,应该有不少人都写过操作URL的代码,比如提取问号后面的参数、或者主机名什么的,比如这样:
var url="http://jszai.com/foo?bar=baz",
separator=url.indexOf('?') >-1?'&':'?';
url+=separator+encodeURIComponent("foo")+"="+encodeURIComponent("bar");
这类代码写多了也觉得很烦,如果有一个比较全面的解决方案就好了。
URI.js是一个全能的操作URL的库,可以方便地提取和编辑URL中的任意一部分,而且语法优雅。
它的主要功能包括:
- URI.js支持提取和修改URL中的:协议、用户名、密码、主机名host、端口port、路径path、文件名、文件后缀、“?”后面的query(如?s=abc)、“#”后面的fragment(如#top)等
var url=new URI("http://jszai.com/foo?bar=baz");
url.host();
// => jszai.com url.addQuery("hello","jszai");
// => http://jszai.com/foo?bar=baz&hello=jszai url.query(true);
// => { foo: "bar", hello : "jszai" }- 进行绝对路径和相对路径的计算
var relative_path=new URI('../static/css/style.css');
relative_path.absoluteTo('http://jszai.com/hello-world');
// => http://jszai.com/static/css/style.css - 清理URL(标准化)
var uri=new URI("/hello/foo/woo/.././../world.html");
uri.normalizePathname(); // 清理路径
// uri == "/hello/world.html" - 比较URL
var a="http://example.org/foo/bar.html?foo=bar&hello=world&hello=mars#fragment";
var b="http://exAMPle.org:80/foo/../foo/bar.html?foo=bar&hello=world&hello=mars#fragment"; a!==b;
URI(a).equals(b)===true; // 比较的时候,参数的顺序不一样也没关系
b="http://example.org/foo/bar.html?hello=mars&foo=bar&hello=world&#fragment"; a!==b;
URI(a).equals(b)===true; - 如果不喜欢新建对象的使用方式,它还提供了一系列的静态的工具函数
var result=URI.parse("http://example.org/foo.html");
result==={
protocol:"http",
username:null,
password:null,
hostname:"example.org",
port:null,
path:"/foo.html",
query:null,
fragment:null
}; var result=URI.parseQuery("?foo=bar&hello=world&hello=mars&bam=&yup");
result==={
foo:"bar",
hello:["world","mars"],
bam:"",
yup:null
};
其他特性还有更多,总之,基本上就没有想不到的功能了,但强大也是有代价的,就是源文件比较大(源代码45KB),至于用不用,就只能自己权衡了。
【JS库】URI.js的更多相关文章
- 轻量级的绘制图表js库--Morris.js
Morris.js 是一个轻量级的 JS 库,使用 jQuery 和 Raphaël 来生成各种时序图. 虽说现在移动手机网络已经到了4G,但是在移动web客户端开发过中,为了达到良好的体验效果,需要 ...
- 如何写JS库,JS库写法
前言: 现在javascript库特别多,其写法各式各样,总结几种我们经常见到的,作为自己知识的积累.而目前版本的 JavaScript 并未提供一种原生的.语言级别的模块化组织模式,而是将模块化的方 ...
- 前端学习-使用JS库Leaflet.js生成世界地图并获取标注地址经纬度。
介绍:Leaflet是一个开源的JavaScript库,对移动端友好且对地图有很好的交互性. 大小仅仅只有 33 KB, 同时具有大多数地图所需要的特点. Leaflet设计的非常简单易懂, 同时具有 ...
- 移动开发js库Zepto.js使用中的一些注意点
来自http://chaoskeh.com/blog/some-experience-of-using-zepto.html的参考. 前段时间完成了公司一个产品的 HTML5 触屏版,开发中使用了 Z ...
- 移动开发js库Zepto.js应用详解
从哪里下载 Zepto 地址:http://zeptojs.com/ 中文版地址:http://www.css88.com/doc/zeptojs_api/ 这个问题看起来很蠢,从官网下载不就行了嘛! ...
- typescript调用javascript && URI.js
URI.js URI.js是一个用于处理URL的JavaScript库它提供了一个“jQuery风格”的API(Fluent接口,方法链接)来读写所有常规组件和许多便利方法,如.directory() ...
- 创建自己的共用js库
直至昨晚为止,学习了一个多月的MVC与jQuery,从所做的练习中,发觉jQuery的代码也有跟C#语言一样可以重构,多页面有相同使用的方法函数,均可以放置于一个单独立的js文件或是自定义的js库中. ...
- uri.js的用法事例
来源于:http://smoothprogramming.com/tutorials/get-set-query-string-values-from-url-using-uri-js/ Get or ...
- 数字格式化的 js 库
数字格式化的 js 库 Numeral.js,是一个用于格式化数字和处理数字的 js 库. Tip:目前 Star 有 9.2k,5年以前就没有在更新.其文档写得不很清晰,比如它提供了多语言,但如何切 ...
- js——移动端js事件、zepto.js
1. touchstart : 手指放到屏幕上时触发 2. touchmove : 手指在屏幕上滑动时触发 3. touched : 手指离开屏幕时触发 4. touchcancel : 系统取消to ...
随机推荐
- bug定位
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...
- day7 回顾
1,is == == 比较的是值. is 内存地址.对于int str 来说:存在小数据池的概念.为什么存在小数据池? 节省内存. int -5 ~ 256 str 全部字母,数字与单个字母想乘 数字 ...
- python添加fluent日志记录
istio默认会进行日志的记录,但是仅仅记录到服务.以及服务之间调用的信息,不记录业务日志. 如: 所以需要添加业务日志记录. 1.python引入package fluentmsgpack 2.代码 ...
- hdu 2444(二分图) The Accomodation of Students
http://acm.hdu.edu.cn/showproblem.php?pid=2444 大意是给定n个学生,他们之间可能互相认识,首先判断能不能将这些学生分为两组,使组内学生不认识: 现想将学生 ...
- 使用spec文件语法创建一个rpm
How to create an RPM package/zh-hk < How to create an RPM package 此页面包含 Packaging:ScriptletSnippe ...
- js 立即执行函数
1.我们首先要搞明白:函数表达式和函数声明的区别. 函数表达式:既可以为匿名函数也可以有函数名,但是调用的时候都是通过函数左边的变量func来调用 var func = function(){ ale ...
- BZOJ1226或洛谷2157 [SDOI2009]学校食堂
BZOJ原题链接 洛谷原题链接 注意到\(B[i]\)很小,考虑状压\(DP\). 设\(f[i][j][k]\)表示前\(i - 1\)个人已经拿到菜,第\(i\)个人及其后面\(7\)个人是否拿到 ...
- 最新Dashboard设计实例、技巧和资源集锦,视觉和功能两不误,妥妥的!
Dashboard设计,尽管设计师们叫法各不相同(例如:“数据面板设计”, “控制面板设计”, “仪表盘设计”或“后台界面设计”等等).但,此类设计的最终目都是力求以最直观.最简洁的方式呈现各种信息和 ...
- 摹客 iDoc 12月上半月新功能点评
转眼就到了2018年的最后一个月,小伙伴们是不是都在奋力拼搏做年底的冲刺呢?摹客也没有放慢脚步,不断地优化,给大家带来一个又一个的惊喜.那么,让小摹来带大家看看12月摹客iDoc更新了哪些特色功能: ...
- 关于ueditor 在struts2 中 上传图片 ,未找到上传文件 问题的解决方法
问题原因: ueditor 上传图片需请求imageUp.jsp文件,struts2 自带的拦截器(/*)把所有请求的文件都做了处理,所以导致无法上传图片. 解决方法: 方法一:自定义拦截器,让它在请 ...