web-dev-qa-db-fra.com

fonctionne à l'intérieur ou à l'extérieur du document jquery prêt

Jusqu'à présent, je viens de mettre toutes mes qualités jQuery à l'intérieur de la fonction $(document).ready(), y compris les fonctions simples utilisées dans certaines interactions 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, peuvent également être placées en dehors de la $(document).ready(). Considérons par exemple 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 que depuis la fonction $(document).ready().

Quelle est la meilleure pratique (syntaxe, vitesse); placer une telle fonction à l'intérieur ou à l'extérieur la fonction jquery document ready?

javascriptjqueryfunctionscope
58
Hans

Mettez-le à l'intérieur afin qu'il ne pollue pas l'espace de noms global. Il garantit également une résolution plus rapide du nom de la fonction en raison des chaînes de portée de JavaScript.

Mettez-le à l'extérieur s'il s'agit d'un composant réutilisable afin que vous puissiez facilement le déplacer dans un fichier séparé et appeler à partir de différents contextes.

Comme vous utilisez déjà JQuery, il convient de mentionner que, dans votre cas, vous souhaiterez peut-être définir hexvalidate comme plug-in JQuery extérieur , puis invoquez-le à l'intérieur .

72
Török Gábor

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

  • Constructeur ou fermeture anonyme "init" - utilisée pour construire des objets. Le seul type de fonction autorisé à être global
  • Méthode - fonction qui fait 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 évidemment partie de l'objet Validator, qui, à son tour, peut devenir un plugin jQuery:

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

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

8
Ty W

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

Déclarez uniquement les fonctions globalement qui sont également utilisées par du code dans d'autres étendues.

4
deceze

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

Sinon, gardez-le en interne.

4
Justin Niessner