做前端的,应该有不少人都写过操作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),至于用不用,就只能自己权衡了。

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

  1. 轻量级的绘制图表js库--Morris.js

    Morris.js 是一个轻量级的 JS 库,使用 jQuery 和 Raphaël 来生成各种时序图. 虽说现在移动手机网络已经到了4G,但是在移动web客户端开发过中,为了达到良好的体验效果,需要 ...

  2. 如何写JS库,JS库写法

    前言: 现在javascript库特别多,其写法各式各样,总结几种我们经常见到的,作为自己知识的积累.而目前版本的 JavaScript 并未提供一种原生的.语言级别的模块化组织模式,而是将模块化的方 ...

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

    介绍:Leaflet是一个开源的JavaScript库,对移动端友好且对地图有很好的交互性. 大小仅仅只有 33 KB, 同时具有大多数地图所需要的特点. Leaflet设计的非常简单易懂, 同时具有 ...

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

    来自http://chaoskeh.com/blog/some-experience-of-using-zepto.html的参考. 前段时间完成了公司一个产品的 HTML5 触屏版,开发中使用了 Z ...

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

    从哪里下载 Zepto 地址:http://zeptojs.com/ 中文版地址:http://www.css88.com/doc/zeptojs_api/ 这个问题看起来很蠢,从官网下载不就行了嘛! ...

  6. typescript调用javascript && URI.js

    URI.js URI.js是一个用于处理URL的JavaScript库它提供了一个“jQuery风格”的API(Fluent接口,方法链接)来读写所有常规组件和许多便利方法,如.directory() ...

  7. 创建自己的共用js库

    直至昨晚为止,学习了一个多月的MVC与jQuery,从所做的练习中,发觉jQuery的代码也有跟C#语言一样可以重构,多页面有相同使用的方法函数,均可以放置于一个单独立的js文件或是自定义的js库中. ...

  8. uri.js的用法事例

    来源于:http://smoothprogramming.com/tutorials/get-set-query-string-values-from-url-using-uri-js/ Get or ...

  9. 数字格式化的 js 库

    数字格式化的 js 库 Numeral.js,是一个用于格式化数字和处理数字的 js 库. Tip:目前 Star 有 9.2k,5年以前就没有在更新.其文档写得不很清晰,比如它提供了多语言,但如何切 ...

  10. js——移动端js事件、zepto.js

    1. touchstart : 手指放到屏幕上时触发 2. touchmove : 手指在屏幕上滑动时触发 3. touched : 手指离开屏幕时触发 4. touchcancel : 系统取消to ...

随机推荐

  1. bug定位

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  2. day7 回顾

    1,is == == 比较的是值. is 内存地址.对于int str 来说:存在小数据池的概念.为什么存在小数据池? 节省内存. int -5 ~ 256 str 全部字母,数字与单个字母想乘 数字 ...

  3. python添加fluent日志记录

    istio默认会进行日志的记录,但是仅仅记录到服务.以及服务之间调用的信息,不记录业务日志. 如: 所以需要添加业务日志记录. 1.python引入package fluentmsgpack 2.代码 ...

  4. hdu 2444(二分图) The Accomodation of Students

    http://acm.hdu.edu.cn/showproblem.php?pid=2444 大意是给定n个学生,他们之间可能互相认识,首先判断能不能将这些学生分为两组,使组内学生不认识: 现想将学生 ...

  5. 使用spec文件语法创建一个rpm

    How to create an RPM package/zh-hk < How to create an RPM package 此页面包含 Packaging:ScriptletSnippe ...

  6. js 立即执行函数

    1.我们首先要搞明白:函数表达式和函数声明的区别. 函数表达式:既可以为匿名函数也可以有函数名,但是调用的时候都是通过函数左边的变量func来调用 var func = function(){ ale ...

  7. BZOJ1226或洛谷2157 [SDOI2009]学校食堂

    BZOJ原题链接 洛谷原题链接 注意到\(B[i]\)很小,考虑状压\(DP\). 设\(f[i][j][k]\)表示前\(i - 1\)个人已经拿到菜,第\(i\)个人及其后面\(7\)个人是否拿到 ...

  8. 最新Dashboard设计实例、技巧和资源集锦,视觉和功能两不误,妥妥的!

    Dashboard设计,尽管设计师们叫法各不相同(例如:“数据面板设计”, “控制面板设计”, “仪表盘设计”或“后台界面设计”等等).但,此类设计的最终目都是力求以最直观.最简洁的方式呈现各种信息和 ...

  9. 摹客 iDoc 12月上半月新功能点评

    转眼就到了2018年的最后一个月,小伙伴们是不是都在奋力拼搏做年底的冲刺呢?摹客也没有放慢脚步,不断地优化,给大家带来一个又一个的惊喜.那么,让小摹来带大家看看12月摹客iDoc更新了哪些特色功能: ...

  10. 关于ueditor 在struts2 中 上传图片 ,未找到上传文件 问题的解决方法

    问题原因: ueditor 上传图片需请求imageUp.jsp文件,struts2 自带的拦截器(/*)把所有请求的文件都做了处理,所以导致无法上传图片. 解决方法: 方法一:自定义拦截器,让它在请 ...