8

タグコンテンツ自体に関連する js ファイルのインポートに関するこの質問を見てきました。同様の問題があります。ここには、HTML を生成する jsp タグがあり、この HTML の動作を処理する汎用の js 実装があります。さらに、いくつかの初期化ステートメントを記述する必要があるため、後で JavaScript を介して使用できます。JavaScript 内でこの「ハンドラー」を使用できるようにするには、何らかの方法でアクセスできる必要があります。

問題は...インスタンス化と初期化の目的で、HTML と一緒にインラインの <script> タグを書いてもいいですか (個人的にはあまりエレガントではないと思います)? また、JS の世界にアクセスできるようにするために、ハンドラー オブジェクトを参照するグローバル var を残す必要があります (あまりエレガントではないと思います)。それを行うためのより良い方法はありますか?

4

4 に答える 4

9

独自のファイルで JavaScript を使用するように努める必要があります。これは通常、プログレッシブ エンハンスメントで行われます。ただし、同じ JSP が異なる言語でページをレンダリングする場合など、選択の余地がない場合もあります。実際の例を次に示します。

JSP:

  <script src="/javascript/article_admin.js"></script>  
  <script type="text/javascript">  
      NP_ArticleAdmin.initialize({  
            text: {  
              please_confirm_deletion_of: '<i18n:output text="please.confirm.deletion.of"/>',  
              this_cannot_be_undone: '<i18n:output text="this.cannot.be.undone"/>'  
            }  
      });  
  </script>

JavaScript (article_admin.js):

 /*global NP_ArticleAdmin, jQuery, confirm */  
 NP_ArticleAdmin = function ($) {  
     var text;  

     function delete_article(event) {  
         var article = $(this).parents("li.article"),  
         id = article.attr("id"),  
         name = article.find("h3.name").html();  
         if (confirm(text.please_confirm_deletion_of + name + text.this_cannot_be_undone)) {  
             $.post("/admin/delete_article", {id: id});  
             article.fadeOut();  
         }  
         event.preventDefault();  
         return false;  
     }  

     function initialize(data) {  
         text = data.text;  
         $("#articles a.delete").click(delete_article);  
     }  

     return {initialize: initialize};  
 }(jQuery);

この例では、JSP ファイル内の唯一の JavaScript は、そこに存在する必要がある部分です。コア機能は、独自の js ファイルに分割されています。

于 2008-10-23T13:50:09.660 に答える
1

ここで何を尋ねているのか完全にはわかりませんが、<script>JavaScriptコードをインスタンス化するためにJSPにタグを含めることに問題はありません。<script>私はよくこのモデルに従って、ライブラリ コードを外部の JavaScript ファイルに記述し、タグからオブジェクトのコンストラクタを呼び出します。

これにより、ロジックがすべて外部ファイルにあるため、デバッグが容易になります (また、firebug はインライン JavaScript コードのデバッグに問題があるようです)。ライブラリはキャッシュされますが、それらをインスタンス化するデータはキャッシュされません (これは望ましい動作です)。

別の方法は、インスタンス化コードを外部の JavaScript ファイルまたは AJAX 呼び出しで動的に生成することです。私もこれを行いましたが、良い結果が得られました。

決定的な要因は、どれだけの動的データがあるかだと思います。大規模なデータ構造を表す必要がある場合は、JSON を返す AJAX 呼び出しを介して提供します。コンストラクターへの単純な呼び出しの場合は、JSP に入れます。

グローバル変数に関しては、すべてを開始する最上位オブジェクトのグローバル変数をよく使用します。その中には、ヘルパー オブジェクトへの他のすべての参照があります。

于 2008-10-23T13:49:19.863 に答える
0

完全に洗練されているわけではないことには同意しますが、サーバー側の決定を AJAX 統合環境と組み合わせるときに、何度かそれを行うことが知られています。いくつかの変数を初期化するためにインラインの <script> タグをエコーすることは、誰もそれを見ない限り、ひどいことではありません。

より良い方法については、私はこれらを知りません。私はめったにこれを行っていないので、よりエレガントな、または「適切な」ソリューションを探していません。

于 2008-10-23T13:48:30.707 に答える
0

<script>HTMLに沿ったタグの使用でOKです。必要な場合もありますが、他に良い方法があるかどうかはわかりません。物事をより複雑に見せることなく、<script>タグを使用して js ファイルを実装する方法を見つけようとする方が簡単です。

于 2008-10-23T13:49:45.603 に答える