【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中的任意一部分,而且语法优雅。

它的主要功能包括:

  1. URI.js支持提取和修改URL中的:协议用户名密码主机名host端口port路径path文件名文件后缀、“?”后面的query(如?s=abc)、“#”后面的fragment(如#top)等
  2. 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" }
  3. 进行绝对路径和相对路径的计算

    var relative_path=new URI(‘../static/css/style.css‘);
    relative_path.absoluteTo(‘http://jszai.com/hello-world‘);
    // => http://jszai.com/static/css/style.css
  4. 清理URL(标准化
    var uri=new URI("/hello/foo/woo/.././../world.html");
    uri.normalizePathname();  // 清理路径
    // uri == "/hello/world.html"
  5. 比较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;
  6. 如果不喜欢新建对象的使用方式,它还提供了一系列的静态的工具函数
    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),至于用不用,就只能自己权衡了。

时间: 2024-11-08 12:15:12

【JS库】URI.js的相关文章

移动端的内容滑块js库 swipe.js

swipe.js 是一个轻量级的移动端内容滑块,类似于pc端的slide.js,用于实现轮播广告或其他内容滑动模块 ,支持移动端屏幕滑动手势操作.此库不依赖于任何其他的js库,可独立使用 使用swipe.js时只需将下载好的文件引用到页面,然后在页面中写好对应的结构 <div id="slider" class="swipe"> <div class="swipe-wrap"> <div></div>

前端学习-使用JS库Leaflet.js生成世界地图并获取标注地址经纬度。

介绍:Leaflet是一个开源的JavaScript库,对移动端友好且对地图有很好的交互性. 大小仅仅只有 33 KB, 同时具有大多数地图所需要的特点. Leaflet设计的非常简单易懂, 同时具有很好的性能和易用性. 它在桌面端和移动端都工作的相当高效,并有大量的插件用于扩张Leaflet的功能.微信公众号:673399718嘻嘻demo图如下: 使用leaflet.js生成世界地图非常方便,配置参数记录下,有兴趣的可以看看本例中引入jquery操作dom.首先:在页面的头部引入css文件c

移动开发js库Zepto.js使用中的一些注意点

来自http://chaoskeh.com/blog/some-experience-of-using-zepto.html的参考. 前段时间完成了公司一个产品的 HTML5 触屏版,开发中使用了 Zepto 这个著名的 DOM 操作库. 为什么不是 jQuery 呢?因为 jQuery 的目标是兼容所有主流浏览器,这就意味着它的大量代码对移动端的浏览器是无用或者低效的. 而 Zepto 只针对移动端浏览器编写,因此体积更小.效率更高,更重要的是,它的 API 完全仿照 jQuery ,所以学习

html5轻量级操纵和制作SVG动画的js库-svg.js

svg.js是一个轻量级的操纵和制作SVG动画的js插件库.svg.js可以生成SVG图形.图像.文字和路径等等.svg.js还可以用于制作svg动画和互动拖拽等效果. svg.js不依赖与jQuery等外部插件库,它遵循麻省理工学院的许可( MIT License)下许可证的条款. 在线演示:http://www.htmleaf.com/Demo/201501301302.html 下载地址:http://www.htmleaf.com/html5/SVG/201501301301.html

移动开发js库Zepto.js应用详解

从哪里下载 Zepto 地址:http://zeptojs.com/ 中文版地址:http://www.css88.com/doc/zeptojs_api/ 这个问题看起来很蠢,从官网下载不就行了嘛!可是你有没有发现下载链接上面有行小字呢? 在这个 README 里面你会惊奇地发现,Zepto 源码中有 14 个模块,而官网提供的标准版里面只有 7 个模块!而且居然不包含对移动端开发非常重要的 touch 模块(提供对触摸事件的支持)! 所以我的建议是,不要从官网下载,而是从 Github 下载

uri.js的用法事例

来源于:http://smoothprogramming.com/tutorials/get-set-query-string-values-from-url-using-uri-js/ Get or Set Query String Values from URL using URI.js URI.js is a mature javascript library for manipulation of URI. URI.js provides methods to get or set qu

创建自己的共用js库

直至昨晚为止,学习了一个多月的MVC与jQuery,从所做的练习中,发觉jQuery的代码也有跟C#语言一样可以重构,多页面有相同使用的方法函数,均可以放置于一个单独立的js文件或是自定义的js库中. 在使用时,引用此库文件即可.举个简单的例子,如前面介绍的两个下拉列表联动的功能,不管是在MVC添加,还是编辑时,均需要写上几个相同的函数来实现.为了js代码没有冗余.我们就可以重构它们了. 在MVC应用程序下的Scripts目录下,创建一个insus.common.utility.js库. js类

JS页面快捷键库hotkeys.js

网友提供了一个好用的快捷键库,没有任何依赖,这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键,它没有依赖,压缩只有只有(~3kb). 这里也要特别感谢园友kacper的提醒与提供参考. 下面我把源码贴出来,仅供自己和大家学习参考. 下面给出hotkeys.js文件内容: //IE对indexOf方法的支持 if(!Array.indexOf){ Array.prototype.indexOf = function(obj){ for(var i=0; i<this.leng

JQuery之JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案

JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案 JQuery的版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的版本</title> <