混合 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 这样的模块加载器库，而不是原始地定义全局变量。

Answer 2

我尽量避免这种情况，但是当我必须将数据从后端传递 到前端时，我使用了一个平面 JavaScript 对象，该对象由后端的哈希创建。您可以将任何语言的哈希转换为 JSON 字符串。在您的 HTML 页面中放置一个 <script> 标记并将该 JSON 字符串转储到其中并将其分配给 JavaScript 变量。

例如：

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

从这一点来看，JavaScript 应该关注逻辑。如果存在 JS 需要对其采取措施的条件，则将其布尔值传递给 JS。不要混合逻辑。

Answer 3

首先，您可以避免使用小脚本。而是使用它使用 JSP 标记，如 JSTL。它可以让你更好地格式化你的代码。