2010-04-15 38 views
53

Hasta ahora acabo de poner toda mi bondad jQuery dentro de la función $(document).ready(), incluidas las funciones simples utilizadas en ciertas interacciones del usuario.funciones dentro o fuera de jquery document ready

Pero las funciones que no requieren que el documento DOM se cargue o solo se llamen después de todos modos, también pueden ubicarse fuera del $(document).ready(). Considere, por ejemplo, una función de validación muy simples, tales como:

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 función sólo se llama desde dentro de la función $(document).ready() sin embargo.

¿Cuál es la mejor práctica (sintaxis, velocidad); colocando dicha función dentro de o fuera de la función jquery document ready?

Respuesta

69

Ponlo dentro de para que no contamine el espacio de nombres global. También asegura una resolución más rápida del nombre de la función debido a las cadenas de alcance de JavaScript.

Ponga fuera de si es un componente reutilizable, por lo que podría moverlo fácilmente en un archivo separado y llamar desde diferentes contextos.

Desde ya utiliza jQuery, él valores mencionar, que en su caso es posible que desee para definir hexvalidate como JQuery plugin exterior e invocarla el interior.

+1

+1 - agradable de edición. – karim79

7

una ventaja de poner esas funciones dentro de la función de documento listo es que no contaminan su espacio de nombres global ... con el inconveniente de que si los necesita en otro lugar en la página no estarán disponibles.

4

Si todas sus funciones solo son llamadas desde dentro del bloque jQuery(function() { }), colóquelas dentro. De lo contrario, estás contaminando innecesariamente el espacio de nombres global, lo que puede conducir a conflictos en el futuro.

Declarar funciones solo de forma global que también son utilizadas por código en otros ámbitos.

2

Si está creando una función que necesita ser llamada fuera del alcance de la función $ (document) .ready(), manténgala fuera de la función $ (document) .ready().

De lo contrario, mantenerlo interno.

10

No creo que deba usar ninguna 'función justa' en primer lugar. En OOP javascript, una "función" generalmente pertenece a uno de cuatro tipos distintos:

  • Constructor o un cierre "init" anónimo: se utiliza para construir objetos. El único tipo de función que se le permite ser global
  • Método - función que es una parte de un objeto
  • Utility - función interna de un constructor/método, invisible desde fuera
  • constante - una constante funcional pasado como un parámetro

por ejemplo

(function() { <- init closure 

     function helper1() { <- utility } 

     globalSomething = { 

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

       } 
     } 
)() 

En su ejemplo, 'hexvalidate' es, obviamente, una parte del objeto de validación, el cual, a su vez, se puede hacer un plugin de jQuery:

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