Difference Between Obtrusive and Unobtrusive JavaScript

Difference between obtrusive and unobtrusive javascript

I don't endorse this anymore as it was valid in 2011 but perhaps not in 2018 and beyond.

Separation of concerns. Your HTML and CSS aren't tied into your JS code. Your JS code isn't inline to some HTML element. Your code doesn't have one big function (or non-function) for everything. You have short, succinct functions.

Modular.
This happens when you correctly separate concerns. Eg, Your awesome canvas animation doesn't need to know how vectors work in order to draw a box.

Don't kill the experience if they don't have JavaScript installed, or aren't running the most recent browsers-- do what you can to gracefully degrade experience.

Don't build mountains of useless code when you only need to do something small. People endlessly complicate their code by re-selecting DOM elements, goofing up semantic HTML and tossing numbered IDs in there, and other strange things that happen because they don't understand the document model or some other bit of technology-- so they rely on "magic" abstraction layers that slow everything down to garbage-speed and bring in mountains of overhead.

What is Unobtrusive Javascript in layman terms?

Checkout the wikipedia article:

• Unobtrusive JavaScript

"Unobtrusive JavaScript" is a general
approach to the use of JavaScript in
web pages. Though the term is not
formally defined, its basic principles
are generally understood to include:

• Separation of functionality (the "behavior layer") from a Web page's
  structure/content and presentation
• Best practices to avoid the problems of traditional JavaScript
  programming (such as browser
  inconsistencies and lack of
  scalability)
• Progressive enhancement to support user agents that may not
  support advanced JavaScript
  functionality[2]

So it is basically separating behavior or javascript from presentation or html.

Example:

<input type="button" id="btn" onclick="alert('Test')" />

That is not unobstrusive javascript because behaviour and presentation are mixed. The onclick shouldn't be there in html and should be part of javascript itself not html.

With above example, you can go unobstrusive like this:

<input type="button" id="btn" />

JavaScript:

var el = document.getElementById('btn');
el.onclick = function(){
  alert('Test');
};

That time we have separated javascript from html with a very basic example.

Note:

There is more to unobstrusive javascript as can be checked out on wikipedia article.

Turning obtrusive JavaScript to unobtrusive

If you want a truly unobtrusive solution, some jQuery will work wonders for you

$(document).ready(function () {

    $('#limitedtextfield').keyup(function () {
        limitText(this.form.limitedtextfield, this.form.countdown, 15);
    });

    $('#limitedtextfield').keydown(function () {
        limitText(this.form.limitedtextfield, this.form.countdown, 15);
    });

    function limitText(limitField, limitCount, limitNum) {
        if (limitField.value.length > limitNum) {
            limitField.value = limitField.value.substring(0, limitNum);
        } else {
            limitCount.value = limitNum - limitField.value.length;
        }
    }
});

See JSFiddle here http://jsfiddle.net/x65Kw/

Unobtrusive Knockout

Great question. I've been writing complex KnockoutJS views for awhile and was never satisfied until I switched to Ryan Niemeyer's class binding provider.

The Knockout ClassBindingProvider allows you to declare your bindings in a JavaScript object and then reference them from a data-class attribute similar to how css classes work. It works great!

See an example TodoMVC app.

Unobtrusive Javascript onclick

Try this code,

Script

function $(id) {
    return document.getElementById(id);
}

$('tester').addEventListener('click', function () {
    alert('Hello world');
});

When you console this $('tester') selector, it simply returns <a id='tester'>CLICK ME</a> which is a html element not an object so you cannot use onclick directly. Instead you have to use addEventListener or attachEvent to bind a click event

Demo JS http://jsfiddle.net/K3eAc/4/

One thing I don't understand about unobtrusive javascript

I think it shold be done with "data-id" parameter as shown in this screencast
http://railscasts.com/episodes/229-polling-for-changes

---

Related Topics