3

理想的な世界では、Javascript を完全に別のファイルに分離し、それを JSP ページに含めたいと考えています。しかし、動的に生成された Javascript は非常に簡単に記述できるという理由だけで、このルールに従うのに苦労する場合があります。

いくつかの例:

1) アラート ボックスのロケール固有のエラー メッセージ。

<%
Locale locale = ..//get current locale
%>

<script language="JavaScript">
function checkMessage() {
  if(document.form.msg.value=='') {
    alert(<%= *LocaleHelper.getMessage(locale,"please_provide_message")* %>); //get the locale specific message . mixing Javascript and JSP !!!
  }
}

2) 値の初期化。JavaScript メソッド内で使用される JSP を使用して値を取得する必要がある場合があります。

function computeExpiry () {
 var creationDate= <%= creationDate =%>
 var currentDate = document.form.date.value;
 var jsCreationDate= converToDate(creationDate);
 return currentDate>creationDate ;
}

3) 構成オブジェクトを動的に初期化する

var myConfig = {
     modal:true,
     resize:true,
   <% if (lastPage) { %>
     showPreviousButton  :true,  
     showNextButton : false ,
     showSubmitButton : true,
   <%}  else  {%>
   showPreviousButton  :true,  
     showNextButton : true ,
     showSubmitButton : false,
   <%} %>

ご想像のとおり、あらゆる種類の規則がなければ、すべての JSP は Javascript と JSP の見苦しい組み合わせになり、理解と保守が難しく、再利用できない JavaScript コードがたくさん含まれます。

私は完璧な解決策を探しているわけではありません。純粋な Javascript と JSP の分離を維持しようとするよりも、これを行う方が簡単であることはわかっています。このプロセスを容易にするための提案を探しており、多くの人が共有する価値のある経験を持っていることを願っています.

4

3 に答える 3

7

JavaScript と JSP を混在させると、コードの読み取り、再利用、保守が難しくなり、パフォーマンスも低下します (そのような JS コードは外部化および圧縮できません)。可能であればそれを避けてください。

1 つの方法は、すべての JSP 関連の変数を 1 か所に集め、非 JSP コードを別の純粋な / 静的 JavaScript ファイルに分解することです。例えば：

<script type='text/javascript' > 
    var app = { // global app "namespace" holds app-level variables
     msg: "<%= *LocaleHelper.getMessage(locale,"please_provide_message")* %>";
     creationDate: <%= creationDate =%>;
     btnConfig: {
       <% if (lastPage) { %>
           showNextButton : false ,
           showSubmitButton : true,
       <%} else  {%>
           showNextButton : true ,
           showSubmitButton : false,
       <%} %>
      }
    };
</script>

// following JS has no JSP, you can externalize them into a separate JS file
// s.t. they can be compressed and cached.
function checkMessage() {
  if(document.form.msg.value=='') {
    alert(app.msg);
  }
}

function computeExpiry () {
    var creationDate= app.creationDate;
    var currentDate = document.form.date.value;
    var jsCreationDate= converToDate(creationDate);
    return currentDate > creationDate;
 }

 var myConfig = _.extend({   // underscore library's extend
     modal: true,
     resize: true,
     showPreviousButton: true,  
 }, app.btnConfig);

ところで、実際のアプリケーションでは、グローバル変数をプリミティブに定義するのではなく、RequireJSのようなモジュール ローダー ライブラリをお勧めします。

于 2013-02-04T07:04:40.093 に答える
5

これを避けようとしますが、バックエンドからフロントエンドにデータを渡す必要がある場合は、バックエンドのハッシュによって作成されたフラットなJavaScriptオブジェクトを使用します。任意の言語のハッシュをJSON文字列に変換できます。HTMLページにタグを配置し、<script>そのJSON文字列をその中にダンプして、JavaScript変数に割り当てます。

例えば：

<script>
  var dataFromBackEnd = JSON.parse(<%= Hash.toJSON(); %>); // I'm just assuming JSP part
</script>

この時点から、JavaScriptはロジックに注意を払う必要があります。JSがアクションを実行する必要があるという条件がある場合は、そのブール値をJSに渡します。ロジックを混在させないでください。

于 2013-02-04T07:29:01.657 に答える
0

最初にできることは、スクリプトレットの使用を避けることです。代わりに、JSTL として JSP タグを使用します。これにより、コードをより適切にフォーマットできます。

于 2013-02-04T06:49:07.947 に答える