JSPタグ内でJavaScriptを使用する

StackOverflow https://stackoverflow.com/questions/229726

  •  04-07-2019
  •  | 
  •  

質問

この質問に関連するjs-ファイルのインポートを再確認しましたタグの内容自体。同様の問題があります。ここには、HTMLを生成するjspタグと、このHTMLの動作を処理する汎用js実装があります。さらに、初期化ステートメントをいくつか記述する必要があるため、後でJavaScriptを使用して使用できます。この<！> quot; handler <！> quot;を使用できるようにするにはJavaScript内では、何らかの方法でアクセスできるはずです。

問題は...インライン<！> lt; script <！> gt;を書いても大丈夫ですか？インスタンス化および初期化の目的でHTMLとともにタグを使用します（個人的には非常にエレガントだとは思わない）。 JSの世界にアクセスできるようにするために、ハンドラーオブジェクトを参照するグローバル変数を残す必要があります（あまりエレガントではありませんが）、それを行うより良い方法はありますか？

役に立ちましたか？

解決

独自のファイルでjavascriptを使用する必要があります。これは通常、 Progressive Enhancement で行われます。ただし、同じ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ファイルで分離されています。

他のヒント

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

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

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

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

グローバル変数に関しては、多くの場合、すべてを開始するトップレベルオブジェクトのグローバルがあります。その中には、ヘルパーオブジェクトへの他のすべての参照があります。

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

より良い方法については、私はこれらを知りません。私はこれをほとんどしなかったので、よりエレガントな、または<！> quot; proper <！> quot;を探していませんでした。ソリューション。

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top