Scripting Essentials

Although after some persuasion I’ve become somewhat of a convert to the church of JavaScript libraries, some (in fact, for me, most) smaller scripting tasks just don’t require a library. I’m a firm believer, especially with JavaScript, that simple is best. File size / download time arguments aside, the less code you can get away with having the browser parse and execute the better off you are. Less for the browser to do. Less to go wrong. Less to try to understand. In JavaScript development, I think this need for minimalism is as important as the need to write code for re-use which is one of the major aspect in which it differs from traditional software development wisdom. There are however some bits of code I can’t do without for any scripting task.

For years I’ve found myself copying and pasting the same old stuff into my script files before I write a single line. This is a tedious task so, while writing some code for the upcoming @media 2007 site, I decided to put together a JS file of absolute essentials. A set of functions I always use for any scripting task that isn’t a one-liner. It turned out to be an interesting exercise as trying to be absolutely minimal in anything often is. What code is always useful? Here’s what I came up with (in no particular order):

  1. JavaScript 1.6’s new array methods implemented cross browser: Working with lists is 90% of JS development and these make it much better. I only use forEach, map and filter all the time though so I’ll just add them in.
  2. Array methods as generics cross browser: Because you always need to use the above methods as well as slice etc on node lists, the arguments array and other lists that don’t have them.
  3. The good old $ function: It’s a must to stave off the old RSI.
  4. A means of getting elements by class name: This one’s mega important to the unobtrusive scripters amoungst us. I’ve written a version that will try to use XPath whenever possible for extra nippy-ness.
  5. A good cross browser event handler implementation: Having something stable to work with really helps. I use Dean Edwards’. It’s also good to have the script automatically clean up all the handlers on page unload to prevent creeky old IE from leaking it’s memory.
  6. A cross browser DOMContentLoaded event: If you’re not writing script inside the body of your document you’re going to need this. onload just doesn’t cut it. Again, I use a version of the technique that Matthias Miller and Dean Edwards came up with. It’s also in Low Pro and is solid.

So, here are my JavaScript essentials posted for your reference. I’m not releasing this and I’m definitely not supporting it but some of you might find it interesting all the same. It’s worth making your own.

What are your JavaScript essentials?

21 Comments (Closed)

Well, for the basic feelgood factor in the javascript world I tend to include the JQuery library. It’s relatively small and provides excellent querying capabilities against the DOM, e.g. based on CSS Style selectors. Stuff like $(“div.message”).addClass(“invisible”) is just very practical. The library also provides a nice entry point…

$(document).ready(function() { // DOM is ready });

Anyways, it’s already 15kb (was 10 once), so it’s already bloating (why must it be?), but it’s just fun to use it.

Frank QuednauFrank Quednau at 10.01.07 / 21PM

I’m considering making my own, and yours contains pretty much everything I’d put in it. I’d probably just add Dean Edward’s Base.js too, because it’s still quite small, useful and pretty.

jQuery and its friends have their use, but not in a “JavaScript essentials” micro compilation IMHO.

matmat at 10.01.07 / 23PM

mat: I considered putting base.js in as well but after thinking about it I don’t always need inheritance. In fact, I rarely do. It is cool though.

I also agree that, for me, I don’t consider jQuery a library just containing essentials. It’s interesting what the effect of marketing jQuery’s packed size has had on people thinking of it as a small library. In fact, if you pack Prototype in the same manner it comes out smaller than jQuery. The Prototype guys don’t agree with using obfuscated code (rightly I think) and use gzip compression on their scripts but it does mean they’ve missed out on being a micro framework :)

DanDan at 11.01.07 / 10AM

I think your $$ function has a bug when using a context.

s/document.getElementsByTagName(‘‘)/context.getElementsByTagName(‘‘)/

Possibly?

Anyway, my essentials are actually pretty similar but I also include some IE mac workarounds.

Daniel JamesDaniel James at 11.01.07 / 13PM

I used to use Dean’s cssQuery all the time. Apart from that I think you’ve got it covered… Events, finding by CSS and onDOMLoaded.

Mike StenhouseMike Stenhouse at 12.01.07 / 19PM

Great list, Dan. I often find myself adding in an Ajax httpRequest function, simple functions to add/remove/check class names, as well as a couple functions to handle reading and writing cookies (thanks to QuirksMode).

These days, though, I’ve been using jQuery on any bigger projects. But these simple library functions are indispensable with more simple JavaScript tasks.

Jesse SkinnerJesse Skinner at 13.01.07 / 18PM

@Frank: Well, it was 10k when it didn’t have Ajax or any other major features. It’s 19k now – but we’ve only been removing features. The primary increase in size has been in ironing out cross browser compatibility issues. (For example, did you know that .getElementsByTagName(”*”) fails on Object elements in IE7?)

@Dan: Prototype 1.5.0_rc2 is 27k (when compressed with Packer), jQuery 1.1 is 19k. Prototype uncompressed is 67k, jQuery uncompressed (with comments) is 56k. Are you referring to a different version of Prototype/jQuery?

JohnJohn at 14.01.07 / 23PM

It’s a really interesting point Dan and your list is a good ‘en. I have to admit though, I am somewhat of a library junkie. I use YUI like there is no tomorrow.

A couple of things I do miss being in YUI though are an insert child node at position X. It only took me a coulpe of lines to write but it’s super useful for lists.

I also really like a function which adds a script or a style tag (with CSS in it) to head and then removes it, as an alternative to XHR. That’s pretty neat.

TomTom at 15.01.07 / 00AM

It’s definitely a very small world… http://blog.360.yahoo.com/blog-Vdrx7eU3fqovesPu9Y8Y?p=24

Felix PleşoianuFelix Pleşoianu at 15.01.07 / 08AM

It’s very cool to see people are more and more concerned by overwhelming number of rarely used functions that come with frameworks. We don’t need all the crap. Just some functions that make life easier. Great post!

Bas WennekerBas Wenneker at 15.01.07 / 09AM

This made so much more sense than dozens of JavaScript related posts advertising this or that library as the answer to all problems. Also, thanks for not offering it in marketing speak :-)

