By John BoticaYou might have heard someone mention unobtrusive JavaScript, a colleague, employee or friend, and you may not know what exactly they were referring to. My hope is to explain what it is, give some very general examples to help you better understand it, and explain why you should be using it for your website(s).
What is Unobtrusive JavaScript?
Unobtrusive JavaScript, in a nutshell is, JavaScript that is detached or separated/external from your site’s content or structure. Separating your behavior (JavaScript) from your structure /content has the same principle of separating your site’s presentation (CSS) from your site’s structure/content, it allows for more consistency and scalability for your website.
What does Unobtrusive JavaScript look like?
Here is a very general example of the difference in obtrusive JavaScript and unobtrusive JavaScript using the jQuery library. Below are examples of 2 ways to do an FAQ toggle, when the question is clicked the answer would show/hide.
Obtrusive (or in-line) JavaScript:
<div id="faq1" class="faqAnswer">FAQ Answer 1</div>
<a href=”#faq2” onclick=”$(‘#faq2′).css(‘display’) == ‘none’ ? $(‘#faq2′).show() : $(‘#faq2′).hide();”>FAQ Question 2</a>
<div id="faq2">FAQ Answer 2</div>
<a href=”#faq3” onclick=”$(‘#faq3′).css(‘display’) == ‘none’ ? $(‘#faq3′).show() : $(‘#faq3′).hide();”>FAQ Question 3</a>
<div id="faq3">FAQ Answer 3</div>
As we can see in the obtrusive method, an onclick event has been added to each FAQ question that shows or hides the FAQ answer. If we ever wanted to change the onclick to something else or adjust it in anyway(adding a slide or a fade), we would need to update it for each of the 3 FAQs here. Now imagine if these same or similar FAQs with the same event were located on 5 different pages of your site. That would be a lot of code to update.
Unobtrusive JavaScript (using jQuery):
HTML structure:
<div id="faq1" class="faqAnswer">FAQ Answer1</div>
<a href=”#faq2” class=”faqQuestion”>FAQ Question 2</a>
<div id="faq2">FAQ Answer2</div>
<a href=”#faq3” class=”faqQuestion”>FAQ Question 3</a>
<div id="faq3">FAQ Answer3</div>
JavaScript located in an external file:
$(‘a.faqQuestion’).click(function(e){
e.preventDefault();
var faqAnswer = $(this).href.split(‘#’)[1];
if($(‘#’+faqAnswer).css(‘display’) == ‘none’){
$(‘#’+faqAnswer).show();
}else{
$(‘#’+faqAnswer).hide();
}
return false;
});
}
This snippet gets run when the content/structure of your site is loaded, it will be added to every link with the class of faqQuestion. If you need to update the event, or change the event type, you can make that change once, and it will be changed for every link with the class of faqQuestion. So instead of changing the onclick of all links multiple times you only need to change once. Your JavaScript is not meshed together with your HTML, it is now separated, you can see how much lighter the HTML is and how all your logic is contained in 1 chunk.
What are the benefits to using Unobtrusive JavaScript?
- Separation of behavior and structure/content - keeping your HTML markup clean helps make page load times faster, makes updating the code easier and keeps all your logic out of your content.
- Single file that can be cached - your JavaScript file can be cached and accessed rapidly.
- Ease in future development and making updates - your logic is in one place, hopefully organized and clean, which speeds up the process of adding and updating code.
- Saves time in updating - you do not have to wade through HTML markup or make changes to multiple files. If you have one behavior you need to update, you only need to change it once.
- Saves money – in that it saves time; time equals money, need I say more
- Keeps up with standards, current trends and best practices - your development team should be doing this already. Being familiar with the newer technologies, easier coding methods, upcoming changes to the web etc. You would not want your mechanic to be working on your new BMW M5 if the last car they worked on was an ’88 Civic.
- Allows for ease of scalability - increase in volume and scope with less cost.
Almost all current JavaScript libraries encourage unobtrusive JavaScript practices, but whether or not you or your development team is implementing them in this method is another matter. jQuery and Prototype have great features for writing unobtrusive JavaScript, they virtually hold your hand.
So if you haven’t considered unobtrusive JavaScript, or felt that it would take too much time, reconsider. Anyone that might work on a site you build in the future will appreciate it. It can take time to switch over or get familiar with it, but trust me, it will be worth it. Ask your developers if they think unobtrusive JavaScript is important, if they don’t, consider looking for new developers.
Post a comment and let me know how unobtrusive JavaScript has improved (or not improved) your website development. I would love to hear from you.
Some Helpful Resources:
- Behavioral Separation (alistapart.com)
- Unobtrusive JavaScript – Rules to Work By (ajaxian.com)
- Easy as Pie: Unobtrusive JavaScript (phazm.com)
- Getting Started with jQuery (sixrevisions.com)
- jQuery Lesson Series: Introduction to Selectors (woorkup.com)
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=b9a2aca0-a752-45bd-a819-8d388ce95f51)
Comments 2
is there a specific reason you’re using preventDefault & return false?
Hey Matt – in our experience and with using different libraries for any given project we have found that it helps being a little verbose by adding the preventDefault() and the return false in the function. It has saved us time and helps with backwards compatibility.
Cheers!
Leave a Comment