URI.js 多功能浏览器 URL 操作库

Question

作为前端开发者，经常要操作 URL 地址，比如下面的代码：

var url = "http://example.org/foo?bar=baz";
var separator = url.indexOf('?') > -1 ? '&' : '?';

url += separator + encodeURIComponent("foo") + "=" + encodeURIComponent("bar");

通过使用 URI.js 我们可以把工作变得很简单：

var url = new URI("http://example.org/foo?bar=baz");
url.addQuery("foo", "bar");

URI.js 就是为了简化我们对 URL 的操作。

API 示例

// mutating URLs
URI("http://example.org/foo.html?hello=world")
  .username("rodneyrehm")
    // -> http://rodneyrehm@example.org/foo.html?hello=world
  .username("")
    // -> http://example.org/foo.html?hello=world
  .directory("bar")
    // -> http://example.org/bar/foo.html?hello=world
  .suffix("xml")
    // -> http://example.org/bar/foo.xml?hello=world
  .query("")
    // -> http://example.org/bar/foo.xml
  .tld("com")
    // -> http://example.com/bar/foo.xml
  .query({ foo: "bar", hello: ["world", "mars"] });
    // -> http://example.com/bar/foo.xml?foo=bar&hello=world&hello=mars

// cleaning things up
URI("?&foo=bar&&foo=bar&foo=baz&")
  .normalizeQuery();
    // -> ?foo=bar&foo=baz

// working with relative paths
URI("/foo/bar/baz.html")
  .relativeTo("/foo/bar/world.html");
    // -> ./baz.html

URI("/foo/bar/baz.html")
  .relativeTo("/foo/bar/sub/world.html")
    // -> ../baz.html
  .absoluteTo("/foo/bar/sub/world.html");
    // -> /foo/bar/baz.html

// URI Templates
URI.expand("/foo/{dir}/{file}", {
  dir: "bar",
  file: "world.html"
});
// -> /foo/bar/world.html

使用 URI.js

URI.js 在没有插件的情况下大约 7KB 的压缩重量，如果你使用所有的扩展，你最终在大约 13 kb。可以通过 bower 或者 npm 安装

# using bower
bower install uri.js

# using npm
npm install urijs

在浏览器中使用

你可以直接引入压缩版的 URI.js 文件

<script src=".../URI.min.js"></script>

Node.js 和 NPM

用 npm install urijs 或添加 urijs 中的依赖项 package.json。

// load URI.js
var URI = require('urijs');
// load an optional module (e.g. URITemplate)
var URITemplate = require('urijs/src/URITemplate');

URI("/foo/bar/baz.html")
  .relativeTo("/foo/bar/sub/world.html")
    // -> ../baz.html

RequireJS

克隆 URI.js 存储库或使用包管理器将 URI.js 导入到您的项目中。

require.config({
  paths: {
    urijs: 'where-you-put-uri.js/src'
  }
});

require(['urijs/URI'], function(URI) {
  console.log("URI.js and dependencies: ", URI("//amazon.co.uk").is('sld') ? 'loaded' : 'failed');
});
require(['urijs/URITemplate'], function(URITemplate) {
  console.log("URITemplate.js and dependencies: ", URITemplate._cache ? 'loaded' : 'failed');
});

相关链接

• 官网：http://medialize.github.io/URI.js/