Win a copy of The Java Performance Companion this week in the Performance forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

What is Unobtrusive JavaScript?

 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64980
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Since the hot topic this week is jQuery, the subject of Unobtrusive JavaScript is bound to come up.

Long ago we all figured out how superior it was to move stylistic information out of the markup and into CSS styles. Abominations like the <font> tag were deprecated in HTML 4, and HTML 5 goes further to eliminate all such stylistic markup from HTML.

But even though we separate style from markup, it's still very common to see behavior mixed with the markup.

Unobtrusive JavaScript does for behavior, what CSS does for style -- removes it from the markup.

This has the same advantages. The markup defines the document structure, the CSS defines the styles, and the JavaScript defines the behavior.

Typically, the script is all sequestered into <script> blocks in the <head> and document ready handlers (described here) are used to initialize the page.

This keeps everything neat and tidy, and it's easy to know where to look for the behavioral aspects of the page.
 
Sergio Ramírez
Greenhorn
Posts: 12
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
This sounds pretty cool indeed, it is obviusly taking in count JavaScript is becoming more serious than before(someone say it is a toy language).

Also i guess this is derivated from doing separation of concerns, for instance this sounds like the controller(the behavior of the view) to me, but i may be wrong, maybe it could be like the model(depending on the purpose of the behavior of course...)... not sure exactly... what do you think...?


Sergio
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64980
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
A good example is in the establishment of click handlers. Rather than burying the behavior in the markup using the onclick attribute of a button, in the ready handler, you'd assign the handler using:


Typically, you could also see the handler defined inline using a function literal:



And, you are not limited to a single handler the way that you are with onclick. You can establish as many click handlers (or handlers for any other event type) as you like!
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64980
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I don't think this technique directly maps to the C or M of MVC, but it is an off-shoot of the principle of sequestering things logically and reaps many of the same benefits.
 
Yehuda Katz
Author
Greenhorn
Posts: 21
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Originally posted by Bear Bibeault:
I don't think this technique directly maps to the C or M of MVC, but it is an off-shoot of the principle of sequestering things logically and reaps many of the same benefits.


It's more similar to the separation of concerns that we see in HTML/CSS (which is accepted gospel at this point). Separating behavior from markup is the next, cleaner step after moving style out of markup.

And it has the same benefits of making your behaviors more maintainable (you can have a set of behaviors that are defined by selectors which work across your site, just like CSS).
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic