4 ms·

People at my job call all JavaScript jQuery, it is so annoying. Even more annoying is that their code (jQuery or not) plain sucks

emehrkay 16y ago
When I use jQuery (MooTools is my lib of choice) I find myself using it in ways that is very unlike the majority of jQuery that is seen around the web. I absolutely hate the plugin system simply because you cannot easily get the instance of the plugin an refer to it later. To answer this I use function constructors with the module pattern (its easy and doesnt require an extra lib to get going) to create my plugins. Another thing that I do is when I query for a collection of objects, create an array that represents every item in that collection already wrapped with the jQuery object. This may not seem like a big deal, but there is a difference between var collection = jQuery('a'); collection.each(function(i, l){ var link = jQuery(l); link.bind('click', function(){//do suff}); }); and var collection = jQuery('a'), collected = (function(){ var c = []; $.each(collection, function(i, item){ c.push(jQuery(item)); }); return c; })(); this second way allows you to select an item from collected without having to rewrap it with the jquery object. I dont have any data on it, but it seems like rerunning jQuery() with every mouseover/mouseleave/event etc seems like a waste of processing. Anyway, that is just a few ways that I use jQuery to make javascript a bit easier. These little tricks have the people that I work with thinking that I'm some sort of genius.
- arethuza 16y ago
  Isn't that second code snippet actually creating a jQuery object for each "a" - even if it is never clicked on? Isn't that rather more of a "waste of processing" than the first, where a jQuery object is created in the event handler? Why wouldn't you write the first one as: $("a").click(function() { // do stuff });
  - emehrkay 16y ago
    if you need to do stuff with a inside of the function, then you have to do $(this), so every time an a in that collection is clicked $() is run. In my first example I actually took that problem out of the equation by looping through the collection and storing the jQuery'd a as a var accessible via the event closure. However, if you want to reference an element in that collection later in your code, you have to jump though the jQuery selection hoops. But you are right, sometimes you may not need to have every element in your selection wrapped in the jQuery object and it is up to you to determine which solution to use in a given case. But I do feel that most cases I see devs constantly wrapping $(this) inside of event handlers when they could have made an external reference/collection before hand and used that. $('a').hover( function(e){ $(this).doSomething(); }, function(e){ $(this).doSomething(); } ); vs var as = $('a'), collected //using the same method as above; as.each(function(i, e){ collected[i].hover( function(e){ collected[i].doSomething(); }, function(e){ collected[i].doSomething(); } ); ); This is a very rudimentary example and I know that there is a simpler way to accomplish this, but imagine code with multiple collected items who all match up on a 1 to 1 basis collecting the pre-wrapped objects has its advantages.
    - xtian 16y ago
      But wouldn't multiple potentially long loops on initial load have a greater possible impact on user experience than one extra call to $() per event?
      - emehrkay 16y ago
        Great point. I think that my simplistic example is just that, simplistic. A better solution for huge collections would be to memoize the retrieval of the $() obj with something like var memd = {}, getMem = function(obj){ var o; if(memd[obj]){ o = memd[obj]; }else{ o = memd[obj] = $(obj); } return o; }; and call that function instead of calling $() while inside of an event handler (I havent tested this code, but the concept is straight forward)
- albemuth 16y ago
  >>allows you to select an item from collected without having to rewrap it with the jquery object I think the following does the same thing: var collected = $('a').map(function(element) {return $(element)})
  - emehrkay 16y ago
    Nice, I didnt know that jQuery had map. Thanks.
  - mwilliamson 16y ago
    Or even simpler: var collected = $('a').map($) However, map as defined on jQuery objects takes a function that takes the index as the first argument, and the element as the second argument: http://api.jquery.com/map/ http://api.jquery.com/map/ So, what you actually want is: var collected = $('a').map(function(index, element) {return $(element)}) However, jQuery.map has the element as the first argument, and the index as the second argument: http://api.jquery.com/jQuery.map/ http://api.jquery.com/jQuery.map/ I would consider this to be the more intuitive way round, although I'd prefer it if both maps were consistent. So, you could write: var collected = $.map($('a'), $) which strikes me as the neatest version.
- emehrkay 16y ago
  Cant edit, but my second argument, creating an array containing already jQuery wrapped elements is null. There is a method called .eq() that allows you to select from the collection and it returns the element wrapped for you.
iKnowKungFoo 16y ago
I left a job where I'd built a simple UI to a complex back-end using jQuery. A former co-worker told me the guy who'd taken over that project kept complaining that he didn't understand "all this JSON" in the app. Friend: "Can I see some of the JSON?" In-over-his-head Developer: "Sure, here." Friend: "That's not JSON, that's jQuery." Dev: "Whatever, it's the same thing." Friend: "No it's not and you thinking it is, is the real problem here."

emehrkay 16y ago

When I use jQuery (MooTools is my lib of choice) I find myself using it in ways that is very unlike the majority of jQuery that is seen around the web. I absolutely hate the plugin system simply because you cannot easily get the instance of the plugin an refer to it later. To answer this I use function constructors with the module pattern (its easy and doesnt require an extra lib to get going) to create my plugins. Another thing that I do is when I query for a collection of objects, create an array that represents every item in that collection already wrapped with the jQuery object. This may not seem like a big deal, but there is a difference between var collection = jQuery('a'); collection.each(function(i, l){ var link = jQuery(l); link.bind('click', function(){//do suff}); }); and var collection = jQuery('a'), collected = (function(){ var c = []; $.each(collection, function(i, item){ c.push(jQuery(item)); }); return c; })(); this second way allows you to select an item from collected without having to rewrap it with the jquery object. I dont have any data on it, but it seems like rerunning jQuery() with every mouseover/mouseleave/event etc seems like a waste of processing. Anyway, that is just a few ways that I use jQuery to make javascript a bit easier. These little tricks have the people that I work with thinking that I'm some sort of genius.

arethuza 16y ago
Isn't that second code snippet actually creating a jQuery object for each "a" - even if it is never clicked on? Isn't that rather more of a "waste of processing" than the first, where a jQuery object is created in the event handler? Why wouldn't you write the first one as: $("a").click(function() { // do stuff });
- emehrkay 16y ago
  if you need to do stuff with a inside of the function, then you have to do $(this), so every time an a in that collection is clicked $() is run. In my first example I actually took that problem out of the equation by looping through the collection and storing the jQuery'd a as a var accessible via the event closure. However, if you want to reference an element in that collection later in your code, you have to jump though the jQuery selection hoops. But you are right, sometimes you may not need to have every element in your selection wrapped in the jQuery object and it is up to you to determine which solution to use in a given case. But I do feel that most cases I see devs constantly wrapping $(this) inside of event handlers when they could have made an external reference/collection before hand and used that. $('a').hover( function(e){ $(this).doSomething(); }, function(e){ $(this).doSomething(); } ); vs var as = $('a'), collected //using the same method as above; as.each(function(i, e){ collected[i].hover( function(e){ collected[i].doSomething(); }, function(e){ collected[i].doSomething(); } ); ); This is a very rudimentary example and I know that there is a simpler way to accomplish this, but imagine code with multiple collected items who all match up on a 1 to 1 basis collecting the pre-wrapped objects has its advantages.
  - xtian 16y ago
    But wouldn't multiple potentially long loops on initial load have a greater possible impact on user experience than one extra call to $() per event?
    - emehrkay 16y ago
      Great point. I think that my simplistic example is just that, simplistic. A better solution for huge collections would be to memoize the retrieval of the $() obj with something like var memd = {}, getMem = function(obj){ var o; if(memd[obj]){ o = memd[obj]; }else{ o = memd[obj] = $(obj); } return o; }; and call that function instead of calling $() while inside of an event handler (I havent tested this code, but the concept is straight forward)
albemuth 16y ago
>>allows you to select an item from collected without having to rewrap it with the jquery object I think the following does the same thing: var collected = $('a').map(function(element) {return $(element)})
- emehrkay 16y ago
  Nice, I didnt know that jQuery had map. Thanks.
- mwilliamson 16y ago
  Or even simpler: var collected = $('a').map($) However, map as defined on jQuery objects takes a function that takes the index as the first argument, and the element as the second argument: http://api.jquery.com/map/ http://api.jquery.com/map/ So, what you actually want is: var collected = $('a').map(function(index, element) {return $(element)}) However, jQuery.map has the element as the first argument, and the index as the second argument: http://api.jquery.com/jQuery.map/ http://api.jquery.com/jQuery.map/ I would consider this to be the more intuitive way round, although I'd prefer it if both maps were consistent. So, you could write: var collected = $.map($('a'), $) which strikes me as the neatest version.
emehrkay 16y ago
Cant edit, but my second argument, creating an array containing already jQuery wrapped elements is null. There is a method called .eq() that allows you to select from the collection and it returns the element wrapped for you.

iKnowKungFoo 16y ago

I left a job where I'd built a simple UI to a complex back-end using jQuery. A former co-worker told me the guy who'd taken over that project kept complaining that he didn't understand "all this JSON" in the app. Friend: "Can I see some of the JSON?" In-over-his-head Developer: "Sure, here." Friend: "That's not JSON, that's jQuery." Dev: "Whatever, it's the same thing." Friend: "No it's not and you thinking it is, is the real problem here."