web-dev-qa-db-ja.com

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

このサイトで何度もこのようなことをやろうとしている人を見かけます。

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

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

  });
</script>

これは、人々が自然に陥るある種のパターンだとは思いません。これを示しているある種のチュートリアルや学習資料がそこにあるに違いありません。私が求めているのは、私がこれをあまりにも大きな取引にしているのか、それともこれは本当に悪い習慣なのか？

編集：私の友人に、これについてRubyをJavaScriptに含めることがよくあります。

JavaScriptにアプリケーション全体の定数を動的に配置して、2つのファイルを編集する必要がないようにしてもよいですか。例えば...

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

ライブラリで使用する予定のデータを直接エンコードしても問題ありません

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

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

phpjavascriptweb-development
55
Greg Guida

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

dataを唯一のインターフェースにして、2つの言語を分離してみてください-codeを混同しないでください。

あなたの例では、PHPを使用して、JavaScriptで利用可能なcfg構造体にデータを入力することにより、コードを改善できます。

<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経由でフェッチする必要はありません。

83
Ates Goral

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

あなたがしなければならないのは、懸念の分離とプログレッシブエンハンスメントの意味を理解することです。

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

あなたのケースではおそらくdivにクラスが必要であり、クラスセレクターでそれを選択します

21
Raynos

スニペットの最大の問題は、_#_がないため、有効なjQueryセレクターにならないことです;）。

PHPをJavaScriptに含めることは可能な限り避けてください。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を含める必要がある場合がありますare状況ですが、これらはごくわずかであることを認めなければなりません。

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

_var config = { assets: "<?php echo $yourConfig['asset_url']; ?>" };
_
10
Matt

これは私の意見では悪い習慣です。たとえば、このファイルを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-そしてコードは、そこで行う必要があるものに応じてますます大きくなる可能性があります）。

8
alessioalex

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

6
CodeZombie

私はこの悪い習慣を考えます。スクリプトブロック内に動的コンテンツを配置する場合、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バグがすり抜けるリスクはありません。
6
Joeri Sebrechts

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

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

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

5
Zachary K

一部の人々はそれが悪い習慣だと主張するでしょう。 PHP JS内にあるためではありませんが、インラインJSであるため、次回のロードを容易にするためにブラウザーによってキャッシュされません。

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

5
Nick

PHPエラーが表示されるように設定されていて、PHP JavaScriptにエラー。

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

4
Alex Coplan

それは誰に依存します、そしてあなたが私に尋ねるなら、はい、私はいくつかの理由でそれをバックプラクティスと考えます。まず第一に、私はそれ自身のJSファイルにphpパーサーが触れることができないであろうJavaScriptコードを含めることを好みます。

次に、phpはサーバー時にのみ実行されるため、phpの変数に依存してJavaScriptを変更すると、うまく機能しない可能性があります。 JavaScriptで制御したいページ読み込み設定がある場合は、通常、その値をphpを使用してDOMに追加することをお勧めします。これにより、JavaScriptが必要なときに必要なときに（たとえば、非表示のdivで）値を取得できるようになります。

最後に、組織化の目的だけで、これは非常に煩わしくなります。 （私の意見では）htmlとphpを混ぜ合わせるには十分に悪いです。

3
Explosion Pills

PHPをconfigデータオブジェクトに含めることは、90％の方法で行われますが、完全に分離することをお勧めします。RESTfulAPIを使用して、必要、それはもう少し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);
       }
    });
})
1
roo2