Как запустить скрипт, встроенный в качестве атрибута в элемент DOM?

Question

Я использую отличную библиотеку визуализации 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? );
});

Что будет подходящимспособ

Answer 1

Я бы более подробно рассказал о различных типах данных, которые вы кодируете:

<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);
            });
    }
});

Я бы также посоветовал вам проверить Sparky (это на github ), если вы хотите сэкономить немного времени и заставить их работать в IE.:)

Answer 2

Вместо использования eval вы можете идентифицировать промежутки с помощью следующего класса:

<span class="sparkLine" data-sparkdata="[10, 20, 30, 40]"></span>
<span class="sparkLine" data-sparkdata="http://data.com/location"></span>

и затем с помощью jQuery:

$(document).ready(function() {
   $('.sparkLine').each( function(){
      drawSparkline(this, $(this).data("sparkdata"));
   });
});