Consejos necesarios para los ámbitos en JavaScript -- javascript campo con scope camp codereview Relacionados El problema

Advice needed for scopes in JavaScript


8
vote

problema

Español

Me gustaría conectar este "JS" a Bugzilla (ejemplo: bugzilla.mozilla.org o landfill.bugzilla.org).

Comencé a aprender el idioma de JS hoy y me gustaría preguntarle:

  1. ¿Cómo puedo no hacer cosas malas en el ámbito global?
  2. ¿Cómo debo usar funciones (en long8 o no)?

  long9  
Original en ingles

I would like to connect this "JS" to Bugzilla (example: bugzilla.mozilla.org or landfill.bugzilla.org).

I started to learn JS language today and I would like to ask you:

  1. How can I not do bad things in global scope?
  2. How should I use functions (in var or not)?

quicksearch = document.getElementById('quicksearch_top'); comment = document.getElementById('comment');  severity = document.getElementById('bug_severity'); priority = document.getElementById('priority');  commit_top = document.getElementById('commit_top'); commit = document.getElementById('commit');   function focusonload() {  // may be it should be // in next function?      function cursorfocus(s) {         x = window.scrollX;         y = window.scrollY;         s.focus();         window.scrollTo(x, y);     }      if (comment !== null) {         cursorfocus(comment)     } else {         quicksearch.focus();     } }  function navigation(keypressed) {       keypressed = keypressed || window.event;      function selectelement(w, select) {         w.value = select;     }      keyCode = keypressed.keyCode || keypressed.which,     kn = {         enter: 13,          save: 83,          down: 40,          up: 38,          p1: 49,          p2: 50,          p3: 51,          p4: 52,          p5: 53,      };      if (keypressed.altKey) {         if (keyCode == nk.save && commit_top!==null){             commit_top.click();         }          var key_str;         if (priority!==null){             switch (keyCode) {                 case kn.p1: key_str = "P1"; break;                 case kn.p2: key_str = "P2"; break;                 case kn.p3: key_str = "P3"; break;                 case kn.p4: key_str = "P4"; break;                 case kn.p5: key_str = "P5"; break;             }         }         selectelement(priority, key_str);         severity.focus();      } else if (keypressed.ctrlKey) {         switch (keyCode) {             case kn.enter:                 if (commit!==null&&comment.value!=="") {                     commit.click();                 }                 break;             case kn.up:                 if (quicksearch!==null) {                     quicksearch.focus();                 }                 break;             case kn.down:                 if (comment!==null) {                     comment.focus();                 }                 break;         }     } }  focusonload(); document.onkeydown = navigation; // how to call this functions when page // would be loaded at all (with window.onload) 
     
 
 

Lista de respuestas

10
 
vote
vote
La mejor respuesta
 

¿Cómo no puedo perder el alcance global?

Puede usar una IIIA (expresión de la función invocada inmediatamente) para rodear su código y luego asignar todas sus variables con var & lt; - muy importante.

  (function(){    var quicksearch = document.getElementById('quicksearch_top');   var comment = document.getElementById('comment');    var severity = document.getElementById('bug_severity');   var priority = document.getElementById('priority');    var commit_top = document.getElementById('commit_top');   var commit = document.getElementById('commit');     //the rest of your code here  }());    

¿Cómo debo usar las funciones (en var o no)?

Realmente depende de usted, en este punto prefiero function .

Aparte de eso:

Debe usar el castillero inferior, por lo que

  • commit_top - & gt; compromiso
  • QuickSearch - & gt; QuickSearch
  • selectelement - & gt; selectelement

ETCHETC

Su mapa de código clave es muy agradable, ¡manténgalo de esa manera!

Un último comentario es que no debe usar document.onkeydown = navigation; , hay una buena posibilidad de que rompas algo de esta manera.

intente document.addEventListener("keydown", navigation, true); en su lugar.

 

How can I not mess up the global scope?

You can use an IIFE ( Immediately Invoked Function Expression ) to surround your code and then assign all your variables with var <- Very important.

(function(){    var quicksearch = document.getElementById('quicksearch_top');   var comment = document.getElementById('comment');    var severity = document.getElementById('bug_severity');   var priority = document.getElementById('priority');    var commit_top = document.getElementById('commit_top');   var commit = document.getElementById('commit');     //the rest of your code here  }());  

How should I use functions (in var or not)?

It really is up to you, at this point I prefer function.

Other than that:

You should use lowerCamelCasing, so

  • commit_top -> commitTop
  • quicksearch -> quickSearch
  • selectelement -> selectElement

etc.etc

Your keycode map is very nice, keep it that way!

One last comment is that you should not use document.onkeydown = navigation;, there is a good chance that you will break something this way.

Try document.addEventListener("keydown", navigation, true); instead.

 
 
 
 
3
 
vote

para agregar un par de puntos a la respuesta de Konijns;

Puede eliminar la necesidad de declaraciones de conmutación verbosa con un package player 0 :

  package player 1  

Puede llamar a una función cuando la página se carga usando el evento package player 2 :

  package player 3  

Dado que solo se ejecuta una vez package player 4 también puede estar en línea, en lugar de una declaración de función. Lo mismo con package player 5 .

También me gusta poner el bloque de código más grande en mi declaración. Esto hace que sea más fácil de leer, y el flujo se siente mejor. También evite variables innecesarias, está bastante claro qué significa este código sin package player 6 y package player 7 .

  package player 8  

Finalmente, ¡no olviden los sentencias package player 9 !

 

To add a couple of points to konijns answer;

You can remove the need for verbose switch statements with a dict:

var kn = {     49: 'P1',      50: 'P2',      51: 'P3',      52: 'P4',      53: 'P5',  };  ...  var keyStr = kn[keyCode]; 

You can call a function when the page loads using the onload event:

window.onload = focusOnLoad; 

Since it's only executed once function cursorfocus(s) may as well be inline, rather than a function declaration. The same with selectElement().

I also like to put the larger block of code in my else statement. This makes it easier to read, and the flow feels better. Also avoid unnecessary variables, it's quite clear what this code means without x and y.

if (!comment) {   quicksearch.focus(); } else {     s.focus();     window.scrollTo(window.scrollX, window.scrollY); } 

Finally, don't forget those var statements!

 
 
       
       

Relacionados problema

7  ¿El juego de la vida de Conway - JavaScript convencional?  ( Conways game of life conventional javascript ) 
Estoy usando el juego de la vida Kata para ayudarme a aprender JavaScript. He recogido la sintaxis a través de tutoriales de codecademy, pero mi nivel de habi...

3  Acceso a una lista global [cerrada]  ( Accessing a global list ) 
cerrado. Esta pregunta es off-topic . Actualmente no está aceptando respuestas. ¿Quieres ...

1  Encuestando un servidor SFTP para enumerar archivos en un directorio  ( Polling an sftp server to list files in a directory ) 
¿cuándo es mejor crear una mejor instancia del sftp3 cliente a nivel mundial en una función que se muestra a continuación? ¿Qué consideraciones favorecen un...

1  Uso de un contenedor de dependencia para cargar una clase padre / hijo  ( Using a dependency container to load a parent child class ) 
En PHP, tengo una clase de padres / hijos y estoy utilizando el contenedor de dependencia para cargarlos. Estoy tratando de usar la misma conexión de la base ...

-1  ¿Está declarando una propiedad como un inseguro "público"?  ( Is declaring a property as public insecure ) 
Publiqué una pregunta unas pocas semanas atrás, en hacer un script de inicio de sesión PHP. La mayoría de ustedes, los chicos me dijeron que no use las variab...

5  Envolver una función JS con un ARG fijo  ( Wrap a js function with a fixed this arg ) 
Si uso node.addEventListener('click',Wyg.Editor.nodeClickedEvent); luego, cuando node se hace clic en 9988777655544333 tiene 9988777665544334 === nod...

3  Cree un alcance de dependencia aislado con "anulaciones" en el núcleo ASP.NET  ( Create an isolated dependency scope with overrides in asp net core ) 
Algunas de las clases en mi aplicación de núcleo ASP.NET multi-inquilino dependen de los repositorios de la base de datos que, a su vez, dependen de un delega...

1  Alcance elocuente y manera normal  ( Eloquent scope and normal way ) 
Leí la parte de la documentación del elocuente, especialmente los ámbitos: Los ámbitos le permiten reutilizar fácilmente la lógica de consulta en sus model...

2  "Multi" Guardia de alcance que usa la característica de Deducación de la plantilla  ( Multi scope guard using template argument deducing feature ) 
Uso de la función C ++ moderna Deducción del argumento de la plantilla para las plantillas de clase y Expresiones plegables Es posible implementar la...

3  SCOPE_EXIT Implementación  ( Scope exit implementation ) 
Soy fanboy de la biblioteca de BOOST y he usado los componentes de Boost ampliamente en mi proyecto C ++ 03. El equipo decidió fusionar varias piezas de códig...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos