2

我有各种 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 上放置一个 id 属性，只是为了为那个特定的 dom id 重写数据处理函数。考虑一下：

$(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

我不确定其他选择是什么，以及它们的相对好处是什么。

4

1 回答 1

2

您可以使用这个想法，而无需将 javascript 呈现到属性中，而是使用 fn 名称：

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

Whenvar preprocessors = { };是预定义的（在 head 部分中），您还可以稍后将函数呈现为 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);
         }

    });
});
于 2013-08-11T17:14:34.337 回答