提问人：Jules 999 提问时间：9/22/2009 最后编辑：DanSingermanJules 999 更新时间：11/21/2009 访问量：855
具有服务器端值的不显眼的 JavaScript，最佳实践？
Unobtrusive JavaScript with server side values, best practice?
问：
我习惯于做这样的事情：
<a href="Javascript:void(0);" onclick="GetCommentForGeneralObservation(<%# Eval("ID") %>)">
顺便说一句，这将在中继器或类似的东西中。但是，我现在尝试使用不显眼的 JavaScript，从而摆脱标记中的任何 JS。我试图弄清楚在这种情况下的最佳实践是什么？我使用了属性，然后使用 JQuery 将值传递给 AJAX 调用，但这似乎有点黑客攻击。
根据第一次回复进行编辑：
我在想更多的
据我了解，不显眼的 JS 的一部分。
这恰好适用于一个应用程序，我不必担心 Javascript 在客户端上被关闭，它托管在我的公司内部。我得到的是，如果我通过 JQuery 将 onclick 事件附加到单独的 .js 文件中，我将如何从 Eval（“ID”） 获取值到 JS 调用中。
对不起，没有说清楚。我理解在面向公众的应用程序中逐步增强的必要性。
答：
3赞
Kai
9/22/2009
#1
不显眼意味着您不依赖 Javascript 来实现功能，因此您的代码会用 Javascript 扩展，而不是被 Javascript 替换。
在您的例子中，您将 Javascript 直接嵌入到链接中，更糟糕的是，如果不启用 Javascript，链接将根本无法工作。相反，你会想要这样的东西，它是纯 HTML，没有任何对 Javascript 的引用：
<a id="commentLink" href="comment.asp">Get Comment</a>
而你的 Javascript（假设你没有使用框架）将是这样的：
function GetCommentForGeneralObservation(evt) {
// Extra javascript functionality here
}
document.getElementById("commentLink").onclick = GetCommentForGeneralObservation;
使用Jquery，我相信你可以做到：
$("#commentLink").click(GetCommentForGeneralObservation);
评论
2赞
RichardOD
9/22/2009
这是一个很好的答案，但实际上并没有回答这个问题！
0赞
Kai
9/22/2009
哎呀！感谢您澄清问题 OP。
0赞
Nosredna
11/20/2009
实际上，$（“#commentLink”）.click（GetCommentForGeneralObservation）;
4赞
Quentin
9/22/2009
#2
我会从以下几点开始：
<a href="/getCommentForGeneralObservation/<%# Eval("ID") %>" class="getCommentForGeneralObservation">
然后附加一个事件处理程序，如下所示：
function (event) {
var href = this.href;
var id = href.search(/\/(\d+)/);
return GetCommentForGeneralObservation(id);
};
评论
0赞
DanSingerman
9/22/2009
我沿着这些思路思考，但解析 URL 仍然有些骇人听闻
0赞
Quentin
9/22/2009
这些 URL 符合标准模式（因此可以安全地像这样解析），并且是服务器端回退工作所必需的。这是我能想到的唯一不重复信息的方法。
12赞
DanSingerman
9/22/2009
#3
在 HTML 5 中，您可以定义自己的以“data-”为前缀的属性
例如
<a
class="comment"
data-rendered-id="<%# Eval("ID") %>"
href="/getCommentForGeneralObservation/<%# Eval("ID") %>" >
然后在 jQuery 的单击事件处理程序中使用该属性。
$(".comment").click(function () {
var id = $(this).attr("data-rendered-id");
return GetCommentForGeneralObservation(id);
});
这也可以在大多数 HTML5 之前的浏览器中使用，只要它们支持 jQuery。
请注意，在不显眼的 javascript 中，您确实应该支持非 javascript 浏览器，因此您需要一个也可以工作的 href 属性。
评论
0赞
JAL
9/23/2009
我目前做同样的事情，只是使用“name”属性。所以它看起来像 var id=$（this）.attr（'name'）;
1赞
Jules 999
9/23/2009
是的，属性是我尝试过的方法，作为这个问题的一个答案，尽管我不知道“data-”前缀，所以谢谢你，让它感觉不像是一种黑客，它是一种公认的将数据附加到元素的方式。
0赞
Chris Porter
10/17/2013
这是一个非常晚的响应，但通过 jQuery 获取数据属性的首选方法是数据 API：api.jquery.com/data。在本例中，您将使用 var id = $（this）.data（'rendered-id'）;
1赞
JAL
9/23/2009
#4
您可能希望使用 JQuery 元数据插件或核心数据函数。
http://docs.jquery.com/Core/data
http://plugins.jquery.com/project/metadata
2赞
Kai
9/23/2009
#5
我将重新回答这个问题，因为我现在理解了这个问题，而且我通常使用的方法与迄今为止建议的方法不同。
当无法避免动态内容时，我通常会执行以下操作：
<script type="text/javascript">
var myApp = {commentId:<%# Eval("ID") %>};
</script>
<script type="text/javascript" src="myAppScript.js"></script>
现在，在 myAppScript.js 中，您可以在任何需要引用该 ID 的地方使用。（我使用字典，以免污染全局命名空间）myApp["commentId"]
这种方法的优点是您的 myAppScript.js 仍然是完全静态的，因此您可以非常快速地提供它。它还具有将相关信息排除在 URL 之外的优点，并且您可以使用 Javascript 对象，这对复杂和/或难以解析的数据有很大帮助。
缺点是它需要内联 Javascript，除非您是 Web 完美主义者，否则这并不是什么缺点。
我也非常喜欢 DanSingman 的方法，如果你的数据特定于标签，它更适合。
评论
0赞
Jules 999
9/23/2009
是的，我已经将这种方法用于未附加到标签的数据，尽管使用对象是一种我没有想到的很好的触感，所以谢谢。
-1赞
Adoro Media
10/15/2009
#6
如何确保它完全不显眼？
在 HTML 文档的头部
<script src="path/to/php/or/other/equivalent/server/side/file"></script>
在 path/to/php/or/other/equivalent/server/side/file 中：
var SiteServerVariablesEtc = {
someProperty: <?php echo "hello" ?>
}
在普通的 JS 文件中：
var myVar = SiteServerVariablesEtc.someProperty;
0赞
Shawn Steward
11/20/2009
#7
您可以使用标记的属性来存储要与链接关联的值。relanchor
<a href="#n" class="comment" rel="<%# Eval("ID") %>">Click Here</a>
然后，在 jQuery 代码中，您可以检查 rel 属性以获取要查找的值。
$(".comment").click(function () {
return GetCommentForGeneralObservation(this.rel);
});
（很确定这对jQuery来说是准确的，但我更像是MooTools的人......
评论