Comments on: jQuery code smells

By: Jeremy

Jeremy — Fri, 20 Aug 2010 22:17:13 +0000

The jQuery developers themselves use $var in the jQuery code. It’s an extremely useful way of differentiating a jQuery results object from the (very similar) raw HTML element object (or any other type of var for that matter, but that’s the specific case I believe it’s designed for).

var div;

Is that an HTML div, or a $(“div”)? I have no idea. Unless I use:

var $div;

regularly, in which case I know with certainty without having to scroll back up through my code to find out.

So yeah: this article smells

By: Anonymous Coward

Anonymous Coward — Mon, 01 Feb 2010 12:13:26 +0000

“When performance is a prime concern, then frankly, I wouldn’t necessarily recommend using jQuery in the first place.”

Agreed. Personally, I like MooTools better.

By: eligmatic

eligmatic — Sat, 23 Jan 2010 14:53:17 +0000

My pet-hate at the moment is so-called “prettified” code. Please God, it ain’t f***-in legible!!!

By: Nick Tulett

Nick Tulett — Tue, 19 Jan 2010 15:56:55 +0000

Inspired by this article, I’ve been on an .each() hunt of my own code and eliminated almost all of them.

Of course 1.4’s ability to do things like

$("#foo td:nth-child(2)").text(function(i, currentText){
  return currentText + "bar";
})

may be an .each() in disguise but the performance improvements mean I no longer care (despite what I said in the bad old days of 1.3)

By: Ben

Ben — Fri, 15 Jan 2010 18:35:23 +0000

I wondered what I could smell Eliazer. Surely there was another method you could use?

By: Eliazer Braun

Eliazer Braun — Fri, 15 Jan 2010 16:26:33 +0000

Great read
is this too much chaining?

     $(".seeAllTestimonials").toggle(function(){
		if(!isAnimating){
			isAnimating = true;
			isInFullView = true;
				$(this).html("Back")
				.siblings("ul")
				.stop()
				.css({"top":0,"opacity":1.0})
				.fadeOut(500)
				.focus()
				.find("li:last")
				.addClass("lastTestimonial")
				.parent()
				.parent()
				.parent()
				.addClass("viewAll")
				.animate({width:697+"px"}, 1000)
				.find(".testimonialsCntnr")
				.animate({width:697+"px"}, 1000, 
					function(){
						$(".seeAllTestimonials")
						.siblings("ul")
						.addClass("isFullyOpen")
						.fadeIn(500);
						testimonialsBelt.resetBelt();
						isAnimating = false;
					 });
			}
	},
	function(){
		if(!isAnimating){
			isAnimating = true;
			isInFullView = false;
			$(this).html("See all testimonials")
				.siblings("ul")
				.fadeOut(500)
				.children()
				.removeAttr("class")
				.parent()
				.parent()
				.parent()
				.animate({width:200+"px"}, 1000)
				.find(".testimonialsCntnr")
				.animate({width:200+"px"}, 1000, 
					function(){
						$(".seeAllTestimonials").siblings("ul")
						.removeClass("isFullyOpen")
						.fadeIn(500)
						.end()
						.parent()
						.parent()
						.removeClass("viewAll");
						isAnimating = false;
						testimonialsBelt.resetBelt();
					});											
		    	}
		});

By: Nick Tulett

Nick Tulett — Tue, 12 Jan 2010 22:57:14 +0000

When performance is a prime concern, then frankly, I wouldn’t necessarily recommend using jQuery in the first place.

Alternatively, if you’re already using jQuery for other reasons then you should be concerned with gaining the best performance.
It’s not necessarily true that new browsers are universally faster and in any case someone has to pay the price for inefficient code whether it’s time, disk wear or electricity bills.

By: TJ

TJ — Mon, 11 Jan 2010 20:31:42 +0000

I agree with most of the responses concerning the appending html section. I just think trying to abstract things, trying to make them look more ‘readable,’ or attempting to use better programming practice is simply the wrong philosophy here.

As Josh Powell said, performance is clearly an issue.

To build off of that, maintainability is much simpler with one append than it is with your solution, The only reason anything should ever become more ‘complex’ (from the readability standpoint) is to improve efficiency or performance. In this case, this simply doesn’t cut it.

By: James Curran

James Curran — Mon, 11 Jan 2010 15:37:23 +0000

In your HTML example, your “non-smelly” code leaves out the link text “Linky”. Adding this is no problem ($('').text("Linky").click(function(){ ...)
but it adds another function call, and makes your “more readable” code a bit more removed from the actual HTML.

On the whole, I think, I’d probably go for something like this:

var div = $('Linky');
$('a', div).click(function(){ return false; })
// rest as above.

By: nickf

nickf — Sun, 10 Jan 2010 13:14:32 +0000

I’m very much in the pro-camp on prefixing jQuery objects with $. It makes your intentions so much more obvious. Consider this:

function showDiv($div) {
    // whatever
}

You know immediately just by looking at the method signature what type of object is expected. You never have to search back through your code to see if $div is a jQuery object or just a plain DOM Element.

Regarding .append() being very slow: You’ll get differing results depending on what you’re appending to. If you’re appending to an element which is in the document, then the browser has to recalculate styles which is a relatively expensive operation. If you’re adding to something which isn’t in the DOM yet, then it only needs to do this once at the end and it’s much faster.