java - 混合使用 Javascript 和 JSP 时应遵循的良好做法？

Question

在理想情况下，我想将 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) 初始化值。有时您需要使用 JSP 获取值，这将在 javascript 方法中使用

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 分离更容易。我正在寻找简化此过程的建议，并希望很多人都有值得分享的经验。

Answer 1

混合使用 JavaScript 和 JSP 会使代码更难阅读、重用、维护，还会降低性能(此类 JS 代码无法外部化和压缩)。尽可能避免这种情况。

一种方法是在一个地方收集所有与 JSP 相关的变量，并将非 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这样的模块加载库。而不是原始地定义全局变量。