从 HTML 传递 JS-参数

Pass JS-arguments from HTML

本文关键字：参数 JS- 传递 HTML      更新时间：2023-09-26

这个问题更多的是关于良好实践。我想编写一个JS模块来将数学函数绘制到canvas元素上。我知道市面上有几个很好的库，但我是 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" ... >

这通常是怎么做到的？

一种使用 JSON 的方法，data-* @SLaks 建议的属性。在html，data属性值是单个JSON字符串，可通过HTMLElement.dataset、JSON.parse() javascript访问;还可以使用JSON.stringify()在元素上重置dataset-plot-js参数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>

相关文章：