I've been tasked with building a small application over the next two weeks, and must use JQuery to do so. Left to my own devices I'd probably just keep it vanilla, but leaving me to my own devices is not generally recommended.
I've never used JQuery for anything larger than 200 lines, and that was circa 2012. Is there anything I should watch out for? Any seemingly innocuous patterns that create more problems than they solve?
A quick glance through the documentation suggests I can just sort of use it as a shorthand for some common operations like grabbing DOM nodes and performing AJAX. Should I just be building my application in much the same manner as I would be otherwise, just more concisely, or are there ways to leverage the library even more powerfully that I'm missing?
Thanks!
Photo by Ben White on Unsplash
Top comments (32)
One thing I just remembered:
I used to use a convention to distinguish jQuery objects from regular variables, stuff like
var $textBox = $("#textBox")
. Don't know if it still makese sense but it did at the time :DI've also been doing this for a long time. It's very handy.
Oh, I like that a lot. Most likely stealing this.
Short list of things that come to mind:
.prop()
instead of.attr()
whenever you can. It's significantly more efficient, and it ensures that the browser's internal understanding of the DOM state gets updated properly. Even further, use specific jQuery methods for the properties that have them (value
for example, which has the.val()
method).$
as a reminder. This is more a case of writing readable code than actual performance..addClass()
and.removeClass()
) are functionally idempotent and declarative. Put simply,$('#foo').removeClass('bar')
will never return an error, and will always ensure that the element with IDfoo
does not have the classbar
. As a result, stuff like this just wastes time:Also, you might want to see if you can convince the decision maker to use Cash instead, it's like jQuery, just significantly smaller and significantly faster (and it unfortunately doesn't work with Bootstrap or some popular jQuery plugins like select2).
Wow, this is incredible, thanks so much for taking the time. Every point here is useful!
This is my instinct as well, so I'm using the opportunity to specifically leanr about JQuery - otherwise I expect it to feel frustrating at times.
Did not know this, thanks much.
Hadn't thought of that, that's good to keep in mind.
How do you mitigate this? Explicit run-time checks?
This is one I did "know" but still somehow didn't realize you could use this way. Awesome.
This I did not realize and am a huge fan of. Unless I'm missing it, I don't think the docs make this very clear, but thinking about it, of course that's how they work.
Had not heard of cash, I'll make the case! Looks pretty snazzily familiar, he may go for it.
Yeah, this one could stand to be covered more in a lot of jQuery tutorials. It's a regular source of subtle bugs as well as performance issues in code written by people who aren't familiar with jQuery.
I don't know what the norm is in big jQuery projects. For any of my stuff, I just make certain that things are strictly ordered such that this never happens (and when I can't ensure strict ordering, I use Arrive). FWIW, if you want to check, the most reliable approach is to check the
length
property of the returned jQuery object (if it's zero, nothing matched).Yeah, the docs really don't make it clear, and while it kind of makes sense, it is inconsistent with how most programmers assume most things behave by default.
Best time to go for it is when starting out. It's pretty easy to switch to jQuery after the fact if you need to, but not so much going the other way.
That works for me - I don't think this project will qualify as "big". 1-2k lines of JS total. Hadn't seen
arrive
, that looks handy, but I think I'm going to see how I fare without it at first.Seriously, this has been a huge help. You've boosted my confidence going in to this project, I feel a little less lost. Thanks again!
Something that I learned from jQuery was the event delegation and is easy to implement:
A good thing to remember too is the
data()
method used in jQuery not set values indata
attr but can read it.docs
And use a internal system of cache, so if you update the attr data you need to retrieve with
attr()
.docs
Beautiful, thank you for pointing this out!
I haven't done much with jQuery event delegation, but I am guessing you need to be careful to turn off the listener if you need garbage collection?
hey, non related question but are you a freelancer or a full-time worker?
Neither, really. This represents my first significant freelance situation, and I'm currently working towards finding myself a full-time role. I work in a non-tech capacity currently.
this is awesome then. i hope next time you would be able to find a client that does not demand jquery haha. in the time being you did not tell us what you are trying to build or do. could you share something on that?
I'm hesitant to share the spec in any sort of detail, maybe I'll come back and recap after completing it! It's a small-scope full-stack application: Node/RethinkDB/JQuery/MaterialzeCSS.
is it a spa?
Yep, but again, very manageable scope. They're primarily an angular shop.
awesome, man! congratulations! what are your skills? do you do both back end and front end? what is your stack? glad to hear. thanks.
Actually jQeury is not so bad. Especially the UI version of it its quite modular and you can build big applications with it. Just don't couple UI logic with business logic.
Ah, thanks for the link! I'd never heard of that, looks like a huge amount of work that can be saved there. I definitely don't have any sort of stigma against JQuery, just never got around to using it much.
Seems like good advice in general, JQuery aside. Thanks again!
I would suggest to use a template engine like handlebarsjs.com/ for anything related to building HTML
Good tip! Manually constructing DOM nodes gets old fast.
The module pattern should help: learn.jquery.com/code-organization...
Aha, I've seen this but never knew what it was called. Thanks for the link, great read!
Don't know if you know but jQuery has promises/deferreds/futures. You can do neat things with them :)
Should they be used in lieu of es6 promises?
They came before, I think they've inspired them. I'm not sure how compatible they are. Methods like
$.get()
return such deferreds, but I haven't tried to mix the two :DA cursory glance suggests they aren't really compatible. I'll have to play with it, I've only used the newfangled jazz.
Saw this yesterday, you may want to consider it over jQuery blissfuljs.com/
Haven't worked with it so far
Ooh, this does look really nice. For this project I've gotta use JQuery, not my rule, but I'm definitely going to explore this for something else. Thank you!
Depending on the browsers the app is going to run, you may consider not use jquery at all: youmightnotneedjquery.com/
Not up to me for this project, but thanks! I agree, I generally steer clear of any dependency at all if I can.
Thanks for this! Great point that you always get back a JQuery object - those extra null checks are clunky otherwise.