# dataset-config
[](https://www.lujiahao.com/sponsor)
[](http://www.typescriptlang.org/)
[](https://www.npmjs.com/package/dataset-config)
[](https://www.jsdelivr.com/package/npm/dataset-config)
[](https://codecov.io/gh/ajiho/dataset-config)
[](https://github.com/ajiho/dataset-config/actions/workflows/test.yml)
[](https://vitest.dev/)
[](https://github.com/ajiho/dataset-config/blob/main/LICENSE)
---
遵循 [`dataset`规范](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/dataset) 从dom上提取属性并提供了一些有用的额外功能,灵感来源于[lilconfig](https://github.com/antonk52/lilconfig)、[cosmiconfig](https://github.com/cosmiconfig/cosmiconfig)
> [!NOTE]
> 如果您在开发js插件时,想支持通过`data-*`属性的方式初始化时传递参数,那么这个库对您来说尤其有用,如果您是一个喜欢用原生js开发插件的狂热爱好者,那么把这部分逻辑抽离出来,会让您的库变得更加优雅和简洁。
## 特性
- 零依赖
- 体积极小(minified and brotlied: <= 0.6KB)
- 支持 true/false/number/JSON 自动解析
- 支持前缀过滤
- 支持无限层点语法对象解析
- 支持全局函数解析
- 支持排除字段
- 支持 AMD/CommonJS
## 安装
- [npm](https://www.npmjs.com/package/dataset-config): `npm install dataset-config --save`
- CDN
```html
```
## 用法
想象页面上有以下html结构：
```html
dataset-config Demo
```
然后我们使用`dataset-config`解析数据
```js
import datasetConfig from "dataset-config"
const options = datasetConfig(document.querySelector("#demo"), {})
```
解析得到的`options`结果如下：
```js
const options = {
toggle: "plugin",
touchDelay: 300,
style: { zIndex: 10000 },
position: { x: 100, y: 200 },
draggable: true,
direction: "horizontal",
appMaxItems: 5,
appOtherSomething: "should-ignore",
options: { a: 1, b: [2, 3] },
rect: [2, 3],
config: { foo: { bar: "hello", enable: true } },
onInit: function init() {
console.log("this is global")
},
}
```
## 选项
### `prefix`
有时候您想避免冲突您可以加一个前缀用以区分
```js
let config = datasetConfig(el, {
prefix: "app",
})
```
### `parseFunction`
是否需要解析全局函数,默认为`true`
### `excludeKeys`
排除某些key不会被解析,默认值为:`[]`
## 浏览器支持
具体可以查看[.browserslistrc](https://github.com/ajiho/dataset-config/blob/main/.browserslistrc)文件。
## 变更日志
每个版本的详细更改记录在[CHANGELOG.md](https://github.com/ajiho/dataset-config/blob/main/CHANGELOG.md)中.