Click here to Skip to main content
13,860,571 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


20 bookmarked
Posted 25 Jan 2010
Licenced CPOL

jQuery Code does not have to be Ugly

, 25 Jan 2010
Rate this:
Please Sign up or sign in to vote.
Most of the jQuery code I've seen uses anonymous functions even when they aren't needed which makes the code harder to read, buggier and less maintainable. What a nightmare.

I never pass up a chance to look at jQuery code. It’s amazing how so much power can come from such a tiny package.

An appealing feature of jQuery is the browser independence it provides. Every JavaScript book I've read includes code for checking which version, of which browser, the code is running in. There are a lot of: if elseif elseif else….statements. What a nightmare. No thanks. jQuery to the rescue!

However, most of the jQuery code I've seen uses anonymous functions even when they aren't needed which makes the code harder to read, buggier and less maintainable. What a nightmare. No thanks. Note: I'm not anti-anonymous-functions; As a matter of fact, I use them in the code below (where appropriate).

Here’s a jQuery sample:

        if (this.value == "")
   = "yellow";
   = "White";

Putting that sample together took more than a few tries. While it looks trivial, getting the curly braces and parenthesis to match up took some iterative trial and error. Also, the debugger does not allow you to step into the code as it is written: Instead, the debugger steps into the jQuery source code. Yikes!

Here’s a cleaner way to connect a function to a jQuery event. (Hint: Don't use an anonymous function):


function DocReady()

It is obvious what is being done in the code above… no problems with nesting curly braces and parenthesis. When the document is ready, the DocReady function is called. Let’s add a bit more code to show the advantages of doing it this way:

// ---- Main Doc Ready function -----------------


function DocReady()

// ---- ColorCodeTextBoxes -----------------------
// If a DataEntry textbox is empty, color it yellow
// otherwise color it white.
// To Do: use CSS classes instead of hard-coded color

function ColorCodeTextBoxes()
    var TextBoxes = $(":text.DataEntry");
        if (this.value == "")
   = "yellow";
   = "White";

// ---- AssignClickToToggleButtons -----------------------
// add function to Toggle buttons click event.
// the function toggles the button's color with each click

function AssignClickToToggleButtons()
    $(".ToggleButton").click (function()

Hooking up a standalone function to an event is better than jamming the contents of the function into the event as an anonymous function. Here are some reasons why:

  • The function can be assigned to other events*.
  • The function can be debugged as a standalone object.
  • The function can be better commented.
  • The function can easily be removed, i.e.: // ColorCodeTextBoxs();

*In our example, you would want to Color Code the textboxes when the form loads and when it fails to submit to indicate which fields have been left blank.

Some may point out that by chaining results and nesting functions, you avoid intermediate variables. To those people, I give the Programmer’s Curse: “Someday, I hope you have to maintain your own code.”

Note that intermediate variables are absolutely mandatory when you are debugging: If you want to watch an object, you have to have something to watch.

I do concede that intermediate variables and non-nested functions may make the code run a few nanoseconds slower.

However, let me point out that just as real-estate agents have the phrase, “Location, Location, Location,” developers should adopt the phrase, “Maintenance, Maintenance, Maintenance.”

I hope someone finds this useful.

Steve Wellens


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Steve Wellens
EndWell Software, Inc.
United States United States
I am an independent contractor/consultant working in the Twin Cities area in Minnesota. I work in .Net, Asp.Net, C#, C++, XML, SQL, Windows Forms, HTML, CSS, etc., etc., etc.

You may also be interested in...

Comments and Discussions

GeneralMy vote of 5 Pin
raju melveetilpurayil30-Nov-11 13:58
professionalraju melveetilpurayil30-Nov-11 13:58 
Questionnice tip Pin
Jagz W8-Nov-11 17:26
professionalJagz W8-Nov-11 17:26 
GeneralMy vote of 5 Pin
Sumit_Gupta26-Sep-11 3:24
memberSumit_Gupta26-Sep-11 3:24 
GeneralMy vote of 5 Pin
Brian Stevens22-Aug-11 14:33
memberBrian Stevens22-Aug-11 14:33 
GeneralJQuery Code Pin
Gana14-Mar-10 21:16
memberGana14-Mar-10 21:16 
GeneralGood to see a push for maintainability in JS Pin
CurtainDog1-Feb-10 18:03
memberCurtainDog1-Feb-10 18:03 
GeneralNice blog Pin
Richard MacCutchan25-Jan-10 23:50
protectorRichard MacCutchan25-Jan-10 23:50 
GeneralRe: Nice blog Pin
Steve Wellens26-Jan-10 13:28
memberSteve Wellens26-Jan-10 13:28 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web06 | 2.8.190214.1 | Last Updated 26 Jan 2010
Article Copyright 2010 by Steve Wellens
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid