jQuery : Pourquoi utiliser des document.ready si externe JS en bas de page ?

Question

Je suis, y compris toutes mes JS externe des fichiers qui sont chargés tout en bas de la page. Dans ces fichiers, j'ai plusieurs méthodes définies comme ceci, que j'appelle de l'événement ready:

var SomeNamepsace = {};

SomeNamepsace.firstMethod = function () {
    // do something
};

SomeNamepsace.secondMethod = function () {
    // do something else
};

$(document).ready(function () {
    SomeNamepsace.firstMethod();
    SomeNamepsace.secondMethod();
});

Cependant, quand j'enlève la fonction ready et appeler les méthodes straight-up, tout fonctionne de la même façon, mais s'exécute beaucoup plus rapidement-presque une seconde plus rapide sur un joli fichier de base! Depuis que le document devrait être chargé à ce point (comme tout le balisage vient avant les balises de script), est-il une bonne raison pour être toujours à l'aide de l'événement ready?

Answer 1

Grande question.

Il y a une certaine confusion autour de l'ensemble de "mettre les scripts en bas de votre page" conseils et ce problème(s) qu'il tente de résoudre. Pour cette question, je ne vais pas parler que de mettre les scripts en bas de la page sur les performances/loadtimes ou pas. Je ne vais qu'à en parler si vous avez besoin d' $(document).ready si vous aussi vous mettre les scripts en bas de la page.

Je suppose que vous faites référence à la DOM dans ces fonctions, vous êtes immédiatement en invoquant dans vos scripts (ou quelque chose d'aussi simple que d' document ou document.getElementById). Je suis aussi en supposant que vous demandent seulement à propos de ces [DOM-référencement] fichiers. OIE, de la bibliothèque de scripts ou de scripts que votre DOM-référencement exige le code (comme jQuery) doivent être placés plus haut dans la page.

Pour répondre à votre question: si vous incluez votre DOM-référencement des scripts en bas de la page, Non, vous n'avez pas besoin d' $(document).ready.

Explication: sans l'aide d' "onload"liés à des implémentations comme $(document).ready de la règle de base est: tout le code qui interagit avec les éléments du DOM au sein de la page doit être placé/inclus en bas de la page que les éléments qu'il référence. La meilleure chose à faire est de placer ce code avant la clôture </body>. Voir ici et ici. Il travaille également autour d'IE redouté "Opération annulée" erreur.

Cela dit, cela ne signifie invalide l'utilisation de l' $(document).ready. Le référencement d'un objet avant qu'il a été chargé est [une] erreurs les plus courantes commises lorsque l'on commence dans le DOM JavaScript (qui l'ont vu de trop nombreuses fois à compter). C'est du jQuery solution au problème, et il n'a pas besoin de vous avoir à réfléchir à l'endroit où ce script sera inclus par rapport aux éléments du DOM qu'il référence. C'est une grande victoire pour les développeurs. C'est juste une chose de moins ils ont à penser.

Aussi, il est souvent difficile ou peu pratique à déplacer tous les DOM-référencement des scripts en bas de la page (par exemple un script qui émet document.write des appels ont de rester sur place). D'autres fois, vous êtes à l'aide d'un cadre qui rend certains modèles de ou crée des pièces de la dynamique de javascript, dans lequel les références des fonctions qui doivent être inclus avant le js.

Enfin, il l'habitude d'être les "meilleures pratiques" à la confiture de tous les DOM-référencement de code en window.onload, mais il a été éclipsé par $(document).ready des implémentations pour bien document raisons.

Tout cela ajoute à l' $(document).ready comme un bien supérieur, de la pratique et de la solution générale au problème de la référence à des éléments du DOM trop tôt.