Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why "$().ready(handler)" is not recommended?

From the jQuery API docs site for ready

All three of the following syntaxes are equivalent:

  • $(document).ready(handler)
  • $().ready(handler) (this is not recommended)
  • $(handler)

After doing homework - reading and playing with the source code, I have no idea why

$().ready(handler)  

is not recommended. The first and third ways, are exactly the same, the third option calls the ready function on a cached jQuery object with document:

rootjQuery = jQuery(document); ... ...  // HANDLE: $(function) // Shortcut for document ready } else if ( jQuery.isFunction( selector ) ) {     return rootjQuery.ready( selector ); } 

But the ready function has no interaction with the selector of the selected node elements, The ready source code:

ready: function( fn ) {     // Attach the listeners     jQuery.bindReady();         // Add the callback     readyList.add( fn );         return this; }, 

As you can see, it justs add the callback to an internal queue( readyList) and doesn't change or use the elements in the set. This lets you call the ready function on every jQuery object.

Like:

  • regular selector: $('a').ready(handler) DEMO
  • Nonsense selector: $('fdhjhjkdafdsjkjriohfjdnfj').ready(handler) DEMO
  • Undefined selector:$().ready(handler) DEMO

Finally... to my question: Why $().ready(handler) is not recommended?

like image 638
gdoron is supporting Monica Avatar asked May 25 '12 11:05

gdoron is supporting Monica


People also ask

Why document ready is deprecated?

In jQuery 3.0, all other syntax methods except $(handler); are deprecated. The official justification is: This is because the selection has no bearing on the behavior of the . ready() method, which is inefficient and can lead to incorrect assumptions about the method's behavior.

What is $( document ready () function Why should you use it?

The ready() method is used to make a function available after the document is loaded. Whatever code you write inside the $(document ). ready() method will run once the page DOM is ready to execute JavaScript code.

What is the purpose of jQuery's document ready () handler?

The . ready() method offers a way to run JavaScript code as soon as the page's Document Object Model (DOM) becomes safe to manipulate. This will often be a good time to perform tasks that are needed before the user views or interacts with the page, for example to add event handlers and initialize plugins.

Can we use ready () function more than once?

Yes we can do it as like I did in below example both the $(document). ready will get called, first come first served. In below code you will be cleared.


2 Answers

I got an official answer from one of the jQuery developers:

$().ready(fn) only works because $() used to be a shortcut to $(document) (jQuery <1.4)
So $().ready(fn) was a readable code.

But people used to do things like $().mouseover() and all sorts of other madness.
and people had to do $([]) to get an empty jQuery object

So in 1.4 we changed it so $() gives an empty jQuery and we just made $().ready(fn) work so as not to break a lot of code

$().ready(fn) is literally now just patched in core to make it work properly for the legacy case.

The best place for the ready function is $.ready(fn), but it's a really old design decision and that is what we have now.


I asked him:

Do you think that $(fn) is more readable than $().ready(fn) ?!

His answer was:

I always do $(document).ready(fn) in actual apps and typically there's only one doc ready block in the app it's not exactly like a maintenance thing.

I think $(fn) is pretty unreadable too, it's just A Thing That You Have To Know Works™...

like image 66
gdoron is supporting Monica Avatar answered Oct 04 '22 08:10

gdoron is supporting Monica


Since the different options do pretty much the same thing as you point out, it's time to put on the library writer hat and make some guesses.

  1. Perhaps the jQuery people would like to have $() available for future use (doubtful since $().ready is documented to work, even if not recommended; it would also pollute the semantics of $ if special-cased).

  2. A much more practical reason: the second version is the only one that does not end up wrapping document, so it's easier to break when maintaining the code. Example:

    // BEFORE $(document).ready(foo);  // AFTER: works $(document).ready(foo).on("click", "a", function() {}); 

    Contrast this with

    // BEFORE $().ready(foo);  // AFTER: breaks $().ready(foo).on("click", "a", function() {}); 
  3. Related to the above: ready is a freak in the sense that it's (the only?) method that will work the same no matter what the jQuery object wraps (even if it does not wrap anything as is the case here). This is a major difference from the semantics of other jQuery methods, so specifically relying on this is rightly discouraged.

    Update: As Esailija's comment points out, from an engineering perspective ready should really be a static method exactly because it works like this.

Update #2: Digging at the source, it seems that at some point in the 1.4 branch $() was changed to match $([]), while in 1.3 it behaved like $(document). This change would reinforce the above justifications.

like image 22
Jon Avatar answered Oct 04 '22 10:10

Jon