The only thing I am missing is a class to add and remove CSS classes, cause this is my main way of hiding and showing content and providing non-JS and JS version styling.

Chris HeilmannChris Heilmann at 15.01.07 / 10AM

Thanks Dan. Why window.onContentedLoad is not part of 1.6 will continue to be a mystery to me.

Derek AllardDerek Allard at 15.01.07 / 12PM

John: That was a flippant comment that I shouldn’t have made without qualifying it so I’ll retract it until I remember the details. I made that comment based on some tests using gzip on both of the libraries a few months ago (not sure of the versions, probably Prototype 1.4 and a pre-1.1 version of jQuery). However, I wasn’t intending it as a potshot at jQuery. I just thought that it’s interesting how people react to libraries advertising the packed size rather than the uncompressed size.

jQuery 1.1 is genius by the way. Beautiful piece of work. I’m using it in my current project and it’s excellent.

Tom: A JSONRequest style function is definitely useful (and I have one up my sleeve) but I don’t always use XHR and the like so it didn’t go in.

Christian: add and remove class names is a good suggestion. It’s going in!

DanDan at 15.01.07 / 14PM

@Dan: Thanks for clarifying that – glad you’re enjoying jQuery! I’m definitely curious to see what you’re using it for.

John ResigJohn Resig at 15.01.07 / 22PM

A lot of the time you really don’t need the full power of one of the large libraries, but the little bits of enhanced functionality do make life much easier.

I’ve been having having a play with this, and so far, excellent!. Thanks Dan.

David SingletonDavid Singleton at 16.01.07 / 09AM

I’ve been giving your compilation a try and have found a couple of things i’ve had to hackishly (ie. inelegantly) address:

Firstly the event object is missing an e.target = e.srcElement type thing for IE. That same fine browser seems to choke a bit on your Event.remove code on my machine (ies4linux); I just threw in a try..catch.

Anyway, just a couple of things you may not have noticed, nice work :).

Stefan SchneiderStefan Schneider at 27.01.07 / 10AM

Stefan: I like normalising e.target. I think I’ll add that in.

DanDan at 31.01.07 / 14PM

I’ve been using mootools 1.0 for a couple weeks and find it rather indispensable now. The modular download sets it up to suit pretty much any size project.

Not to randomly promote YAJF but just thought I’d mention it since rather surprisingly no one else has..

Aeron GlemannAeron Glemann at 06.02.07 / 20PM

Dan: Keep in mind that Safari reports textnodes as e.target. That is a bit more difficult to normalize because e.target is there and read-only. Cloning the event-object works, but you have to refer to the original preventDefault and stopPropagation methods. In case you intend to fix that, too, check jQuery.event.fix for reference.

Jörn ZaeffererJörn Zaefferer at 21.02.07 / 08AM


    scope = scope || this;
/* this ??? it must be window */
    scope = scope || window;

AKSAKS at 08.03.07 / 19PM

the6246@danwebb.net

feature825@danwebb.net
Content-Transfer-Encoding: quoted-printable
Content-Type: text/html
Subjecfeature825@danwebb.net Content-Transfer-Encoding: quoted-printable Content-Type: text/html Subjec at 04.04.07 / 04AM

About This Article