前端开发在日常开发中大量依赖第三方 npm 包，例如 webpack、babel、jquery 等。其中，hops-info 包能够提供项目中与浏览器、运行环境相关的信息，具有非常便捷的使用方式。本文将提供 hops-info 包的使用教程，从安装、使用和示例入手，帮助您快速掌握 hops-info 的使用。
1. hops-info 的安装
hops-info 采用 npm 包管理器，安装 hops-info 非常方便。在控制台输入以下命令即可完成安装。
$ npm install hops-info
2. hops-info 的基本使用方式
hops-info 提供了一些方法，用于获取浏览器、运行环境、操作系统等相关的信息。以下是 hops-info 一些主要的、可供使用的方法：
2.1 获取浏览器名称和版本
import { getBrowser } from 'hops-info';
const browserInfo = getBrowser();
console.log(`浏览器名称：${browserInfo.name}, 版本号：${browserInfo.version}`);上述代码将会打印当前浏览器名称和版本。如当前为 Chrome 浏览器，其输出结果如下：
浏览器名称：Chrome, 版本号：82.0.4083.0
2.2 获取操作系统名称和版本
import { getOS } from 'hops-info';
const osInfo = getOS();
console.log(`操作系统名称：${osInfo.name}, 版本号：${osInfo.version}`);运行代码后，可以获得当前操作系统名称和版本信息，例如：
操作系统名称：Windows 10, 版本号：10.0
2.3 获取屏幕宽度和高度
import { getScreen } from 'hops-info';
const screenInfo = getScreen();
console.log(`屏幕宽度：${screenInfo.width}, 屏幕高度：${screenInfo.height}`);屏幕宽度：1366, 屏幕高度：768
2.4 获取当前语言和时区
import { getLanguage, getTimezone } from 'hops-info';
const langInfo = getLanguage();
console.log(`当前语言：${langInfo}`);
const tzInfo = getTimezone();
console.log(`当前时区：${tzInfo}`);当前语言：zh-CN 当前时区：Asia/Shanghai
通过以上几个示例，您对 hops-info 的基本使用方式应该有了一定的了解。
3. hops-info 的高级应用
3.1 使用 sessionstorage 存储 hops-info 中的信息
可以使用 hops-info 中提供的方法获取用户信息，这些信息可以保存到 sessionstorage 中，以便后续使用。
-- -------------------- ---- ------- ------ - ----------- ------ --------- - ---- ------------ ----- -------- - - -------- ------------- --- -------- ------- ------------ -- ----------------------------------- --------------------------
获取保存的用户信息：
const userInfoStr = sessionStorage.getItem('USER_INFO');
const userInfo = JSON.parse(userInfoStr);
console.log(userInfo);输出：
-- -------------------- ---- -------
-
---------- -
------- ---------
---------- -------------
--
----- -
------- -------- ----
---------- ------
--
--------- -
-------- -----
--------- ---
-
-3.2 根据浏览器不同引入不同的模块
在开发中，为了兼容不同浏览器，常常需要使用不同的库或代码。可以使用 hops-info 来判断当前浏览器信息，以选择合适的库或代码进行引入。
假设需要对不同浏览器的滚动条样式进行设置，只需根据不同浏览器的信息引入相应的库即可。以下示例以 perfect-scrollbar 插件为例。
-- -------------------- ---- ------- ------ - ---------- - ---- ------------ ----- ----------- - ------------- -- ----------------- --- ---------- - -- -- ------- --- --------- -- ------ -------------------------- - ---- - -- ---------- --------- -- ------ ------------------------- -
经过上述处理后，可以保证页面在不同浏览器下有着对应的滚动条样式。而且这种操作方式更为优雅。
总结
hops-info 提供了一个简单、方便、可靠的方法来获取浏览器、操作系统、屏幕宽高等相关信息，使用场景非常广泛。本文详细介绍了 hops-info 的安装、基本使用以及高级应用，希望对您在开发过程中快速获取信息有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb4ebb5cbfe1ea061139c