Как связать код javascript с элементами dom?

Question

У меня есть различные элементы dom, которые обновляют их содержимое при загрузке страницы. Как правило, они обновляются с помощью ajax с данными с сервера. Они обычно показывают такие вещи, как диаграммы и табличные данные.

Чтобы сохранить чистоту, я повторно использовал код, который генерирует окончательный html для обычных задач, таких как отображение диаграммы. Я добавляю параметры в атрибуты html и имею атрибут для URL-адреса данных. например

<div class="standard_chart" 
    chart_title="Trend of X vs. Y" 
    data_url="/data/x_vs_y"></div> 

Эта организация значительно улучшила мой код js.

Проблема

Иногда мне нужно обрабатывать данные первого. Например, чтобы фильтровать:

var filter_outliers_for_x_vs_y_data = function(data){ 
    data = data.filter(function(d){ 
     return -1000 < d.y && d.y < 1000; 
    }); 
    return data; 
}; 

Я не хотелось, чтобы положить идентификатор атрибута на DIV просто переписать функцию обработки данных для конкретного йот идентификатора. Рассмотрим это:

$(document).ready(function(){ 
    $('#my_x_vs_y_chart').each(function(){ 
     // ... reworked code just for this element 
    }); 
}); 

Я бы гораздо скорее, в том, что HTML-документ, поместить функцию предварительной обработки в непосредственной близости от элемента HTML (или в нем). Это кажется лучшим местом для этого.

Что было бы лучшим способом связать javascript с конкретными элементами dom?

Мои идеи до сих пор:

1. 
<div class="standard_chart" 
    chart_title="Trend of X vs. Y" 
    data_url="/data/x_vs_y" 
    pre_process_fn="...some js code..."></div> 
// then use `eval` to use the js code in the attribute 


2. 
<div class="standard_chart" 
    chart_title="Trend of X vs. Y" 
    data_url="/data/x_vs_y" 
    pre_process_fn="...some js code..."> 
    <pre_process_fn> 
     <script>... function definitions ... </script> 
    </pre_process_fn> 
</div> 
// then somehow get and associate the js internal to the element 

Я не уверен, что другие варианты, и каковы их относительные преимущества.

Answer 1

Вы могли бы использовать эту идею, без рендеринга JavaScript в атрибут, но имя сноска:

<div class="standard_chart" 
    chart_title="Trend of X vs. Y" 
    data_url="/data/x_vs_y" 
    preprocess_fn="preprocess_x_vs_y"></div> 

А затем определить объект, содержащий ваши препроцессора функции:

var preprocessors = { 
    "preprocess_x_vs_y": function() { 
     var dataUrl = $(this).attr("data_url"); 
     var chartTitle = $(this).attr("chart_title"); 
     // do the processing 
    } 
}; 

Когда var preprocessors = { }; предопределен (в разделе главы), вы также можете впоследствии превратить функцию в элемент html-скрипта:

<script type="text/javascript"> 
preprocessors["preprocess_x_vs_y"] = function() { 
    var dataUrl = $(this).attr("data_url"); 
    var chartTitle = $(this).attr("chart_title"); 
    // do the processing 
}; 
</script> 

Теперь в документе готового событии, сделать

$(document).ready(function() { 
    $('.standard_chart').each(function() { 
     var preproc_fn = $(this).attr("preprocess_fn"); 

     // now call the preprocessor (with this === dom element) 
     if (preprocessors[preproc_fn] instanceof Function) { 
      preprocessors[preproc_fn].call(this); 
     } 

    }); 
});