如何将javascript代码与dom元素关联?
我有各种dom元素,它们的内容在页面加载时更新。通常,它们由ajax使用来自服务器的数据进行更新。它们通常显示图表和表格信息之类的内容 为了保持整洁,我重新使用了为常见任务(如显示图表)生成最终html的代码。我将选项放在html属性中,并为数据url设置了一个属性。e、 g如何将javascript代码与dom元素关联?,javascript,jquery,html,Javascript,Jquery,Html,我有各种dom元素,它们的内容在页面加载时更新。通常,它们由ajax使用来自服务器的数据进行更新。它们通常显示图表和表格信息之类的内容 为了保持整洁,我重新使用了为常见任务(如显示图表)生成最终html的代码。我将选项放在html属性中,并为数据url设置了一个属性。e、 g <div class="standard_chart" chart_title="Trend of X vs. Y" data_url="/data/x_vs_y"></div>
<div class="standard_chart"
chart_title="Trend of X vs. Y"
data_url="/data/x_vs_y"></div>
我更愿意,在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
1。
//然后使用'eval'在属性中使用js代码
2.
... 函数定义。。。
//然后以某种方式获取js内部并将其与元素关联
我不确定其他选项是什么,以及它们的相对优势是什么。您可以使用这个想法,而无需将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预处理器={}
是预定义的(在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>
为什么不在使用属性的标准库代码之前调用特定于项的预处理Javascript/JQuery代码呢?“预处理”意味着您可以先处理它。将脚本添加到属性中以首先对其进行处理似乎有点过火。或者,编写外接程序以查找与元素id名称匹配的方法名称,并在存在时执行。这将使您可以隐式扩展外接程序,而无需在任何地方分隔块。HTML
div
节点没有chart\u title
或data\u url
属性。
<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
}
};
<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);
}
});
});