具有服务器端值的不显眼的 JavaScript，最佳实践？

Question

我习惯做这样的事情：

<a href="Javascript:void(0);" onclick="GetCommentForGeneralObservation(<%# Eval("ID") %>)">

这将在中继器或类似的东西中。但是我现在尝试使用不显眼的 JavaScript，从而摆脱标记中的任何 JS。我试图弄清楚在这种情况下最好的做法是什么？我使用了属性，然后使用 JQuery 将值传递给 AJAX 调用，但这似乎有点 hack。

根据第一次回复进行编辑：

我想多了

Separation of functionality (the "behavior layer") from a Web page's structure/content and presentation.

据我所知是不显眼的 JS 的一部分。

这恰好适用于我不必担心 Javascript 在客户端上被关闭的应用程序，它在我的公司内部托管。我得到的是，如果我要通过 JQuery 将 onclick 事件附加到单独的 .js 文件中，我将如何将 Eval("ID") 中的值获取到 JS 调用中。

对不起，没有更清楚。我很欣赏需要逐步增强面向公众的应用程序。

Answer 1

不显眼意味着您不依赖 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);

Answer 2

您可以使用anchor 标记的rel 属性来存储要与链接关联的值。

<a href="#n" class="comment" rel="<%# Eval("ID") %>">Click Here</a>

然后在您的 jQuery 代码中，您可以检查 rel 属性以获取您要查找的值。

$(".comment").click(function () {
  return GetCommentForGeneralObservation(this.rel);
});

（很确定这对于 jQuery 来说是准确的，但我更喜欢 MooTools 人......）

Answer 3

如何确保它完全不引人注目？

在 HTML 文档的头部

在路径/to/php/or/other/equivalent/server/side/file:

 var SiteServerVariablesEtc = {
    someProperty: 
 }

在你的普通 JS 文件中：

var myVar = SiteServerVariablesEtc.someProperty;

Answer 4

我将重新回答这个问题，因为我现在理解了这个问题，而且我通常使用的方法与目前建议的方法不同。

当无法避免动态内容时，我通常会执行以下操作：

<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，除非您是网络完美主义者，否则这并不是什么缺点。

我也非常喜欢 DanSingerman 的方法，如果您的数据是特定于标签的，这种方法更适合。

Answer 5

您可能希望使用 JQuery 元数据插件或核心数据功能。

http://docs.jquery.com/Core/data

http://plugins.jquery.com/project/metadata

Answer 6

在 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 属性。

Answer 7

我会开始：

<a href="/getCommentForGeneralObservation/<%# Eval("ID") %>" class="getCommentForGeneralObservation">

然后附加一个看起来像这样的事件处理程序：

function (event) {
    var href = this.href;
    var id = href.search(/\/(\d+)/);
    return GetCommentForGeneralObservation(id);  
};