dataset-config
Advanced tools
Parse HTML data attributes into a structured object with automatic type conversion.
遵循 dataset规范 从dom上提取属性并提供了一些有用的额外功能,灵感来源于lilconfig、cosmiconfig
[!NOTE] 如果您在开发js插件时,想支持通过
data-*属性的方式初始化时传递参数,那么这个库对您来说尤其有用,如果您是一个喜欢用原生js开发插件的狂热爱好者,那么把这部分逻辑抽离出来,会让您的库变得更加优雅和简洁。
npm install dataset-config --save<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中.
FAQs
Parse HTML data attributes into a structured object with automatic type conversion.
We found that dataset-config demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A critical vm2 sandbox escape can allow untrusted JavaScript to break isolation and execute commands on the host Node.js process.
Research
Five malicious NuGet packages impersonate Chinese .NET libraries to deploy a stealer targeting browser credentials, crypto wallets, SSH keys, and local files.
Security News
pnpm 11 turns on a 1-day Minimum Release Age and blocks exotic subdeps by default, adding safeguards against fast-moving supply chain attacks.