Question

网页上的Javascript通常需要能够访问服务器上已知的变量。例如，用户的用户名。假设我们不想发出JSON / XML请求，因为这会不必要地增加复杂性以及页面命中数。我们希望将数据与html / Javascript一起发送。

发送数据的一种方法是将其注入Javascript。

var x={{username}};

另一个想法是在头部创建一个元项目并将数据存储在那里，然后使用jQuery（或等效的）来检索它。

这些方法中的任何一种都优于另一种方法，还是我应该考虑其他任何方法？

Answer 1

我只需要在头部有一个元素，它声明一个包含您信息的名称齐全的全局对象。类似的东西：

<script type="text/javascript" >
    this.blah = this.blah || {};
    this.blah.userinfo = this.blah.userinfo || {};

    this.blah.userinfo = {
        "username" : "UserName42"
        "gender" : "Male"
    };
<script>

前两行只是初始化您的全局对象。由于它是全局的，我们使用“blah”命名它。

Answer 2

我认为这个问题有点复杂，因为根据我的经验，您很少依赖静态/预先创建的HTML页面来处理拥有帐户，用户权限等的网站。

通常，这样的站点/应用程序依赖于某种“服务器页面”技术 - ASP，JSP，PHP（或通过AJAX请求管理所有这些） - 这将允许您编写某种标记/服务器代码类似于<%=request.getAttribute("userName")%> - 当服务器编译/解释时，会在您想要的页面中为您注入用户名。

如果由于某种原因，您声称在您的应用程序中不是这种情况并且您向用户提供纯预先创建的或静态HTML - 那么，实际上您必须执行以下操作之一：

1.AJAX请求检索用户名

我认为你的论点是

会不必要地增加复杂性以及数量页面点击次数

不是有效的。技术使用的正确性应优先于（可能不存在）性能增益。我也没有看到相反的复杂性增加 - 你可以将“用户”记录部分分成一个模块并在其他地方重复使用。

2.注入JavaScript（或使用元标记）

这个我不完全确定你会怎么做并在那之后保持你的页面...

Answer 3

你的建议完全没问题。例如，CoffeeScript的创建者Jeremy Ashkenas，Underscore.js和Backbone.js建议在Backbone docs中完全相同

<script>
  Accounts.reset(<%= @accounts.to_json %>);
  Projects.reset(<%= @projects.to_json(:collaborators => true) %>);
</script>

Answer 4

这些方法中的任何一种都优于另一种方法，还是我应该考虑其他任何方法？

我认为没有一个正确的答案，当然我听到很多关于这个主题的矛盾观点，但是从你提到的两种方法中选择我会把这些值注入JavaScript，因为我发现它更容易。

但是既然你要求提出其他建议，你可以将两个想法结合起来：你的服务器端代码只需在<script>中插入一个<head>元素来存储变量中的数据，然后可以直接从任何其他脚本（包括多个源文件中的脚本）访问。您可以将所有数据都放在一个对象中以避免大量的全局变量：

<html>
<head>
<script>
   var dataFromServer = { /* all your server data here */};
</script>
<script type="text/javascript" src="somelibrarycript.js"></script> 
<script type="text/javascript" src="someotherscript.js"></script>
<script>
   if (dataFromServer.someProperty) {
      // someProperty provided above so do something with it...
   }
</script>
</head>
etc...

这种方法的另一个优点是，服务器端代码基本上只是生成JSON（如果直接包含在页面源中，它就会变成对象文字），所以如果你以后决定开始使用某些Ajax，那么你已经差不多了那里。

如何使用可从Javascript访问的HTML发送值？

4 个答案: