在外部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>

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

然后你的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;
    });
});

这应该足够了(虽然我没有测试它).