É considerado uma prática ruim ter PHP no seu JavaScript

Muitas vezes neste site, vejo pessoas tentando fazer coisas assim:

<script type="text/javascript">
  $(document).ready(function(){

     $('<?php echo $divID ?>').click(funtion(){
       alert('do something');
     });

  });
</script>

Eu não acho que esse seja algum tipo de padrão em que as pessoas naturalmente se enquadram. Deve haver algum tipo de tutorial ou material de aprendizagem por aí que mostre isso, caso contrário, não veríamos tanto. O que estou perguntando é: estou lidando muito com isso ou é uma prática muito ruim?

Edição: estava falando com um amigo meu sobre isso, que muitas vezes coloca ruby ​​em seu JavaScript e ele trouxe esse ponto.

Não há problema em colocar dinamicamente constantes amplas do aplicativo em seu JavaScript para que você não precise editar dois arquivos. por exemplo...

MYAPP.constants = <php echo json_encode($constants) ?>;

também é bom codificar diretamente os dados que você planeja usar em uma biblioteca

ChartLibrary.datapoints = <php echo json_encode($chartData) ?>;   

ou devemos fazer uma ligação AJAX sempre?

Normalmente, é uma má prática usar o idioma X para gerar código no idioma Y.

Tente dissociar os dois idiomas, transformando os dados em sua única interface - não misture o código .

No seu exemplo, você pode melhorar o código usando o PHP para preencher uma cfgestrutura que está disponível para JavaScript:

<script type="text/javascript">
  var cfg = {
    theId: "<?php echo $divID ?>",
    ...
  };

  $(document).ready(function(){
     $("#" + cfg.theId).click(funtion(){
       alert('do something');
     });
  });
</script>

Dessa forma, o PHP se preocupa apenas com o preenchimento da estrutura de dados e o JavaScript se preocupa apenas com o consumo da estrutura de dados.

Essa dissociação também abre caminho para carregar os dados de forma assíncrona (JSON) no futuro.

Atualizar:

Para responder às perguntas adicionais que você fez com sua atualização, sim, seria uma boa prática aplicar o princípio DRY e permitir que PHP e JavaScript compartilhem o mesmo objeto de configuração:

<script type="text/javascript">
  var cfg = <?php echo json_encode($cfg) ?>;

  ...

Não há mal nenhum em inserir a representação JSON de sua configuração diretamente em sua página como esta. Você não precisa necessariamente buscá-lo via XHR.

JavaScript gerado dinamicamente é uma prática horrível e ruim.

O que você deve fazer é compreender o que significa Separação de preocupações e aprimoramento progressivo.

Isso basicamente significa que você tem HTML dinâmico e JavaScript estático (que aprimora o HTML).

No seu caso, você provavelmente deseja uma classe em sua div e seleciona-a com um seletor de classe

O maior problema com seu snippet é que você está faltando #para torná-lo um seletor jQuery válido;).

Eu diria que você deve evitar incluir o PHP no seu JavaScript sempre que possível. O que há de errado em alterar o seletor em seu click()manipulador para uma classe e adicionar a classe ao elemento em questão se você deseja que o manipulador seja acionado, e não se não;

<script type="text/javascript">
  $(document).ready(function(){

     $('.foo').click(funtion(){
       alert('do something');
     });

  });
</script> 

<div id="bar" class="<?php echo ($someCond ? 'foo' : ''); ?>">Hello</div>

Não são as circunstâncias em que você precisa para incluir PHP em sua JavaScript; mas devo admitir que estes são poucos e distantes entre si.

Um exemplo é quando você tem ambientes diferentes; testar, encenar e viver. Cada um deles tem um local diferente de seus ativos (imagens, principalmente). A maneira mais fácil de definir o caminho para que possa ser usado pelo JavaScript é algo como;

var config = { assets: "<?php echo $yourConfig['asset_url']; ?>" };

Essa é uma prática ruim, na minha opinião, pois você precisaria chamar esse arquivo de algo.php e não poderá compactá-lo, por exemplo, sem mencionar que não é bom misturar as coisas do servidor com o JavaScript. Tente limitar a mistura entre PHP e JS, tanto quanto possível.

Você sempre pode fazer isso:

function setOnClick(divid) {
 $(divid).click(funtion(){
   alert('do something');
 });
}

E então você poderia chamar essa função em um arquivo php, para tornar essas coisas de mistura o mais pequenas possível.

$(function() {
  setOnClick('<?php echo $divId; ?>');
});

