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

在过去的几年中，我一直使用客户端隐藏的<input>字段来存储服务器端的值，并将其用于Javascript land。Javascript最佳实践 - 使用服务器端的值

例如，假设我需要来自我的应用配置的Ajax超时值。

我大概其存储像这样在我的JSP：

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

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

$("#ajaxTimeout").val()

我今天对此进行了讨论，并且建议最好的做法是存储仅在HTML <meta>标记中将被Javascript使用的值。
这是否重要？有没有一种首选的方法来获得服务器端信息，这些信息仅用于Javascript？
我的理解是，如果隐藏的输入字段不是表单的一部分，那么使用它来存储值是安全的，因为它不会附加到任何请求。话虽如此，我一直认为这确实是一个黑客。

想法？

::编辑::
两个梦幻般的答案：

使用对象为不依赖于任何特定的DOM元素一般的页数据的文字。
使用数据属性来存储依赖于DOM元素的自定义数据：http://www.w3.org/TR/2010/WD-html5-20101019/elements.html#attr-data

来源

2013-12-11 wild_nothing

我们亲自做这样的事情：

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

这是简单地使用淘汰赛JS的例子，但是这个想法可能是扩展到您选择使用的任何JavaScript库（或不是;））

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

来源

2013-12-11 03:45:14

我做同样的骨干+ Rails的后端。例如，对于一些有关currentUser的相关信息，我们在布局中执行此操作：var window.AppName.currentUser = new AppName.Model.CurrentUser（$。parseJSON（<％= dump current_user json％>中的有用属性））） ; – Enders

请注意，在ASP经典或Asp.Net网站中，需要额外的操作才能通过ASP解析器运行.js文件 - 因此需要一些额外的设置。这有潜在的（尽管可能很小）的性能影响。 – ErikE

另一方面，没有什么会阻止您将必需的对象声明放入'

将meta标签用于除浏览器元标识以外的其他内容 - “指令”不仅仅是一个黑客IMO。

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

来源

2013-12-11 03:46:45 ZenMaster

除了在其他答案中给出的普通旧对象字面量法以外，如果要传递给客户端的值是关于特定DOM元素（或者存在表示该值的逻辑对象的DOM元素约），你可以把值数据属性：

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

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

official W3C spec on data attributes解释了所有这些。

这里有几个有趣的亮点：

名称不得使用大写字母，而且必须是XML兼容。
dataset属性将转换破折号，使得像start-playing这样的名称将变为startPlaying。

一为对象字面方法（这是我喜欢的，并使用自己的）潜在的缺点是，如果你想在一个.js文件的对象，然后正常静态JavaScript文件，必须通过动态parser-运行这将导致潜在的小（但仍然存在）性能损失。将对象声明放入HTML文件中的<script>标记可以解决此问题，但是您可以使用脚本加载顺序问题进行处理。

来源

2013-12-11 03:49:52 ErikE

优秀。我更喜欢这种方法。显示自从我编写任何JSP/ASP/PHP的东西以来已经过了多长时间...... – ZenMaster

使用AJAX超时值（或与任何特定DOM无关的任何值）的示例，它仍然值得创建一个div并使用data属性来存储这个值而不是一个对象字面值？ –

@wild_nothing我认为使用数据属性应该是至少在逻辑上链接到DOM元素的东西。我不想将它们用于常规页内数据。对象文字将是我喜欢的东西像ajax超时。我只是想给你提供一套完整的答案... – ErikE

I strong更喜欢JSON片段data-属性。这使您可以将它们的范围扩展到相关的HTML元素，并且不会污染您的Javascript全局名称空间，或者必须生成其他代码才能处理名称空间。与服务器端的JSON串行器结合使用，可以最大限度地减少在您的值中手动转义任何内容。

（另外我有一件事对™标签<script>与一般查看和逻辑分离，所有的内容。）

来源

2013-12-11 03:53:06 millimoose

不知道我会有片段，因为你不得不''评估它们，但'data-'属性当然是一个好方法。 – ZenMaster

@ ZenMaster - 不可撤销的JSON解析是JavaScript 1.7的一个标准部分，几乎可用于任何您需要的浏览器：http://caniuse.com/#feat=json。（对于较老的，你有Crockford的'json2.js'。） – millimoose

另一个小优点是它会强制jQuery在'.data（）'中使用JSON自动类型转换来使用JSON解析，而不是进行其他一些可能的不正确猜测。 – millimoose

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

回答

相关问题