Javascript最佳实践-使用服务器端值

Javascript best practices - Using server-side values

本文关键字：服务器端 最佳 Javascript      更新时间：2024-07-06

在过去的几年里，我一直使用客户端隐藏的<input>字段来存储服务器端值，并在Javascript中使用它。

例如，假设我需要应用程序配置中的Ajax超时值。

我可能会把它像这样存储在我的JSP:中

<input type="hidden" id="ajaxTimeout" value="${serverValue}" />

然后像这样使用它，我的AJAX调用位于一个外部文件中：

$("#ajaxTimeout").val()

我今天讨论了这个问题，有人建议最好将只有Javascript才会使用的值存储在HTML <meta>标记中
这有关系吗？是否有一种获取服务器端信息的首选方式，仅用于Javascript
我的理解是，如果隐藏的输入字段不是表单的一部分，那么它就足够安全，可以用来存储值，因为它不会附加到任何请求中。话虽如此，我一直认为这确实有点像黑客。

想法？

：编辑：：
两个奇妙的答案：

  • 对不绑定到任何特定DOM元素的常规页内数据使用对象文字
  • 使用数据属性存储绑定到DOM元素的自定义数据：http://www.w3.org/TR/2010/WD-html5-20101019/elements.html#attr-数据

除了其他答案中给出的简单的旧对象文字方法外，如果要传递给客户端的值是关于特定的DOM元素（或者有一个DOM元素表示该值所涉及的逻辑对象），则可以将该值放在数据属性中：

<div id="videoplayer" data-startplayingat="1:02">HTML Content</div>

这可以作为一个完整的属性data-startplayingat访问，或者在现代浏览器中有dataset属性。jQuery语法为$('#videoplayer').data('startplayingat')。

W3C关于数据属性的官方规范解释了这一切。

以下是一些有趣的亮点：

  • 名称不能使用大写字母，并且必须与XML兼容
  • dataset属性转换破折号，使类似start-playing的名称变为startPlaying

object literal方法（我喜欢并亲自使用过）的一个潜在缺点是，如果你想把对象放在.js文件中，那么通常静态的javascript文件必须通过你的动态解析器运行——这将导致潜在的小（但仍然存在）性能损失。将对象声明放入HTML文件中的<script>标记中可以解决此问题，但您可能需要处理脚本加载顺序问题。

我们亲自做这样的事情：

var options = {
    selector: '#divId',
    serverSideVariableHere: <%=AspNetProperty %>,
    anotherServerSideVariableHere: <%=AspNetPropertyTwo %>
}
var viewModel = new KnockoutViewModel(options);
ko.applyBindings(viewModel, $(options.selector)[0]);

这只是一个使用KnockOutJS的例子，但这个想法可以扩展到您选择使用（或不使用；）的任何JavaScript库

然后，我们将这些选项传递给任何使用它们的对象，例如Knockout ViewModels或其他对象。这样，我们的JavaScript仍然是可测试的，我们可以将我们想要的任何值传递给我们的测试。

使用meta标签进行浏览器元"指令"以外的操作无异于破解IMO.

我会考虑将JavaScript数据存储在它所属的位置——在JavaScript中，使用JavaScript对象文字。

Istrong更喜欢data-属性中的JSON片段。这样可以将它们扩展到相关的HTML元素，并且不会污染Javascript全局名称空间，也不必生成额外的代码来处理名称空间。再加上服务器端的JSON序列化程序，可以最大限度地减少手动转义值中的任何内容。

（我还有一件事™针对具有一般内容的CCD_ 13标签。视图和逻辑分离等等。）

相关文章：