dataset-config

v1.2.0

Published

2 months ago

Parse HTML data attributes into a structured object with automatic type conversion.

Downloads

dataset-config

遵循 dataset规范从dom上提取属性并提供了一些有用的额外功能,灵感来源于lilconfig、cosmiconfig

[!NOTE] 如果您在开发js插件时,想支持通过data-*属性的方式初始化时传递参数,那么这个库对您来说尤其有用,如果您是一个喜欢用原生js开发插件的狂热爱好者,那么把这部分逻辑抽离出来,会让您的库变得更加优雅和简洁。

特性

零依赖
体积极小(minified and brotlied: <= 0.6KB)
支持 true/false/number/JSON 自动解析
支持前缀过滤
支持无限层点语法对象解析
支持全局函数解析
支持排除字段
支持 AMD/CommonJS

安装

npm: npm install dataset-config --save

CDN

<script src="https://unpkg.com/dataset-config@latest/dist/dataset-config.browser.min.js"></script>
<!-- or -->
<script src="https://cdn.jsdelivr.net/npm/dataset-config@latest/dist/dataset-config.browser.min.js"></script>

用法

想象页面上有以下html结构：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>dataset-config Demo</title>
  </head>
  <body>
    <div
      id="demo"
      data-toggle="plugin"
      data-touch-delay="300"
      data-style.z-index="10000"
      data-position.x="100"
      data-position.y="200"
      data-draggable="true"
      data-direction="horizontal"
      data-app-max-items="5"
      data-app-other-something="should-ignore"
      data-options='{"a":1,"b":[2,3]}'
      data-rect="[2,3]"
      data-config.foo.bar="hello"
      data-config.foo.enable="true"
      data-on-init="init"
    ></div>

    <script>
      function init() {
        console.log("this is global")
      }
    </script>
  </body>
</html>

然后我们使用dataset-config解析数据

import datasetConfig from "dataset-config"

const options = datasetConfig(document.querySelector("#demo"), {})

解析得到的options结果如下：

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`

有时候您想避免冲突您可以加一个前缀用以区分

let config = datasetConfig(el, {
  prefix: "app",
})

`parseFunction`

是否需要解析全局函数,默认为true

`excludeKeys`

排除某些key不会被解析,默认值为:[]

浏览器支持

具体可以查看.browserslistrc文件。

变更日志

每个版本的详细更改记录在CHANGELOG.md中.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

dataset-config

特性

安装

用法

选项

prefix

parseFunction

excludeKeys

浏览器支持

变更日志

`prefix`

`parseFunction`

`excludeKeys`