Good practices to follow while mixing Javascript and JSP?

java, javascript, jsp

Solution

Mixing JavaScript and JSP makes code harder to read, reuse, maintain and also degrades performance(such JS code cannot be externalized and compressed). Avoid that when possible.

One way is collecting all JSP related variables in one place and factoring out non-JSP codes into another pure/static JavaScript files. For example:

<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);

BTW, in practical application, I recommend module loader library like RequireJS instead of defining global variables primitively.

Problem

In an ideal world I would like to separate out Javascript to a completely different file and include it in the JSP page. But there are cases were I struggle to follow this rule simply because dynamically generated Javascript is so much easier to write !! Couple of examples : 1) Locale specific error messages in alert boxes. ``` <% 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) Initializing values .Sometimes you need to get values using JSP which will be used inside a javascript method ``` function computeExpiry () { var creationDate= <%= creationDate =%> var currentDate = document.form.date.value; var jsCreationDate= converToDate(creationDate); return currentDate>creationDate ; } ``` 3) Initializing config objects dynamically ``` var myConfig = { modal:true, resize:true, <% if (lastPage) { %> showPreviousButton :true, showNextButton : false , showSubmitButton : true, <%} else {%> showPreviousButton :true, showNextButton : true , showSubmitButton : false, <%} %> ``` As you can imagine, without any kind of conventions , all our JSPs will be a unsightly mix of Javascript and JSP, hard to understand and maintain, with lots of non-reusable javascript code I am not looking for a perfect solution. I know its easier to do this than try to maintain a pure Javascript and JSP separation. I am looking for suggestions to ease this process and hope lots of people have experience worth sharing.

Original source

Related problems