Question

我想知道以下哪一项是传递服务器数据并在函数中使用它的最佳方法，尤其是如果组件要使用该函数

方法1

function doSomething(elm, serverTime) {
   // Do something
}

<script>
doSomething('foo', '<% php server time %>');
</script>

VS

方法2

<div id="foo" data-server-time="<% php server time %>"></div>
function doSomething(foo) {
    var serverTime = getElementById("server-time").dataset.servertime;
    // Do something
}

<script>
doSomething('foo'); 
</script>

方法3

其他建议？想做类似以下的事情，但不确定如何？

document.getElementById("foo").doSomething() ?

Answer 1

我认为在这种情况下，第一个在这个简单的例子中更好，因为服务器时间并没有真正附加到任何特定的div元素。

请确保无论您做什么，都没有XSS安全漏洞。

Answer 2

对我来说，案例1会更好。

代码会少coupling
代码不会使用global vars（document.getElementById）
您可以在其他没有DOM的地方重复使用您的功能，例如the server。

Answer 3

你正处于一个寻找共同习惯的十字路口，一个人并不比另一个更普遍。任何伟大的圣人都可能告诉你，你选择的并不像重新做同样的选择那么重要;也就是说，是一致的。

根据信息的类型，我会将其传递给：

HTTP标头（例如，通过HTTP Cookie）
Querystring（如果使用重定向）
外部JSON文件（例如，server.json），通过JS加载
嵌入式JSON对象（例如window.SERVER = {'server_time': <%php ...%>};）

在你的情况下，如果JS是你正在工作的主要地方，那么让它更接近JavaScript会更有意义并且更容易维护。因此，方法1将来更清洁，更容易进行更改。方法2，需要筛选HTML并确保修改正确的行。

尽管如此，我有点偏向于将服务器数据保留为外部JSON或嵌入式JSON对象。因此，如果您需要跟踪其他服务器数据/元数据，则可以轻松添加到其中。

Answer 4

我认为所有这些都是相同的，并且根据你的编码方式，他们会有相同的表演性能。

让我们不要忘记，现在，最常见的方法是将事件侦听器附加到元素（jQuery，Angular和..，使用大量事件侦听器）。

Javascript函数传递对象还是使用数据属性？

4 个答案: