fonctions à l'intérieur ou à l'extérieur de jquery document ready

Question

Jusqu'à présent, je mettais tous mes éléments jQuery dans le fichier $(document).ready() y compris les fonctions simples utilisées dans certaines interactions avec l'utilisateur.

Mais les fonctions qui ne nécessitent pas le chargement du document DOM ou qui ne sont de toute façon appelées qu'après coup, peuvent être placées en dehors de la section $(document).ready() également. Prenons l'exemple d'une fonction de validation très simple telle que :

function hexvalidate(color) {
// Validates 3-digit or 6-digit hex color codes 
 var reg = /^(#)?([0-9a-fA-F]{3})([0-9a-fA-F]{3})?$/;
 return reg.test(color);
}

La fonction n'est appelée qu'à l'intérieur du $(document).ready() Cependant, la fonction d'évaluation de la qualité de l'eau est très importante.

Quelles sont les meilleures pratiques (syntaxe, rapidité) ; placer une telle fonction à l'intérieur o à l'extérieur la fonction jquery document ready ?

Answer 1

Mettez-le à l'intérieur afin de ne pas polluer l'espace de noms global. Cela garantit également une résolution plus rapide du nom de la fonction grâce aux chaînes de portée de JavaScript.

Mettez-le à l'extérieur s'il s'agit d'un composant réutilisable, vous pouvez facilement le déplacer dans un fichier séparé et l'appeler dans des contextes différents.

Puisque vous utilisez déjà JQuery, il convient de mentionner que dans votre cas, vous pourriez vouloir définir hexvalidate en tant que Plugin JQuery à l'extérieur et l'invoquer ensuite à l'intérieur .

Answer 2

Je ne pense pas que vous devriez utiliser des "fonctions justes" en premier lieu. Dans la POO javascript, une "fonction" appartient généralement à l'un des quatre types distincts :

• Constructeur ou fermeture anonyme "init" - utilisé pour construire des objets. Le seul type de fonction qui est autorisé à être global
• Méthode - fonction faisant partie d'un objet
• Utilité - fonction interne d'un constructeur/méthode, invisible de l'extérieur
• Constante - une constante fonctionnelle passée en paramètre

par exemple

 (function() { <- init closure

        function helper1() { <- utility }

        globalSomething = {

              foobar: function() { <- method 
                  xyz.replace(/.../, function() { <- constant })

              }
        }
  )()

Dans votre exemple, "hexvalidate" fait manifestement partie de l'objet Validator, qui, à son tour, peut être transformé en plugin jQuery :

   (function($) {
        $.validate = {
            hexColor: function(color) { ... your code }
            more validators...
        }
     )(jQuery)

Answer 3

L'avantage de placer ces fonctions dans la fonction document ready est qu'elles ne polluent pas l'espace de noms global... avec l'inconvénient que si vous en avez besoin ailleurs sur la page, elles ne seront pas disponibles.

Answer 4

Si toutes vos fonctions ne sont appelées qu'à l'intérieur de l'élément jQuery(function () { }) les placer à l'intérieur du bloc. Sinon, vous polluez inutilement l'espace de noms global, ce qui peut entraîner des conflits par la suite.

Ne déclarez globalement que les fonctions qui sont également utilisées par le code dans d'autres champs d'application.

Answer 5

Si vous créez une fonction qui doit être appelée en dehors de la portée de la fonction $(document).ready(), laissez-la en dehors de la fonction $(document).ready().

Dans le cas contraire, il faut s'en tenir à l'interne.