在外部 JS 文件中包含 PHP 变量？

Question

我的 Web 应用程序中有几行 jQuery。这段代码目前是内联的，因为它接受几个 PHP 变量。

<script type="text/javascript">

$(document).ready(function(){

    $('.post<?php echo $post->id; ?>').click(function() {

        $.ajax({

            type: 'POST',
            url: 'http://domain.com/ajax/add_love',
            data: { 
                post_id: <?php echo $post->id; ?>,
                user_id: <?php echo $active_user->id; ?>,
                <?php echo $token; ?>: '<?php echo $hash; ?>'

            },
            dataType: 'json',
            success: function(response) {

                $('.post<?php echo $post->id; ?>').html(response.total_loves).toggleClass('loved');

            }

        });

        return false;

    });

});

</script>

不过，我非常喜欢最佳实践，所以我想将我的 jQuery 移动到一个外部 JS 文件中。

我怎么能做到这样的壮举？

有什么建议吗？我对 jQuery 和 PHP 还是比较陌生。

谢谢！

:)

Answer 1

我的解决方案结合了多种技术，其中一些已在此问题的答案中提及。

是的，将 PHP 与 JS 分开

首先：是的，您应该将您的 JS 与 PHP 分开。您可以将其放在单独的文件中，但您需要对当前代码进行一些更改。不要让 JS 文件动态生成——它实际上扼杀了将 JS 代码分离到单独文件中的优势（你不能缓存它等）。

通用变量作为全局变量/函数参数

接下来，将您的公共变量作为全局变量存储在 HTML 文件的头文件中（您实际上没有太多选择，尽管还有其他选择），最好分组在一个对象中：

var Globals = <?php echo json_encode(array(
    'active_user_id' => $active_user->id,
    'token' => $token,
    'hash' => $hash,
)); ?>;

或者，您可以将所有这些作为参数传递给您将调用的函数，但我假设您也在脚本的其他地方使用它们。

存储在data-属性中的容器相关数据

然后使用data- 属性来存储与容器相关的真实数据。你不需要post1/post2/post3-like 类和单独的事件处理程序：

<div data-post-id="10">here is something</div>

而不是例如：

<div class="post10">here is something</div>

如何从外部 JS 文件中读取全局变量和data- 属性

然后你的 JavaScript 可能看起来像：

$(document).ready(function(){
    $('[data-post-id]').click(function() {
        var el = $(this);
        var data = { 
            'post_id': el.data('post-id'),
            'user_id': Globals.active_user_id
        };
        data[Globals.token] = Globals.hash;
        $.ajax({
            'type': 'POST',
            'url': 'http://domain.com/ajax/add_love',
            'data': data,
            'dataType': 'json',
            'success': function(response) {
                el.html(response.total_loves).toggleClass('loved');
            }
        });
        return false;
    });
});

这应该足够了（虽然我没有测试过）。

Answer 2

在不增加更多复杂性的情况下，最简单的方法是让服务器将 Javascript 文件视为 PHP 文件，这样您就可以在该文件中定义 PHP 变量，然后完全按照您的方式回显它们在你问题的代码中做。

在 apache 上，这意味着创建一个 .htaccess 文件并向其中添加以下行：

AddType x-httpd-php .js

（请注意，这会将您的所有 javascript 文件作为 PHP 处理。如果您只想将一些 Javascript 文件作为 PHP 处理，则需要制定更窄的 .htaccess 规则。）

Answer 3

我不知道有没有办法。但是，如果您设法在外部 js 文件中包含变量，则意味着这些文件将必须作为呈现这些变量的 php 脚本进行处理，而不仅仅是将它们呈现为静态文件。这会对性能产生不利影响。

您仍然可以使用外部 JS 文件的一种方法是声明一个函数并从内联 javascript 将参数传递给它。您的代码如下所示：

<script>
bindPost(<?php echo $post->id; ?>,<?php echo $active_user->id; ?>,'<?php echo $hash; ?>');
</script>

bindPost 在外部 JS 文件中声明并很好地处理参数。

Answer 4

您总是可以使用 PHP 中的参数调用该函数：

somefile.js：

function func(params) {
    //params is now from PHP
    //params.foo == "bar"
}

somefile.php:

<?php
    $params = array('foo' => 'bar');
?>

<script type="text/javascript">
$(function() {
    func(<?php echo json_encode($params); ?>);
});
</script>

我倾向于采用这种方法，因为它避免了全局变量，同时允许轻松传输变量。

我也喜欢使用 json_encode，因为任何有效的 JSON 都是有效的 JS，这意味着如果您使用字符串并在其中回显 PHP，您不必担心转义 ' 或 "。

Answer 5

如果您仍想包含 PHP 变量，则不能将其放入外部 .js 文件中。但是您可以将代码放入一个单独的 PHP 文件中，该文件会生成有效的 Javascript 输出（包括标头中的 content-type 设置为“text/javascript”！）。

在您的第一个 PHP 文件中，您可以参考生成 Javascript 代码的第二个 PHP 文件

<script src="path/to/generateJS.php" type="text/javascript"></script>

Answer 6

我通常这样做的方式是在页面本身中使用一些变量，然后包含的 JavaScript 访问这些变量。

在您的主页中：

var post_id=<?php echo $post->id; ?>;

然后在你包含的 JS 文件中：

data: { post_id: post_id,