简介
@exabyte-io/periodic-table.js 是一款基于 periodic-table-data 进行封装的 JavaScript 库。它为开发者提供了一个友好的 API，用于访问元素周期表的各种信息。
特性
- 提供各种元素信息的查询接口，如元素名称、原子量、电子排布、密度等；
- 支持元素周期表的 PDF、PNG 和 SVG 格式的导出；
- 异步加载元素周期表数据，使用实时的数据源。
安装
@exabyte-io/periodic-table.js 可以通过 npm 进行安装，只需要运行以下命令即可：
npm install @exabyte-io/periodic-table.js --save
使用
引入
在你的项目中引入 @exabyte-io/periodic-table.js，示例代码如下：
import PeriodicTable from "@exabyte-io/periodic-table.js";
初始化
PeriodicTable 类的构造函数接受一个可选的配置对象。你可以使用此对象来配置数据源的 URL 等信息。示例代码如下：
const periodicTable = new PeriodicTable({
dataUrl: "https://my.periodictable.api/data"
});查询元素信息
PeriodicTable 实例提供了许多方法来查询元素的信息。您可以使用这些方法之一来检索想要的信息，例如 getSymbol、getAtomicNumber、getAtomicMass 等。以下是一些示例代码：
// 查询氧气的原子量
const oxygenAtomicMass = periodicTable.getAtomicMass("O");
// 查询碳原子的编号
const carbonAtomicNumber = periodicTable.getAtomicNumber("C");
// 查询锂元素的电子排布
const lithiumElectronConfig = periodicTable.getElectronConfiguration("Li");导出图像
你可以使用实例方法 saveAsPDF、saveAsPNG 和 saveAsSVG，来导出周期表的 PDF、PNG 和 SVG 格式的图像。以下是一个示例代码：
periodicTable.saveAsPNG({
fileName: "periodic-table",
width: 1000,
height: 700,
callback: () => console.log("PNG file saved successfully!")
});深入
使用异步加载数据
@exabyte-io/periodic-table.js 通过异步加载元素周期表数据。在默认情况下，该库使用一个预先打包好的数据源。但是，如果您想使用自己的数据源，您需要在构造函数参数中为 dataUrl 属性指定一个 URL。
new PeriodicTable({
dataUrl: "https://my.periodictable.api/data"
});使用回调
当您用 saveAs... 方法导出图像时，您可以提供 callback 函数，在导出完成后执行。下面是一个示例代码：
periodicTable.saveAsPNG({
fileName: "periodic-table",
width: 1000,
height: 700,
callback: () => console.log("PNG file saved successfully!")
});自定义颜色方案
如果您想要应用自定义的颜色方案，可以使用 setColors 方法。以下是一个示例代码：
-- -------------------- ---- ------- ----- ------ - ------------------------------ ------------------------- ----------- ---------- ---------- -------- ------------------ ----------- ---------- ---------- -------- -------------- ----------- ---------- ---------- -------- ------------------ -------- ------- ------- ----------- -------------------- ----------- ---------- ---------- ----------- --------------------------- ----------- ---------- ---------- ---------- ---------------------- ---
自定义数据源
您可以使用 setData 方法来将自己的元素周期表数据注入到 PeriodicTable 实例中。以下是一个示例代码：
const customData = { /* some custom data object */ }
periodicTable.setData(customData);结论
@exabyte-io/periodic-table.js 是一款强大、易于使用和高度可定制化的 JavaScript 库，使开发者可以轻松地访问元素周期表的各种信息。如果您正在寻找一款可靠和功能强大的 JavaScript 库，那么 @exabyte-io/periodic-table.js 绝对是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/102571