jQuery – refactor your code

jQuery has established itself as one of the most successful javascript libraries of recent time. Its simple learning curve and extensibility have made it a front end developers first choice. With this framework being so widely adopted there is a tendency to see coders falling into many of the pitfalls that scripting languages can cause the less experienced. I want to explain how refactoring can stop your code becoming bloated and make you a better developer for it.

What is code refactoring?

Put simply code refactoring is the process of changing the way code is written without changing its result. Reasons to do this include; improved readability, speed optimisation and a reduction in code size. As Joshua Kerievsky describes.

By continuously improving the design of code, we make it easier and easier to work with. This is in sharp contrast to what typically happens: little refactoring and a great deal of attention paid to expediently adding new features. If you get into the hygienic habit of refactoring continuously, you’ll find that it is easier to extend and maintain code.

A real world example

Like any scripting language there is always more than one way to achieve something, because jQuery is a framework which extends from javascript, there is a world of possibilities and every situation will be unique. So lets put this into context with a real world example. I have 3 forms which I want to show and hide depending on a link being clicked. Here is a typical example of how we might lay out the HTML.

<ul id="social">
  <li><a href="#" rel="facebook">Facebook</a></li>
  <li><a href="#" rel="twitter">twitter</a></li>
  <li><a href="#" rel="none">none</a></li>
</ul>
<br />
<form id="facebook" method="POST" action="#">
  <p><label for="username">Username</label><input type="text" name="username" value=""/></p>
  <p><label for="password">Password<label><input type="text" name="password" value=""/></p>
  <p><input type="submit" value="submit" /></p>
</form>
<form id="twitter" method="POST" action="#">
  <p><label for="username">@Name</label><input type="text" name="username" value=""/></p>
  <p><label for="password">Password<label><input type="text" name="password" value=""/></p>
  <p><input type="submit" value="submit" /></p>
</form>
<form id="none" method="POST" action="#">
  <p><label for="username">Name</label><input type="text" name="username" value=""/></p>
  <p><label for="password">Password<label><input type="text" name="password" value=""/></p>
  <p><label for="password">Re-enter password<label><input type="text" name="password" value=""/></p>
  <p><input type="submit" value="submit" /></p>
</form>

The basic solution

So the first solution is quite straight forward, after all it does the job, and you can see it working on the demo.

Try the basic solution out

$(function() {
  //add a click event
  $("ul#social li a").click(function() {
    //assign the form name
    var formName = $(this).attr("rel");
    //switch the forms
    if(formName == "facebook") {
      $("#none").hide();
      $("#twitter").hide();
      $("#facebook").show();
    } else if (formName = "twitter"){
      $("#none").hide();
      $("#facebook").hide();
      $("#twitter").show();
    } else {
      $("#facebook").hide();
      $("#twitter").hide();
      $("#none").show();
   }
 });
});

All were doing here is adding a click event to each of the list item links. When clicked we run through a scinario of hiding forms and showing others, depending on the form we need to show. This is achieved with some basic flow logic, however as we add more options to the list, so to the code will need to be extended to handle this.

A better solution

The first solution does what it needs to do, but we could refactor this code to achieve the same ends with less code which will be easier to maintain and build on. Lets look at the second solution.

Try the better solution

$(function() {
   //add a click event
   $("ul#social li a").click(function() {
     //assign the form name
     var formName = $(this).attr("rel");
     //hide all the forms initially
     $("form").hide();
     //now only display the form we want to show
     $("form#"+formName).show();
   });
});

Here we have shortened the code to a third of its original size, instead of checking against the form, we simply hide all, then show depending on the option selected. If we add another item to the list and another form, we won’t even need to touch the script.

In summary

jQuery is a wonderful framework and to me, being able to go back over something I wrote several months ago and refactor it is always a very rewarding feeling. Don’t just settle for what works, otherwise you are only cheating yourself out of a better solution. Always try to look for alternatives and never be afraid to start over if you think you could do something better, as it is a great way of learning and honing your skill set.