Terminally Incoherent

Admittedly, I’m a certified Stage 3 Javascript fanboi. There is a lot of things I love about the language, but one thing I do not particularly care for is the script tag syntax. Let me show you what I mean. Pretty much every page I created recently has something like this near the top:

<script type="text/javascript" src="jquery.js"></script>
 
<script type="text/javascript">
 
   $(document).ready(function(){
      // Your code here
   });
 
</script>

In other words you have two script tags in your code. First one imports the external js file (in this case the JQuery library) and the second one calls some functions from that file. If the first script tag fails to import the external code for some reason (for example due to a network problem) then the second tag will blow up in your face immediately. Granted this is how embedding of javascript in HTML was done since the begging of time, but you can’t say this is a graceful behavior.

John Resig (the man behind JQuery) noticed this, and he proposed to fix this behavior. He proposed to change the behavior of your script tags in order to allow you to write your code this way:

<script type="text/javascript" src="jquery.js">
 
   $(document).ready(function(){
      // Your code here
   });
 
</script>

Embedding the code operating on the library in the very same script tag has many benefits. For one, it logically groups the code so the calls to library functions occur in the same place that library is imported. Furthermore, it prevents network related failures. If you can’t import jquery.js, the code related to it will not get executed. This is a much more graceful than what we have now.

The best part is that these are not just some theoretical musings that will never be implemented by any of the mainstream browsers. John achieved this effect by adding 3 lines of code to the end of jQuery.js file ultimately proving two things:

1. That John Resig is the man
2. That jQuery is FUCKING AWESOME

In fact he takes it one step further. For example, roughly 99% of code you will write against the framework will be inside the $(document).ready closure. So while we are using shortcuts, why not just make that code optional in our modified tags:

<script type="text/javascript" src="jquery.js">
      // Your code here
</script>

Doesn’t that look much clearer, and straightforward? I love it! But don’t get too excited yet. This functionality is not included in jQuery yet and there is no guarantee that it will ever make into it. John says it will need some through testing before it gets deployed.

Once more I’m amazed, and humbled by what you can do with Javascript, and exactly how much power is packed into that 16kb jQuery script. Mind boggling!

This entry was posted on Wednesday, September 10th, 2008 at 11:15 am and is filed under technology, programming, web design, javascript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Related Posts: