10

MVC パターンに準拠した Web アプリケーション フレームワーク (Symfony 1.3.6) を使用しています。

ビューレイヤーは、テンプレートデコレーターで構成されています。テンプレート ファイルには他のテンプレートも含まれる場合があります。これが私の質問の原因です。

いくつかのテンプレートで構成されるページ (「ホームページ」と呼びましょう) があると仮定します (コードはリファクタリングされているため、「サブ テンプレート」は他のページで使用できます。

リファクタリングの結果、メイン テンプレートで使用される小さなテンプレート (この例では「ホームページ」) には、jQuery 関連のコードを含める必要があります。

ホームページ テンプレートが 2 つのサブ テンプレートを使用するとします。

  • テンプレートA
  • テンプレート B

テンプレート A が次のスニペットで構成されているとします。

<div id="field1">This is field 1</div>
<script type="text/javascript">
$(document).ready(function(){
   $('#field1').click(function(){
      alert('Field 1 clicked!');
   });
</div>
</script>

テンプレート B が次のスニペットで構成されているとします。

<div id="field2">This is field 2</div>
<script type="text/javascript">
$(document).ready(function(){
   $('#field2').click(function(){
      alert('Field 2 clicked!');
   });
</div>
</script>

テンプレート「ホームページ」は次のようになります。

<html>
  <head>
    <title>Multiple jQuery snippet test</title>
    <script src="path_to_jquery"></script>
 </head>
 <body>
   <div>include_template('template A')</div>
   <div>include_template('template B')</div>
 </body>
</html>

私はこれを試してみましたが、驚いたことに、マージされた最終ページ ('homepage) に $(document).ready() が 1 つしかないという点で機能しました。

私のブラウザー (Firefox) か Web フレームワーク (Symfony) のどちらかが舞台裏で「クリーンアップ」を行ったかどうかはわかりません。

私の質問は、jQuery 機能を「小さな再利用可能なテンプレート」にリファクタリングして、別のページで同じ機能を提供するために再利用できるようにする場合、どのように進めるのが最善の方法でしょうか?

ところで、私が話していることではないので、誰もjQueryプラグインを書くことを提案しないことを願っています.

4

3 に答える 3

13

複数の$(document).ready()呼び出しに問題はありませんが、いくつかの注意事項があります。

  • 可読性の低下。
  • スコープ: 1 つの内部で宣言された関数/変数/オブジェクトは$(document).ready()、他のどのオブジェクトにも表示されません。この簡単なデモを参照してください。

SOに関するこの前の質問も参照してください。

于 2010-08-21T16:29:17.500 に答える
5

$(document).ready()実際、ページ上で好きなだけのインスタンスを使用できます。アプリケーションにとって最も意味のある方法で、初期化コードのブロックをグループ化できます。ただし、onLoad が起動したときに何が起こるかを理解するのはもはや簡単ではないため、柔軟性が得られる分、明快さが少し失われる可能性があります。

参考文献:複数の $(document).ready() に関する jQuery チュートリアル

于 2010-08-21T16:25:09.977 に答える
-1

異なるページで js コード スニペットを再利用する場合は、次のように各モジュールで view.yml 構成ファイルを使用できます。

firstActionSuccess:
  javascripts: [js1.js, js2.js]
secondActionError:
  javascripts: [js1.js, js3.js]
于 2010-08-21T16:27:16.460 に答える