简介
@exabyte-io/periodic-table.js 是一款基于 periodic-table-data 进行封装的 JavaScript 库。它为开发者提供了一个友好的 API，用于访问元素周期表的各种信息。
特性
- 提供各种元素信息的查询接口，如元素名称、原子量、电子排布、密度等；
- 支持元素周期表的 PDF、PNG 和 SVG 格式的导出；
- 异步加载元素周期表数据，使用实时的数据源。
安装
@exabyte-io/periodic-table.js 可以通过 npm 进行安装，只需要运行以下命令即可：
--- ------- ----------------------------- ------
使用
引入
在你的项目中引入 @exabyte-io/periodic-table.js，示例代码如下：
------ ------------- ---- --------------------------------
初始化
PeriodicTable 类的构造函数接受一个可选的配置对象。你可以使用此对象来配置数据源的 URL 等信息。示例代码如下：
----- ------------- - --- --------------- -------- ----------------------------------- ---
查询元素信息
PeriodicTable 实例提供了许多方法来查询元素的信息。您可以使用这些方法之一来检索想要的信息，例如 getSymbol、getAtomicNumber、getAtomicMass 等。以下是一些示例代码：
-- -------- ----- ---------------- - --------------------------------- -- -------- ----- ------------------ - ----------------------------------- -- ---------- ----- --------------------- - ---------------------------------------------
导出图像
你可以使用实例方法 saveAsPDF、saveAsPNG 和 saveAsSVG，来导出周期表的 PDF、PNG 和 SVG 格式的图像。以下是一个示例代码：
------------------------- --------- ----------------- ------ ----- ------- ---- --------- -- -- ---------------- ---- ----- --------------- ---
深入
使用异步加载数据
@exabyte-io/periodic-table.js 通过异步加载元素周期表数据。在默认情况下，该库使用一个预先打包好的数据源。但是，如果您想使用自己的数据源，您需要在构造函数参数中为 dataUrl 属性指定一个 URL。
--- --------------- -------- ----------------------------------- ---
使用回调
当您用 saveAs... 方法导出图像时，您可以提供 callback 函数，在导出完成后执行。下面是一个示例代码：
------------------------- --------- ----------------- ------ ----- ------- ---- --------- -- -- ---------------- ---- ----- --------------- ---
自定义颜色方案
如果您想要应用自定义的颜色方案，可以使用 setColors 方法。以下是一个示例代码：
----- ------ - ------------------------------ ------------------------- ----------- ---------- ---------- -------- ------------------ ----------- ---------- ---------- -------- -------------- ----------- ---------- ---------- -------- ------------------ -------- ------- ------- ----------- -------------------- ----------- ---------- ---------- ----------- --------------------------- ----------- ---------- ---------- ---------- ---------------------- ---
自定义数据源
您可以使用 setData 方法来将自己的元素周期表数据注入到 PeriodicTable 实例中。以下是一个示例代码：
----- ---------- - - -- ---- ------ ---- ------ -- - ----------------------------------
结论
@exabyte-io/periodic-table.js 是一款强大、易于使用和高度可定制化的 JavaScript 库，使开发者可以轻松地访问元素周期表的各种信息。如果您正在寻找一款可靠和功能强大的 JavaScript 库，那么 @exabyte-io/periodic-table.js 绝对是一个不错的选择。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/102571