Thinking about Javascript

The more I use jQuery the more I realise that I really should have checked out the source code a while back – rather than just viewing the framework as some kind of magical black box of Javascript wonder (not that jQuery isn’t full of wonder of course!). Thinking about how jQuery (and Javascript) works has helped me greatly in deciding good ways to do things.

For example I have seen things like this:

$('#someElement').css('color','green');
$('#someElement').css('width','200');
$('#someElement').html('Some new text');

The problems with this are:

1) You are selecting the same element three times – this is going to cause additional overhead and potentially performance issues
2) If you want to change the element ID or use a different element then you have to replace all the mentions – in this example this would obviously be trivial – but as your code base grows this is too rigid and inflexible.
3) Setting styles using Javascript – now I don’t have a problem with doing this generally – but its always worth considering using addClass / removeClass – the benefit being if you (or even another member of your team – who may not know Javascript) want to change your styles you don’t have to change your Javascript code – its separated out into the stylesheet.
4) It makes me sad inside.

A better version would be:

$('#someElement').addClass('myClass').html('Some new text');

Where ‘myClass’ is a defined CSS style. Or if you are using your ‘someElement’ object in many places:

var someElement = $('#someElement');
someElement.addClass('myClass').html('Some new text');

Now someElement can be used throughout your code – without having to go and fetch that bad boy again. As always with stuff like this – do be careful about the scope – consider whether this needs to live in the global space or not depending on what access is required (or consider using namespaces to keep everything tidy).

This is the difference between blindly using things and understanding how they work and using them correctly. Dive in and go and look at the source of jQuery (or your framework of choice) but also, code some stuff up from first principles as well. You’ll learn a hell of a lot and it will help you use the tools that you have available much more effectively.

Rob Basden

Rob founded a web design company company which was acquired by Linear Blue in 2009 in order to bring web development to bring professional web development services in-house. After graduating from Warwick University with a bachelors degree in Computer Systems Engineering, Rob entered the world of web development. He began by supporting a development team then moved on to running his own team as development director. His skills include extensive knowledge of PHP / HTML / Javascript / CSS / Ajax methodologies and Flash / Actionscript.

More Posts

Posted in: Web

3 thoughts on “Thinking about Javascript”

  1. Rob,

    Very poignant. After spending months using jQuery I finally got around to reading Crockford’s The Good Parts – and bam! Back to square one.

    I would echo what you said, use globals as an absolute last resort – namespacing via a closure is by far the best solution. It rides against one’s natural instinct to start with, but when you grasp the concept you realise just how mickey-mouse your (read: ‘my’) original usage was.

    1. I think a lot of people have these same issues when learning Javascript – because it will let you get away with a HELL of a lot of randomness / mess in your code – you can just blaze through and on to something else (especially if your running a tight deadline, etc…) when you are first learning.

      The other day I asked a new member of the web team to look through and try some Javascript just to get familiar with it, her comment to me a little later was “wow, people really hate Javascript!”. I think lot of that hate comes from misunderstanding the language, but also from poorly developed solutions. This is not helped by the large number of copy and paste snippets of Javascript floating around that people use as a substitue for learning the language.

      P.S I have been thinking of getting a copy of “Javascript The Good Parts” – glad to know you found it useful – definitely going to have to grab a copy now 🙂
      If you have any other recommendations then please post back.

  2. Rob,

    If you only buy one book this year, make it ‘JavaScript The Good Parts’ – It has completely changed my approach on JS programming. Furthermore, it will give you more insight when reading the core of libraries.

    The biggest take-away for me was the section on sub-setting javascript to obtain a language free from the bad parts. I was completely unaware that even some of the useful methods have major pitfalls, and I’m NOT talking about ‘eval’, but methods you use every day- Chapters 8-10 talk about these.

    The scariest one, using “this” or “that” guarantees security flaws! But he gives a remarkable solution to this problem, by having private hand-shaking methods that return functions and arguments, then an calls “introducer” method for calling those, wrapped in a closure, returns your information. Bingo! everything is private, nothing is accessible from outside, no use of “this” or “that”.

    The book will throw light on your statement about learning the language, as your comment, above, insinuates. Javascript is the only language that people start to DEPLOY without learning it first – which wouldn’t be quite so bad if it weren’t for the small fact that it’s the most ubiquitous language in the world!

    mmm.. I only meant to write the first paragraph, but got a bit carried away 😉

    Darren.

Leave a Reply