Pourquoi "$ (). Ready (handler)" n'est pas recommandé?

Depuis le site de documentation de l'API jQuery pourready

Les trois syntaxes suivantes sont équivalentes:

• $ (document) .ready (gestionnaire)
• $ (). ready (handler) (ce n'est pas recommandé)
• $ (gestionnaire)

Après avoir fait mes devoirs - lire et jouer avec le code source , je ne sais pas pourquoi

$().ready(handler) 

n'est pas recommandé. Les première et troisième méthodes sont exactement les mêmes, la troisième option appelle la fonction ready sur un objet jQuery mis en cache avec document:

rootjQuery = jQuery(document);
...
...

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

Mais la fonction ready n'a aucune interaction avec le sélecteur des éléments de nœud sélectionnés, Le readycode source:

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

Comme vous pouvez le voir, il Justs ajouter le rappel à une file d' attente interne ( readyList) et ne change pas ou utiliser les éléments dans l'ensemble. Cela vous permet d'appeler la readyfonction sur chaque objet jQuery.

Comme:

• sélecteur régulier : $('a').ready(handler) DEMO
• Sélecteur absurde : $('fdhjhjkdafdsjkjriohfjdnfj').ready(handler) DEMO
• Indéfini sélecteur: $().ready(handler) DEMO

Enfin ... à ma question: pourquoi $().ready(handler)n'est pas recommandé?

J'ai eu une réponse officielle de l'un des développeurs jQuery:

$().ready(fn)fonctionne uniquement parce que $()c'était un raccourci vers $(document) _{(jQuery <1.4)}
Il en $().ready(fn)était de même pour un code lisible.

Mais les gens faisaient des choses comme $().mouseover()et toutes sortes d'autres folies.
et les gens ont dû faire $([])pour obtenir un objet jQuery vide

Donc en 1.4 nous l'avons changé donc $()donne un jQuery vide et nous avons juste fait le $().ready(fn)travail pour ne pas casser beaucoup de code

$().ready(fn) est littéralement maintenant juste patché dans le noyau pour le faire fonctionner correctement pour le cas hérité.

Le meilleur endroit pour la readyfonction est $.ready(fn), mais c'est une décision de conception vraiment ancienne et c'est ce que nous avons maintenant.

Je lui ai demandé:

Pensez-vous que $ (fn) est plus lisible que $ (). Ready (fn)?!

Sa réponse a été:

Je fais toujours $ (document) .ready (fn) dans les applications réelles et il n'y a généralement qu'un seul bloc doc ready dans l'application, ce n'est pas exactement comme une opération de maintenance.

Je pense que $ (fn) est assez illisible aussi , c'est juste une chose que vous devez savoir fonctionne ™ ...

Étant donné que les différentes options font à peu près la même chose que vous le faites remarquer, il est temps de mettre le chapeau d'écrivain de la bibliothèque et de faire des suppositions.

1. Peut-être que les gens de jQuery aimeraient avoir $()disponible pour une utilisation future (douteux car il $().readyest documenté pour fonctionner, même s'il n'est pas recommandé; cela polluerait également la sémantique de la $casse spéciale).

2. Une raison beaucoup plus pratique: la deuxième version est la seule qui ne finit pas par s'emballer document, il est donc plus facile de casser lors de la maintenance du code. Exemple:

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

   Comparez cela avec

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

3. Lié à ce qui précède: readyest un phénomène dans le sens où c'est (la seule?) Méthode qui fonctionnera de la même manière, peu importe ce que l'objet jQuery enveloppe (même s'il n'enveloppe rien comme c'est le cas ici). C'est une différence majeure par rapport à la sémantique des autres méthodes jQuery, il est donc déconseillé de s'y fier à juste titre.

   Mise à jour: Comme le souligne le commentaire d'Esailija, du point de vue de l'ingénierie, cela readydevrait vraiment être une méthode statique, exactement parce que cela fonctionne comme ça.

Mise à jour n ° 2: En creusant à la source, il semble qu'à un moment donné, la branche 1.4 a $()été modifiée pour correspondre $([]), tandis que dans la version 1.3, elle s'est comportée comme $(document). Ce changement renforcerait les justifications ci-dessus.

Je dirais que c'est simplement le fait que $()retourne un objet vide , alors que ce $(document)n'est pas le cas de votre application ready()à des choses différentes; cela fonctionne toujours, mais je dirais que ce n'est pas intuitif.

$(document).ready(function(){}).prop("title") // the title
$().ready(function(){}).prop("title")  //null - no backing document

Plus que probablement, il ne s'agit que d'un bogue de documentation et devrait être corrigé, le seul inconvénient de l'utilisation $().ready(handler)est sa lisibilité. Bien sûr, soutenez que $(handler)c'est tout aussi illisible. Je suis d'accord, c'est pourquoi je ne l'utilise pas .

Vous pouvez également affirmer qu'une méthode est plus rapide qu'une autre. Cependant, à quelle fréquence appelez-vous cette méthode suffisamment de fois de suite sur une seule page pour remarquer une différence?

En fin de compte, cela dépend de vos préférences personnelles. Il n'y a aucun inconvénient à utiliser $().ready(handler)autre que l'argument de lisibilité. Je pense que la documentation manque de précision dans ce cas.

Juste pour rendre évident qu'il y a une certaine incohérence dans les trois, j'ai ajouté le quatrième formulaire souvent utilisé: (function($) {}(jQuery));

Avec ce balisage:

<div >one</div>
<div>two</div>
<div id='t'/>

et ce code:

var howmanyEmpty = $().ready().find('*').length;
var howmanyHandler = $(function() {}).find('*').length;
var howmanyDoc = $(document).ready().find('*').length;
var howmanyPassed = (function($) { return $('*').length; }(jQuery));
var howmanyYuck = (function($) {}(jQuery));
var howmanyYuckType = (typeof howmanyYuck);

$(document).ready(function() {
    $('#t').text(howmanyEmpty + ":" + howmanyHandler + ":" 
        + howmanyDoc + ":" + howmanyPassed + ":" + howmanyYuckType);
});

Les résultats affichés du div de la dernière instruction sont: 0: 9: 9: 9: undefined

SO, seules les versions Handler et Doc sont cohérentes avec la convention jQuery de renvoyer quelque chose d'utile lorsqu'ils obtiennent le sélecteur de document et avec le formulaire Passed, vous devez retourner quelque chose (je ne le ferais pas je pense, mais mettez-le simplement pour montrer "à l'intérieur" il y a quelque chose).

En voici une version violon pour les curieux: http://jsfiddle.net/az85G/

Je pense que c'est vraiment plus pour la lisibilité qu'autre chose.

Celui-ci n'est pas aussi expressif

$().ready(handler);

comme

$(document).ready(handler)

Peut-être essaient-ils de promouvoir une forme de jQuery idiomatique.