从 HTML 传递 JS 参数

Question

这个问题更多的是关于良好做法。我想编写一个 JS 模块来将数学函数绘制到 canvas-elements 上。我知道那里有几个很好的库，但我是 JavaScript 新手并且喜欢数学。

用户应该尽可能少地使用 JavaScript，我想知道一个好的 JS 库会如何表现。用户是否必须为库应该使用的画布元素编写特定的id？用户应该怎么做才能在网格打开和绿色轴的情况下从 x = -1 到 x = 1 绘制图？

这是一个好的行为吗？

<canvas id="plotJS, -1, 1, true, green">

我很确定这很糟糕，因此我在问。在html- 代码中是否有一种方便的方法可以将参数传递给 JS？类似的东西

<canvas id="whatever-i-want" plotJS-xMin="-1" plotJS-xMax="1" plotJS-grid="true" ... >

这通常是怎么做的？

Answer 1

使用@SLaks 建议的JSON、data-* 属性的方法。在html，data 属性值是单个JSON 字符串，可以使用HTMLElement.dataset、JSON.parse() 在javascript 访问； dataset-plot-js 也可以使用JSON.stringify() 在元素处重置，参数为data-plot-js 属性字符串解析为javascript 对象

var canvas = document.getElementById("canvas");

var data = JSON.parse(canvas.dataset.plotJs);

console.log(data);

// change `xMin`
data.xMin = "-2";

canvas.dataset.plotJs = JSON.stringify(data);

console.log(canvas.dataset.plotJs);

<canvas id="canvas" data-plot-js='{"xMin":"-1","xMax":"1","grid":"true","color":"green"}'></canvas>