做前端的,应该有不少人都写过操作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. docker-ce-17.09 数据卷和数据卷容器

    docker容器中管理数据两种方式:1.数据卷(Data Volumes)2.数据卷容器(Data Volume Dontainers) 一.数据卷特性:1.数据卷可以在容器之间共享和重用2.对数据卷 ...

  2. avalon 双向绑定在新版chrome中不能同步中文输入

    1>1.x和2.x都有这样的问题,输入中文无法同步到VM,演示地址 http://codepen.io/roscoe054/pen/XXKYMj?editors=1111 chrome 版本 5 ...

  3. sqlserver中对于特定数据字段定义特定的数据类型

    char和varchar:汉字占两个字节,英文.数字或字符占一个 比如: 性别:男   女 可以定义为:char(2)或者是varchar(2)    因为性别是中文,中文占两个字节 nchar和nv ...

  4. c# 关于字典dictionary 按时间排序

    上文中说到sortedlist 排序是键排序,不符合项目要求问题,接着使用字典dictionary 对value 为时间按照升序排序,问题解决.中间涉及到linq的使用.还有其他的写法,但发现下边的写 ...

  5. ES6 Proxy的应用场景

    一.相关API Proxy Reflect 二.Proxy应用场景 1.数据校验 表单提交的时候做数据校验,例如年龄是不是满足条件,数据类型是不是满足要求等等,这场场景非常适合使用Proxy. 下面展 ...

  6. Linux Centos7 虚拟机上网设置

    一.Windows下网卡,共享上网模式 二.虚拟机VMnet8的网卡模 三.Linux 下配置网卡 命令: vi /etc/sysconfig/network-scripts/ifcfg-ens33 ...

  7. Android——Activity跳转

    Activity_main.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayou ...

  8. 为什么CPU的主频止步于4GHz?

    你对CPU的认识大概还停留在奔腾4年代吧……奔腾4最终止步于3.8GHz,原计划推出的4GHz奔腾4处理器也被胎死腹中.英特尔意识到处理器研发道路上走入了“唯主频论”的误区,2004年10月,英特尔总 ...

  9. 定时任务起的java进程没有释放导致oracle的问题not availavle & out of memory

    最近发现一个问题,我们设置了一个定时任务,用于每天的对账,每天的对账都是启动一个java程序(jar包),时间久了,出现下面的问题: 有很多CardPaymentBatch.jar进程驻留在系统当中, ...

  10. 修改别人写的Hibernate数据库操作代码

    最近正在维护别人写的一个关于Hibernate操作数据库的项目,在运行测试的时候(向表中插入记录),报了一个错误:cannot insert a null into column(XXX字段名,下文统 ...