javascript - 如何运行作为属性嵌入到 DOM 元素中的脚本？

我正在使用一个很棒的可视化库，叫做 d3，我发现自己的代码看起来很像下面的代码:

<span id="sparkline"></span>
<script type="text/javascript">
  drawSparkline('#target', [10, 20, 30, 40]);
  // or
  drawSparkline('#target', 'http://data.com/location'));
</script>

有没有办法通过嵌入直接作用于 dom 元素的代码作为属性来使其更具表现力？也许是这样的:

<span onload="drawSparkline(this, [10, 20, 30, 40])"></span>
<span onload="drawSparkline(this, 'http://data.com/location')"></span>

也许是这样的:

<span data-onload="drawSparkline(this, [10, 20, 30, 40])"></span>

在 jQuery 开头的一些东西，如:

$(document).ready(function() {
  $('*[data-onload]').each( eval the onload? );
});

什么是合适的方式？

最佳答案

我会更明确地说明您正在编码的不同类型的数据:

<span class="sparkline" data-values="10,20,30,40"></span>
<span class="sparkline" data-url="http://data.com/location"></span>

然后，当您迭代它们时，检查特定类型的数据:

$(".sparkline").each(function() {
    var $source = $(this),
        values = $source.data("values"),
        url = $source.data("url");
    if (values) {
        // JSON.parse() is okay too, but if you're just
        // encoding lists of numbers this will be faster
        var data = values.split(", ").map(parseFloat);
        drawSparkline(this, data);
    } else if (url) {
        var that = this;
        $.ajax(url)
            .then(function(data) {
                drawSparkline(that, data);
            });
    }
});

如果您想节省一些时间并让它们在 IE 中工作，我还建议您查看 Sparky (它是 on github )。 :)

关于javascript - 如何运行作为属性嵌入到 DOM 元素中的脚本？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8177283/