混合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字符串。将<script>标记放在HTML页面中，然后在其中转储该JSON字符串，并将其分配给JavaScript变量。

例如：

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

从这一点来看，JavaScript应该注意逻辑。如果有条件需要JS采取行动，则将其布尔值传递给JS。不要混淆逻辑。