Inclure des variables PHP dans un fichier JS externe ?

Question

J'ai quelques lignes de jQuery dans mon application web. Ce code est en ligne pour le moment car il accepte quelques variables 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>

Mais comme je suis un adepte des meilleures pratiques, j'aimerais déplacer mon jQuery dans un fichier JS externe.

Comment ai-je pu réaliser un tel exploit ?

Des conseils ? Je suis encore relativement novice en matière de jQuery et de PHP.

Merci !

)

Answer 1

Ma solution combine plusieurs techniques, dont certaines sont déjà mentionnées dans les réponses à cette question.

Oui, séparer PHP de JS

Tout d'abord : oui, vous devez séparer votre JS de PHP. Vous pouvez le mettre dans un fichier séparé, mais vous devrez faire quelques changements dans votre code actuel. Ne faites pas en sorte que le fichier JS soit généré dynamiquement - cela annule les avantages de séparer le code JS dans un fichier séparé (vous ne pouvez pas le mettre en cache, etc.).

Variables communes comme variables globales / arguments de fonction

Ensuite, stockez vos variables communes en tant que variables globales dans l'en-tête du fichier HTML (vous n'avez pas vraiment le choix, bien qu'il existe d'autres alternatives), de préférence regroupées dans un seul objet :

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

Alternativement, vous pouvez les passer tous comme argument(s) à la fonction que vous allez appeler, mais j'ai supposé que vous les utilisez aussi à d'autres endroits dans votre script.

Les données dépendantes du conteneur stockées dans data- attributs

Ensuite, utilisez data- attributs pour le stockage des données réelles associées aux conteneurs. Vous n'aurez pas besoin de post1 / post2 / post3 -et des gestionnaires d'événements distincts pour ces classes :

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

au lieu de eg. :

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

Comment lire les globaux et les data- attributs d'un fichier JS externe

Et alors votre JavaScript peut ressembler à :

$(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;
    });
});

Et cela devrait être suffisant (bien que je ne l'aie pas testé).

Answer 2

Vous pouvez toujours appeler la fonction avec des paramètres depuis 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>

J'ai tendance à opter pour cette approche car elle évite les variables globales tout en permettant de transporter facilement les variables.

J'aime aussi utiliser json_encode parce que tout ce qui est valide en JSON l'est aussi en JS, ce qui signifie que vous n'avez pas à vous soucier de l'échappement de ' ou de " si vous utilisez une chaîne de caractères et un écho PHP à l'intérieur.

Answer 3

Pour ce faire, j'utilise généralement quelques variables dans la page elle-même, puis le JavaScript inclus accède à ces variables.

Dans votre page principale :

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

Puis dans votre fichier JS inclus :

data: { post_id: post_id,

Answer 4

Vous ne pouvez pas le placer dans un fichier .js externe si vous souhaitez toujours inclure des variables PHP. Mais vous pouvez placer le code dans un fichier PHP distinct qui génère une sortie Javascript valide (y compris le type de contenu dans l'en-tête défini comme "text/javascript" !)

Dans votre premier fichier PHP, vous pouvez faire référence au second fichier PHP générant le code Javascript avec

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

Answer 5

Je ne sais pas s'il existe un moyen. Mais si vous parvenez à inclure des variables dans des fichiers js externes, cela signifie que ces fichiers devront être traités comme des scripts php rendant ces variables plutôt que de simplement les rendre comme des fichiers statiques. Cela affectera négativement les performances.

Une façon de continuer à utiliser un fichier JS externe est de déclarer une fonction et de lui passer des paramètres à partir du javascript en ligne. Votre code ressemblerait à ceci

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

où votre bindPost est déclaré dans le fichier JS externe et gère bien les paramètres.