【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 ...
随机推荐
- Linux后台运行进程
方式一: /bin/bash /var/www/html/crontab.sh & 缺点:终端关闭的话,进程也会关闭. 方式二: nohup /bin/bash /var/www/html/c ...
- day7 回顾
1,is == == 比较的是值. is 内存地址.对于int str 来说:存在小数据池的概念.为什么存在小数据池? 节省内存. int -5 ~ 256 str 全部字母,数字与单个字母想乘 数字 ...
- Linux yum源完全配置
一.简介 yum主要功能是更方便的添加/删除/更新RPM包,自动解决包的依赖性问题,便于管理大量系统的更新问题,其理念是使用一个中心仓库(repository)管理一部分甚至一个distributio ...
- (转)HTTP 错误 404.2 - Not Found 由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置,无法提供您请求的页面
详细错误:HTTP 错误 404.2 - Not Found. 由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置,无法提供您请求的页面. 出现环境:win7 + IIS7.0 解决办法 ...
- VS Installer教程
本文主要讲解利用VS2010下的Visual Studio Installer打包Zigbee程序(VS2010编写)的过程. 1.打开Zigbee程序,在解决方案中添加“新建项目”-->其他项 ...
- 【已处理完】Centos 6.5版本,df -h出来的容量与du -sh的容量不对应是怎么会事呢?
问题如题,df -h 出来的容量与du -sh 查看的容量信息不一样,是那里出了问题了吗? 下面分别是du -sh *与df -h出来的结果 [root@mail /]# du -sh * 6.2M ...
- How to Change MAC Address on Ubuntu
1 Open Terminal. 2 Log in as root so type: sudo -i and then write your password. 3 View your cur ...
- [Python] Python教程
http://www.runoob.com/python/python-tutorial.html
- Spring IOC(五)依赖注入
Spring IOC(五)依赖注入 Spring 系列目录(https://www.cnblogs.com/binarylei/p/10198698.html) 一.autowire 五种注入方式测试 ...
- R.java的生成规则
0x7f010000 开头的是attr 0x7f050000 开头的是anim 0x7f0b0002 开头的是bool 0x7f020000 开头的是drawable 0x7f060000 开头的是i ...