CODEWITHSUNDEEP
jqueryjavascript
geoid
geoid

Reputation: 305

opinions - write simple javascript or just use jQuery?

I'm just curious more than anything... I need to conditionally hide an element depending on a property. I could do it with basic javascript:

document.getElementById('business_option').style.visibility = 'hidden';
document.getElementById('business_option').style.height = '0px';

or do the same with jQuery:

$("#business_option").css("visibility", "hidden").css("height", "0px");

Which would people go for here? I get that the pure JS would probably execute marginally faster than the jQuery, but the jQuery is more concise and faster to write! Is it bad practice to become overly reliant on jQuery? Should you still just write the little bit of javascript on such ocasions? Or is it just cleaner to write the more concise bit of jQuery?

Or does anyone even care?! :-)

Upvotes: 0

Views: 369

Answers (3)

Davide
Davide

Reputation: 2339

In my opinion, it depends on factors:

  • the target browsers you are developing for
  • if performance is critical for your web app

Browsers

If you're developing a web site for a wide range of old and new browser, the power of jQuery is to leverage the many small differences in behaviour of the browser. You don't have to remember and apply all the tricks to support a CSS change on older IE, jQuery will take the hassle out.

Performance

On the contrary, on recent mobile devices you can rely to the fact that browsers are compliant to latest standards and go for the pure JS implementation. Even thou even on mobile the situation is bound to get messy, with the introduction of new browsers, vendor prefixes, etc.

About performance, jQuery works fulfills almost every web site need without any issue. When it comes to web apps, with a pretty big amount of data involved and eye-candy effects, then you'd probably like to optimize the most expensive portions of code, using pure JS. Or getting completely rid of jQuery. This is particulary true on mobile in which computational resources are limited, compared to desktop.

Talking about performance, here's a better way to write your code :)

// Accessing the DOM is expensive, let's limit it to a single call
var business_option_style = document.getElementById('business_option').style;
business_option_style.visibility = 'hidden';
business_option_style.height = '0px';

and

// Single function call
$("#business_option").css( {
  "visibility": "hidden",
  "height": 0
});

Upvotes: 2

Roderick Obrist
Roderick Obrist

Reputation: 3828

I care allot about this stuff actually. I'm always thinking about the future when I write code, probably to the point where it becomes unproductive.. Either way my number one rule when editing styles in the DOM is never do it with javascript.... I have employed this new mind set and it has served me unbelievably well.

So my solution is:

.invis{
 visibility: hidden;
 height: 0px;
}

$('#business_option').addClass('invis');

My Number 1 rule for performance: Worry about it after its slow, do not waste time trying to make something that is not slow faster. It is too expensive. Clean code comes first.

Besides class switching in this case is much faster than js->css editing because it avoids redundent reflows. and the style object does not actually exist, its created when you "get" it (afaik).

Upvotes: 1

mas-designs
mas-designs

Reputation: 7556

If that's the only purpose of your page you could maybe stick with pure JS but I would really really recommend using jQuery to do this task.
Because jQuery offers many ways to manipulate content and its called the write less do more libary for a reason ;-) You could also add effects to your hide and show methods !
Read through this SO Question maybe too:

Upvotes: 3

Related Questions