2

このような：

<script>
    setSomeStuffUp();

    <?php if ($otherStuffNeedsToBeDone === true) { ?>

         doSomeOtherStuff();

    <?php } ?>

    breakSomeStuffDown();
</script>

仕事でこのようなものに出くわしました-テンプレート（Smarty）で行われたため、少しきれいに見えますが、それほどではありません! また、jQuery セレクターなどに使用されるいくつかのテンプレート変数や、その他の少し不快に見えるビットもエコーします。

これを行う適切な方法は何ですか？JS のロジックに使用する必要があるデータを AJAX 経由で JSON としてロードしますか? HTML データ属性?

それについての何かは、悪い、悪い、悪いにおいがするだけです。

みんな、ありがとう。

4

5 に答える 5

4

言語 X を使用して言語 Y でコードを生成するのは悪い習慣です。

たとえば、次のように 2 つの言語を「分離」してみてください。

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

  $(document).ready(function(){
     $("#" + data.id).on("click", function(){
       /*do something*/
     });
  });
</script>

このように、PHP はデータ構造の入力のみを考慮し、JavaScript はデータ構造の使用のみを考慮します。

于 2012-07-25T21:12:19.420 に答える
3

サーバーから構成変数と一部の JavaScript 初期化コードをエコーすることは、一般的にそれほど悪くはないように思えますが、そのようなjs-injection-from-serverの部分がいたるところにある場合は、そのとおりです。少なくともそのようなコードは管理が難しい。

あらゆる種類の初期化を一元化して、静的に定義されたクライアント側 JavaScript ロジックで残りを実行するようにしてください。

アップデート。@Oscar Jara は同じことについて話しており、良い例を提供しています。しかし、サーバー側のロジックが HTML を介して JavaScript 処理用のデータを提供する場合、そのようなケースでも回避できることがよくあります (結局のところ、それが HTML の目的です)。

これは、よく遭遇する些細な例です。JavaScript を介してカルーセルに拡張されるギャラリーを出力したいとします。

サーバー生成 HTML:

<ul id="myGallery">
  <li><img src="img1.jpg /></li>
  <li><img src="img2.jpg /></li>
  <li><img src="img3.jpg /></li>
  ...
</ul>

そして、DOM の準備ができたら、静的な JavaScript コードでカルーセルを初期化します。

// when DOM ready...
AwesomeCarousel.init($('#myGallery'));

ここで、サーバーによって準備されたデータは、画像のリストを含むこの HTML の一部であり、すべての画像を明示的にロードする JavaScript を生成する必要はありません。data-*属性を介して任意のデータを渡すことができます。

于 2012-07-25T21:12:21.157 に答える
2

本格的に取り組みたい場合は、HTML ページに .js ファイルを要求させ、セッション ID またはその他の人物を示すインジケーターと組み合わせて、.js 呼び出しを PHP 呼び出しとして操作し、セッションが必要とするものに基づいて JS を作成し、それを .js ファイルタイプとしてブラウザーに出力します。

しかし、それは大変な作業です。

においが少ないものが必要な場合は、ファイルの末尾にある JSON 文字列を PHP にダンプさせます。

var cfg_string = "{\"username\":\"Norguard\", \"new_messages\":[......]}";  // client

$cfg_obj = array(); // whole lot o'PHP
$json_encoded_cfg = json_encode($cfg_obj);
echo "var cfg_string = {$json_encoded_cfg};" //server-side

そして、安全性を高めるためにクライアントで解析します...

...または、テンプレートで完全にマップを作成します。

$cfg_string = "var dataMap = {";
foreach ($cfg_obj as $key => $val) {
   // print key:val all pretty-like,
   // handle commas (ie: no trailing comma at the end), indent with tabs or spaces
   // if you want, count the number of items so that the object closes ({})
   // without any newline operator, if there are no config settings 
}
echo $cfg_string;

これらはどちらもクリーンで目立たず、すべてを分離しています。構成データ/テキストは、初期化/読み込みコードがどのようなものであれ、すぐ上に移動し、その初期化ロジックにパラメーターとして渡すことができます。

于 2012-07-25T21:31:39.840 に答える
2

個人的には、多くの場合、JS で PHP を使用しています。場合によっては、変数に JSON データ、ページ ID、またはその性質のものを設定する必要があります。私の知る限り、PHP はページに表示されるコードを記述するように設計されており、JS はコンテンツがそこにあるときにユーザーと対話するように設計されています。

おそらくこれを行うためのよりクリーンな方法があるという点で、私はあなたの言っていることを理解しています。あなたはAJAXについて言及しましたが、これはおそらくよりクリーンで、出力されるドキュメントの流れを確実に助けるでしょう. 唯一の問題は、非常に単純で意地悪な変数について、サーバーに 2 番目の要求を行わなければならないことです。数ミリ秒は大した時間ではありませんが、実稼働 Web サイトでは、おそらく、その追加の要求を行ってサーバー リソースを行き詰まらせたくないでしょう。

それを行う最もクリーンな方法が何であるかに応じて、それが大したことである場合...そのコードで別のJSファイルを作成し、必要に応じてサーバーを使用してその個々のファイルを含めます。繰り返しますが、私はこれを行いませんが、テンプレートで最もきれいに見えると思います.

于 2012-07-25T21:12:36.220 に答える
1

サーバー側言語から JavaScript コードにデータを渡すだけであれば、それで問題ありません。そこにある多くのCMSパッケージがそれを行います.

サーバー側で JavaScript コードを条件付きで生成する必要があるとは思えません。ユースケースがあるかもしれませんが、JavaScript は言語そのものなので、ロジックを JavaScript コードに入れてみませんか?

于 2012-07-25T21:09:57.797 に答える