JavaScriptにPHPを含めることは悪い習慣と見なされますか？

このサイトでは何度もこのようなことをしようとしている人がいます：

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

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

  });
</script>

これは、人々が自然に陥るようなパターンではないと思います。これを示しているチュートリアルや学習資料がそこになければなりません。そうでなければ、それはあまり見られません。私が求めているのは、これをあまりにも大きくしているのですか、これは本当に悪い習慣ですか？

編集： これについて私の友人に話していました。彼はしばしばJavaScriptにルビーを入れて、この点を持ち出しました。

JavaScriptにアプリケーション全体の定数を動的に配置して、2つのファイルを編集する必要はありませんか？例えば...

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

また、ライブラリで使用する予定のデータを直接エンコードしてもかまいません

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

または毎回AJAX呼び出しを行う必要がありますか？

通常、言語Xを使用して言語Yでコードを生成することは悪い習慣です。

データを唯一のインターフェースにして、2つの言語を切り離してみてください。コードを混同しないでください。

この例では、PHPをcfg使用して、JavaScriptで使用可能な構造を設定することでコードを改善できます。

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

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

このように、PHPはデータ構造の生成のみを考慮し、JavaScriptはデータ構造の消費のみを考慮します。

このデカップリングは、将来的に非同期（JSON）でデータをロードする方法にもつながります。

更新：

更新で尋ねた追加の質問に答えるために、はい、DRY原則を適用し、PHPとJavaScriptが同じ構成オブジェクトを共有することをお勧めします。

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

  ...

このように、設定のJSON表現をページに直接挿入しても害はありません。必ずしもXHR経由で取得する必要はありません。

動的に生成されたJavaScriptは恐ろしく、悪い習慣です。

あなたがすべきことは、懸念の分離と進歩的強化の意味を理解することです。

これは基本的に、動的HTMLと静的JavaScript（HTMLを拡張する）があることを意味します。

あなたの場合、おそらくあなたのdivにクラスが必要で、クラスセレクタでそれを選択してください

スニペットの最大の問題は、#それを有効なjQueryセレクターにするための行方不明です;）。

可能であれば、JavaScriptにPHPを含めないようにしてください。click()ハンドラー内のセレクターをクラスに変更し、ハンドラーを起動したい場合はその要素をクラスに追加し、そうでない場合は何が問題なのですか。

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

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

  });
</script> 

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

そこているあなたはJavaScriptでPHPを含める必要があり事情が。しかし、これらはごくわずかであることを認めなければなりません。

1つの例は、異なる環境がある場合です。テスト、ステージング、ライブ。それらはそれぞれ、アセット（主に画像）の異なる場所を持っています。JavaScriptで使用できるようにパスを設定する最も簡単な方法は次のようなものです。

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

このファイルをsomething.phpと呼ぶ必要があり、たとえば圧縮することはできず、サーバーのものとJavaScriptを混在させることはできないことは言及していないため、これは私の意見では悪い習慣です。PHPとJSの混合をできるだけ制限するようにしてください。

代わりにいつでもこれを行うことができます：

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

そして、これらのミキシングをできるだけ小さくするために、phpファイルでこの関数を呼び出すことができます。

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

これを行うことで（重要ではない2〜3行ではなく、より大きなJSファイルを持つ）、JSファイルを圧縮することを活用でき、フロントエンド開発者は私の意見ではJavaScriptだけで作業することを非常に快適に感じることができますPython、Rubyなど、PHPだけでなく、コードは、そこで何をする必要があるかによってますます大きくなる可能性があります。

これは悪い習慣ではないと思います。JavaScriptで必要なIDが動的な場合、これを行う他の方法はありません。

この悪い習慣を考えます。スクリプトブロック内に動的コンテンツを配置する場合、javascriptコンテキスト内でのエスケープは期待するほど単純ではないという事実に常に注意する必要があります。値は、ユーザが提供した場合、ない、それらを、HTMLエスケープするのに十分な。

OWASP XSSチートシートは、より多くの詳細を持っていますが、基本的には、このパターンを採用すべきです：

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

次に、メインhtmlからリンクされた別の.jsファイルで、次のコードをロードします。

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

別の.jsファイルを使用する理由は2つあります。

• キャッシュ可能であるため、パフォーマンスが向上します
• HTMLパーサーはトリガーされないため、誰かがどこかにクイック<？phpタグを置くことによってXSSバグがすり抜けるリスクはありません。

一部の人々は、それは悪い習慣だと主張するでしょう。これはJS内のPHPであるためではなく、インラインJSであるため、次回の読み込みを容易にするためにブラウザによってキャッシュされないためです。

IMOでは、2つの言語間で変数を渡すためにJSONを使用することを常にお勧めしますが、それはあなた次第だと思います。

私は一般的にそれをしないと言うでしょう。しかし、PHP-> Javascriptからデータを渡したい場合、以下に示す形式のコードがあるインラインJavascriptブロックを持っているのに夢中になることはありません。ここでは、コードはPHPからjavascriptにデータを渡すだけで、オンザフライなどでロジックを作成していません。これを行う場合とajax呼び出しを行うことの良い点は、ページが読み込まれるとすぐにデータが利用可能になり、サーバーへの余分なトリップが不要になることです。

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

もちろん、他のオプションは、.jsファイルに配置する何らかの形式のビルドスクリプトを介してPHPからjavascript構成ファイルをビルドすることです。

本当に問題を引き起こす可能性があると私が考えることができる唯一のことは、PHPエラーが表示されるように設定されているため、JavaScriptにPHPエラーを示すHTMLの負荷を押し込みます。

また、スクリプト内でそれが表示されないため、スクリプトが壊れている理由を理解するのに時間がかかることがあります。

それはだれに依存します、そして、あなたが私に尋ねるならば、はい、私はいくつかの理由でそれを逆行練習と考えます。まず第一に、PHPパーサーがアクセスできないJavaScriptファイルを独自のJSファイルに入れたいと思います。

第二に、phpはサーバー時にのみ実行されるため、phpの変数に依存してjavascriptを変更する場合、うまく動作しない可能性があります。JavaScriptで制御したいページロード設定がある場合、私は通常、その値をphpでDOMに追加して、javascriptが必要なときに必要に応じてアクセスできるようにします（たとえば、隠されたdiv内）。

最後に、組織的な目的のためだけに、これは非常に迷惑になります。（私の意見では）htmlとphpを混在させるのは十分に悪いです。

PHPをconfigデータオブジェクトに含める方法は90％ですが、ベストプラクティスはそれを完全に分離することです。RESTful APIを使用して、必要なデータのみを要求できます。これはもう少しJavaScriptですが、いくつかの利点があります。

• スクリプトは静的であり、永続的にキャッシュできます
• PHPはXSSベクトルではなくなりました
• 懸念の完全な分離

欠点：

• 追加のHTTPリクエストが必要
• より複雑なjavascript

脚本

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

JavaScriptコードの初期化に使用する場合のみ悪い習慣ではありません（WordPressのテーマでは、それを処理する唯一の方法であるため、site_url（）のようなphp関数でjavascriptオブジェクトを初期化します（取得するためにajaxリクエストを使用できます） json、など...しかし、それはお尻の痛みです）。

いい練習：

悪い習慣：