Tegud.NET

I'm still awaiting my copy of Javascript Patterns, hopefully it'll arrive today so I have some weekend reading.  In the meantime I thought I would post about a technique of property/method access that not everyone will know about.

Accessing a method in javascript is not a complicated operation, usually you just do <object>.<method>().  Nothing hard there.  But this can sometimes lead to somewhat more verbose code that we'd like, for example say we wanted to add or remove a class using jQuery based on a boolean value.

if(myBool)
 	myElement.addClass("Active"); 
else
 	myElement.removeClass("Active");

Sure I can store the class name in a variable and not repeat that, but it'd still leave us with a multiline statement.  Fortunately we can compress this down to a single line of code.  In javascript we can access object property and methods by using array brackets but providing a string key for the property or method name, e.g. <object>["Method"](); Its important to note the method name is in a string, if you don't provide it as a string then it will not work as expected and probably error. Programmers of C# and similar languages will be familiar with this syntax for accessing Dictionaries and similar structures.  

So how can we use this to improve the code above?  Well as we're providing the method name as a string to the "[]", we can simply control what string is placed within it. 

myElement[(myBool ? "add" : "remove") + "Class"]("Active");

Now in the above statement we use a ternary statement to decide if we prefix "Class" with add or remove.  This determines in turn which property or method you call.  Some may argue (and indeed do at my work) that this has an impact on readability, but I personally think its worth the hit in terms of concise code.  Knowing about this method of accessing properties and methods can help you write code that takes advantage of this feature, leading to much less repetition of code. 

A discussion today led to me sending out an email to all the developers at work today, which given the amount of campaigning for jQuery I've done at the company, I had hoped would'nt have been necessary.  But it was.

Basically a co-worker had asked me for some assistance with some HTML/CSS.  Unfortunately this led to me looking at his code and discovering an abundance of javascript events specified directly within the HTML.

<div id="MyElement" onclick="javascript: myFunction();">Click Me!</div>

As I mention, we've adopted jQuery quite widely throughout our products, so I pointed out that it would be much easier for everyone to follow, and easier to take advantage of jQuery's special events and event delegation functions if the events were bound in the $(document).ready() function for that page.  What's more, we know the separating style and markup is important, keeping javascript and the markup separate is also important.  By keeping them apart it makes it easier to split the javascript off into a separate file (much easier to minify AND it's cached!).

So as I say this is just a quick blog post in case anyone else is unsure about where the best place to specify javascript events are.  In my opinion, not the HTML!

As part of what I aim to be a regular series I'm covering great jQuery articles and plugins I've seen over the previous week.  I aim to post this "around" Friday every week, this week may be a little light as I've only been keeping track of articles I've seen for the last few days. 

This would be my first blog post in over a year, but I've been busy working on the new version of this site. Generally I'm much happier with this design than the previous, but it's extremely likely you never saw the previous design, so that's fine anyway.

I hope to blog much more frequently now, probably covering all sorts of things. In addition once I have the article system online I'll be posting more in-depth programming articles and tutorials. Before that all starts though, as part of my job I made a blog post of how to pass Table Variable Value Parameters to C#, It's a great technique we've started using that's loads faster than XML, and much safer in my opinion.  It can be found at the company website, Passing Table Value parameters to Stored Procedures from C#.