将动态选项传递给javascript

passing dynamic options to javascript

本文关键字：javascript 动态 选项      更新时间：2023-09-26

我正在编写一个简单的JS游戏。游戏有一些选项，可以在管理中设置并存储在MySQL数据库中。但是，我不确定将这些选项发送到javascript的最佳方式是什么。

假设我有一个游戏模型对象，它具有初始化游戏的函数。

var someGame = {
    init : function(options){
        this.difficulty = options.difficulty;
        this.numberOfMonsters = options.numberOfMonsters;
        // ....
    }
}

它有选项参数，这些选项来自数据库。我该如何在游戏中呈现这些选择?

我有一些想法，但我想听听你的建议。

  1. 我可以使用AJAX来检索选项，但我会为此付出1个额外的请求
  2. 我可以把PHP中的选项作为javascript变量，并从HTML代码调用函数，但根据我所读到的，JS应该分开。
  3. 我可以创建JSON对象，但再次，它将混合JS和HTML。也许如果我将JSON输出到一些不可见的HTML元素，然后通过JS解析它，它可以工作，但不确定这是否是一个好方法。我可以创建一些空的HTML元素，并将选项存储在它的"data-"属性中。
    4. 我可以动态地创建JS文件使用PHP，但它是值得的吗?我只需要填充几个动态变量
  4. ? ?

谢谢

对于这种情况，选项1、2和3通常是非常合适的。

如果你是从PHP生成的页面和变量/数据是可用的，然后，我认为这是完全好的，包括这样的东西在你的HTML:

<script>
yourScript.init(<?php echo json_encode($javascriptParameters); ?>);
</script>

虽然你把JS代码从HTML中分离出来是很正确的，但是把JS放到HTML中来做这样的初始化任务是很常见的，也是一个完全可以接受的解决方案。

选项2是最有效的。它没有对服务器的额外请求，并且当您需要它时，数据已经在页面中了。

您知道您的页面需要这些服务器选项。您不妨从数据库中获取它们，并将它们放在页面的javascript中，当您构建该页面时，它们可以立即使用，而不会延迟等待ajax调用。

将它们放在页面中没有缺点。我不确定你想要实现的JS分离是什么。你的选项是JS代码，他们将在你的页面脚本。我更熟悉的分离是，你不希望javascript代码混入HTML(例如内联事件处理程序)。这不是那个。您将脚本数据与其他脚本一起放入脚本标记中。这不是问题。

下面是对你提出的每个想法的评论:

1)使用AJAX检索选项

正如你所说，这是一个额外的要求。这个额外的请求会减慢页面的初始化时间，并使服务器为该页面提供服务的请求增加一倍。除非您通常不需要这些数据，或者除非您需要向请求传递一些参数，而这些参数只能从客户端检索，否则根本不需要通过ajax检索这些数据。

2)将PHP中的选项回显为javascript变量

除非您通常不需要这些数据，并且在服务器端检索成本很高，或者除非您需要向请求传递一些参数，而这些参数只能从客户端检索，否则在页面呈现时将数据放入页面是最有效的。如果你把它们作为脚本变量，那么你仍然有HTML/JS分离。您可能应该创建一个对象，并将每个数据值作为该对象的属性，以减少对顶级名称空间的污染。

3)创建JSON对象

没有理由使用基于文本的JSON格式，当你可以把它们作为一个直接的javascript对象，就像在上面的选项。

4)创建一些空的HTML元素

没有理由我知道把这些数据在你的HTML，而不是在你的JS。这样就不必要地把HTML和JS混在一起了。 5)动态创建JS文件

没有理由创建一个单独的JS文件。只需将这一小部分JS内联到脚本标签中。

选项6 -如果你不反对放弃MySQL数据库，你可以使用像Firebase这样的东西，在那里你可以直接从JavaScript与它交互。这很好，因为它消除了PHP后端中仅用于访问数据的额外层。如果你对这个选项感兴趣或者有任何问题，请告诉我。

相关文章：