npm 包 urijs 使用教程

在前端开发中，经常需要对 URL 进行解析和操作。urijs 是一个简单易用的 JavaScript 库，可以方便地进行 URL 的解析、构建和修改。本文介绍了如何使用 npm 安装和使用 urijs 库，并提供了详细的示例代码。

安装 urijs

使用 npm 可以轻松安装 urijs 库。打开命令行界面，输入以下命令即可：

npm install urijs

在项目中引入 urijs

一旦安装了 urijs，就可以在前端项目中引入它。最简单的方法是在 HTML 文件中添加以下代码：

<script src="node_modules/urijs/src/URI.js"></script>

如果使用 webpack 或者类似工具，可以像下面这样在 JavaScript 文件中引入：

const URI = require('urijs');

或者使用 ES6 的 import 语法：

import URI from 'urijs';

解析 URL

使用 urijs 可以轻松地将 URL 字符串解析为对象，方便获取其中的各个部分。

const url = new URI('http://example.com/path/to/file.html?key1=value1&key2=value2#hash');
console.log(url.protocol()); // 输出 "http"
console.log(url.host()); // 输出 "example.com"
console.log(url.path()); // 输出 "/path/to/file.html"
console.log(url.query()); // 输出 "key1=value1&key2=value2"
console.log(url.fragment()); // 输出 "hash"

此外，urijs 还提供了更灵活的解析方式，例如可以将相对 URL 转换为绝对 URL：

const base = new URI('http://example.com');
const url = new URI('/path/to/file.html?key1=value1&key2=value2#hash');
console.log(url.absoluteTo(base).toString()); // 输出 "http://example.com/path/to/file.html?key1=value1&key2=value2#hash"

构建 URL

除了解析 URL，urijs 也可以方便地构建 URL。只需要使用链式调用方法，逐步设置 URL 的各个部分即可。

-- -------------------- ---- -------
----- --- - --- -----
    -----------------
    ------------------------
    ---------------------------
    --------
        ----- ---------
        ----- --------
    --
    ------------------
---------------------------- -- -- -------------------------------------------------------------------

修改 URL

urijs 不仅可以解析和构建 URL，还可以对现有的 URL 进行修改。只需要使用类似构建 URL 的方式，设置需要修改的部分即可。

const url = new URI('http://example.com/path/to/file.html?key1=value1&key2=value2#hash')
    .setQuery('key1', 'new_value1')
    .setQuery('key3', 'value3');
console.log(url.toString()); // 输出 "http://example.com/path/to/file.html?key1=new_value1&key2=value2&key3=value3#hash"

上述代码中，使用 setQuery 方法修改了原来的 query 参数，并添加了一个新的参数。其他修改 URL 的方法也非常类似，例如可以使用 setProtocol、setHostname 和 setFragment 等方法。

总结

urijs 提供了方便的 URL 解析、构建和修改功能，使得前端开发更加高效和简洁。掌握 urijs 的使用方法，可以帮助我们更快地处理 URL 相关问题，提高开发效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/42742