Ao fazer isso (com arquivos JS maiores, e não de duas a três linhas onde isso não importa), você pode aproveitar a compactação do arquivo JS e os desenvolvedores de front-end se sentem muito confortáveis ​​trabalhando apenas com JavaScript na minha opinião (como você poderia escrever Python, Ruby, etc., não apenas o PHP - e o código pode ficar cada vez maior, dependendo do que você precisa fazer lá).

Eu não acho que isso seja uma prática ruim. Se o ID necessário no seu JavaScript for dinâmico, não há outra maneira de fazer isso.

Eu consideraria essa má prática. Ao colocar conteúdo dinâmico dentro de blocos de script, você sempre deve estar ciente do fato de que escapar dentro de um contexto javascript não é tão simples quanto você esperaria. Se os valores foram fornecidos pelo usuário, é não suficiente para html-escapar deles.

A folha de dicas do OWASP XSS tem mais detalhes, mas basicamente você deve adotar este padrão:

<script id="init_data" type="application/json">
    <?php echo htmlspecialchars(json_encode($yourdata)); ?>
</script>

Em um arquivo .js separado, vinculado a partir do html principal, carregue este código:

var dataElement = document.getElementById('init_data');
var jsonText = dataElement.textContent || dataElement.innerText  // unescapes the content of the span
var initData = JSON.parse(jsonText);

O motivo do uso de um arquivo .js separado é duplo:

• É armazenável em cache para que o desempenho seja melhor
• O analisador HTML não é acionado; portanto, não há risco de um bug do XSS passar por alguém colocando uma rápida tag <? Php lá em algum lugar

Algumas pessoas argumentam que é uma má prática. Não porque é PHP dentro de JS, mas porque é JS embutido e, portanto, não será armazenado em cache pelo navegador para facilitar o carregamento da próxima vez.

Na IMO, é sempre melhor usar JSON para passar variáveis ​​entre os dois idiomas, mas acho que depende de você.

Eu diria que, em geral, não faça isso. No entanto, se você deseja passar dados do PHP -> Javascript, não seria uma loucura ter um bloco Javascript embutido, onde você tem o código do formulário mostrado abaixo. Aqui o código está apenas passando dados do php para o javascript, não criando lógica em tempo real ou algo semelhante. A parte boa de fazer isso x uma chamada ajax é que os dados estão disponíveis assim que a página é carregada e não exigem uma viagem extra ao servidor.

<script>
window.config = <?php echo json_encode($config);?>;
</script>

Obviamente, uma outra opção é criar um arquivo de configuração javascript do PHP por meio de alguma forma de script de construção que o colocará em um arquivo .js.

A única coisa em que consigo pensar que pode realmente causar problemas é quando os erros do PHP são definidos para serem exibidos e, portanto, empurra uma carga de HTML mostrando o erro do PHP no seu JavaScript.

Também porque é no script, portanto, não é exibido e, às vezes, pode demorar um pouco para perceber por que seu script está quebrado.

Depende de quem, e se você me perguntar, sim, considero a prática de volta por alguns motivos. Primeiro de tudo, eu preferiria ter o código javascript em seu próprio arquivo JS que o analisador php não seria capaz de tocar.

Em segundo lugar, o php é executado apenas no horário do servidor; portanto, se você estiver dependendo de alguma variável do php para alterar seu javascript, isso pode não funcionar muito bem. Se houver alguma configuração de carregamento de página que você deseja controlar com javascript, normalmente prefiro adicionar esse valor ao DOM com php para que o javascript possa alcançá-lo quando e se desejar (em uma div oculta, por exemplo).

Finalmente, apenas para fins organizacionais, isso pode ser muito irritante. Já é ruim o suficiente misturar html e php (na minha opinião).

A contenção do PHP em um configobjeto de dados ocorre 90%, mas a melhor prática é separá-lo completamente. Você pode usar uma API RESTful para solicitar apenas os dados necessários, é um pouco mais javascript, mas com algumas vantagens.

• O script é estático e pode ser armazenado em cache permanentemente
• PHP não é mais um vetor XSS
• Separação completa de preocupações

Desvantagens:

• Requer uma solicitação HTTP extra
• javascript mais complexo

Roteiro

//pure javascript
$.on('domready',function({
    //load the data
    $.get({
       url:'/charts/3D1A2E', 
       success: function(data){
           //now use the chart data here
           ChartModule.init(data);
       }
    });
})

Não é uma prática ruim SOMENTE se for usado para a inicialização do código javascript (nos meus temas do WordPress, inicializo meus objetos javascript com funções php como site_url () porque é a única maneira de lidar com isso (talvez possamos usar uma solicitação ajax para obter um json, e assim ... mas é um pé no saco).

Boa prática:

Má prática: