Problemas de accesibilidad y organización del código en javascript con jquery

StackOverflow https://stackoverflow.com/questions/1231524

Pregunta

Tengo problemas con el orden de mi código en mi programa. en este momento tengo algunas cosas con document.ready (function () {}); y algunas cosas fuera de él. Cada vez que muevo algo (para organizar o mejorar mi código) termino rompiendo algo, supongo que por el orden de las declaraciones o los niveles de acceso (es decir, algo fuera de document.ready (function {}); no puede acceder a algo dentro de él.

¿Alguien tiene alguna idea de dónde deberían ubicarse las cosas con respecto a JavaScript?

¿Debería estar todo dentro de document.ready (function () {}); ?
¿Hay alguna razón para tener algo fuera de document.ready (function () {} ); ?
¿El código dentro de document.ready (function () {}); es inaccesible por código externo?

¿Fue útil?

Solución

  

1. ¿Debería estar todo dentro?   document.ready (function () {}) ;?

No, creo que la función document.ready debe ser solo para inicializar cosas, asignar controladores de eventos, etc.

  

2. ¿Hay alguna razón para tener   cualquier cosa fuera de   document.ready (function () {}) ;?

Reutilización de código y mejor organización del código.

  

3. ¿Está el código dentro?   document.ready (function () {});   inaccesible por código externo?

Sí, las variables y los objetos creados en el documento. ready ya no son accesibles desde el ámbito externo.

Otros consejos

¿Debería estar todo dentro de document.ready (function () {}) ;?

Sí y no. En aplicaciones JavaScript a gran escala, inicializo mis controladores principales en el ámbito global desde este controlador de eventos. Sin embargo, hay un código que no necesita esperar a que el DOM esté listo, específicamente: código que no depende del DOM . Creo que eso es bastante sencillo. Por ejemplo, declaro clases de objetos de configuración, funciones, etc. fuera de este controlador de eventos.

¿Hay alguna razón para tener algo fuera de document.ready (function () {}) ;?

Claro, por la razón mencionada anteriormente. Principalmente, el código que no requiere interacción DOM no debería esperar a que se cargue el DOM, especialmente si puede ejecutarse de forma asíncrona a la carga DOM (por ejemplo: definiciones de funciones, objetos de configuración, etc.).

Además, no incluir todo el código en un controlador de eventos mantiene las cosas más organizadas, le permite modularizar el código, usar patrones de diseño adecuados, etc.

Es el código dentro de document.ready (function () {}); inaccesible por código externo?

Nuevamente, sí y no. Si lo declara como local con var , entonces es sí, es inaccesible por el ámbito externo ya que es local para el controlador de eventos; de lo contrario, está en el alcance global y es accesible para el alcance externo. Aquí hay un ejemplo (alojado aquí: http://jsbin.com/uriqe )

JavaScript 

var foo = function() {
  alert(global);
  return false;
}

$(document).ready(function() {
  global = "you can see me!?";
  alert("global is initiated");
});

HTML 

<body>
  <p><a href="#" onclick="foo()">click me</a></p>
</body>

onclick en lugar de un método discreto para adjuntar eventos en $ (document) .ready () se usa intencionalmente para evitar cualquier pregunta / argumento sobre foo tener acceso a global a través de la propiedad de cierre.

Editar: pensé que lo había dejado claro en la oración anterior, pero onclick se usa intencionalmente para evitar confusión entre el alcance global y la propiedad de cierre, pero No estoy abogando por el uso de onlick . Por supuesto, es una mala práctica y no deberías usarlo.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top