Este artículo describe 14 reglas que deben seguirse al escribir el código JavaScript. Compártelo para su referencia, como sigue:
1. Siempre use 'var'
En JavaScript, las variables son globalmente o en toda la función. El uso de la palabra clave "var" será la clave para mantener las variables concisas y claras. Al declarar una variable que es global o a nivel de función, la palabra clave "var" siempre debe estar precedida. El siguiente ejemplo enfatizará el problema potencial de no hacerlo.
Problemas causados por no usar var
var i = 0; // Esto es bueno: crea una función variable global test () {for (i = 0; i <10; i ++) {alert ("¡Hola mundo!");}} Test (); alert (i); // ¡La variable global I ahora tiene 10 años!Debido a que la variable I en la función variable no usa VAR para convertirlo en una variable a nivel de función, en este ejemplo hace referencia a una variable global. Siempre usar VAR para declarar variables globales es una gran práctica, pero es crucial usar VAR para definir una variable de toda la función. Los siguientes dos métodos son funcionalmente los mismos:
La función correcta
función test () {var i = 0; for (i = 0; i <10; i ++) {alerta ("¡Hola mundo!");}}La función correcta
función test () {for (var i = 0; i <10; i ++) {alerta ("¡Hola mundo!");}}2. Detección de características en lugar de la detección del navegador
Se escribe algún código para descubrir la versión del navegador y realizar diferentes comportamientos en función del cliente que el usuario está utilizando. Esta, en general, es una muy mala práctica. Un mejor enfoque es usar la detección de características, primero detectar (el navegador) si existe esta característica o característica antes de usar una función avanzada que un navegador antiguo puede no admitir y luego usarla. Esto detecta individualmente la versión del navegador, incluso si conoce su rendimiento. Puede encontrar un artículo que analice este tema en profundidad en http://www.jibbering.com/faq/faq_notes/not_browser_detect.html.
ejemplo:
if (document.getElementById) {var elemento = document.getElementById ('myID');} else {alert ('Su navegador carece de las capacidades requeridas para ejecutar este script!');}3. Use notación de soporte cuadrado
Cuando el acceso se determina mediante ejecución o incluye propiedades de objeto a las que no se puede acceder con el "." Se utiliza signo, notación de soporte cuadrado. Si no es un programador de JavaScript experimentado, siempre es una buena manera de hacerlo.
Se accede a las propiedades de un objeto mediante dos métodos fijos: "." Notación de soporte cuadrado y "[] []":
"." Método de notación:
Myobject.property
"[]" Notación de soporte cuadrado:
MyObject ["propiedad"]
Usa el "." Firmar, el nombre del atributo es código duro y no se puede cambiar durante la ejecución. Usando los soportes cuadrados "[]", el nombre del atributo es una cadena que proviene de calcular el nombre del atributo. Una cadena debe ser un código duro, o una variable, o incluso una función que devuelva un valor de cadena. Si se genera un nombre de atributo durante la ejecución, se requieren soportes cuadrados. Si tiene propiedades como "Value1", "Value2" y "Value3", y desea usar la variable i = 2 para acceder a ella
Esto puede funcionar:
Myobject ["valor"+i]
Esto no puede ser:
MyObject.Value+i
Y en algunos entornos del lado del servidor (PHP, Struts, etc.), los formularios de formulario se adjuntan con números [] para indicar que los formularios de formulario deben tratarse como matrices en el lado del servidor. De esta manera, usando el "." El signo para referirse a un campo que contiene el signo [] no se ejecutará porque [] es la sintaxis para referirse a una matriz de JavaScript. Por lo tanto, [] la notación es necesaria:
Esto puede funcionar:
formref.Elements ["Nombre []"]
Esto no puede ser:
formref.elements.name []
El uso recomendado de la notación de soporte cuadrado "[]" significa que siempre se usa cuando lo necesita (obviamente). Es una preferencia privada y un hábito cuando no es estrictamente necesario usarlo. Un buen principio empírico es usar el "." Notación para acceder a las propiedades del objeto estándar y use la notación del soporte cuadrado "[]" para acceder a las propiedades del objeto definidas por la página. De esta manera, el documento ["GetElementById"] () es un uso perfectamente factible de notación de soporte "[]" de soporte cuadrado, pero document.getElementById () se prefiere sintácticamente porque GetElementByid es una propiedad de objeto de documento estándar definida en una especificación DOM. Mezcle estas dos anotaciones para hacer que sea un atributo de objeto estándar y qué nombre de atributo está definido por el contexto deja claro en el código:
document.forms ["myFormName"]. Elementos ["myInput"]. Valor
Aquí, los formularios son una propiedad estándar del documento, y el nombre del formulario MyFormName está definido por la página. Al mismo tiempo, los elementos y los atributos de valor son atributos estándar definidos por la especificación. MyInput está definido por la página. Esta página es una sintaxis que hace que las personas sean muy fáciles de entender (el contenido del código), y es un idioma recomendado, pero no un principio estricto.
4. Evite 'eval'
En JavaScript, la función eval () es un método para ejecutar código arbitrario durante la ejecución. En casi todos los casos, Ev no se debe usar. Si aparece en su página, significa que hay una mejor manera de lo que está haciendo. Por ejemplo, Ev generalmente es utilizado por programadores que no saben usar notación de soporte cuadrado.
En principio, "Eval es malvado (eval es el diablo). No lo use a menos que sea un desarrollador experimentado y sepa que su situación es una excepción.
5. Referencias correctas a elementos de formulario y formulario
Todos los formularios HTML deben tener un atributo de nombre. Para los documentos XHTML, no es necesario el atributo de nombre, pero la etiqueta de formulario debe tener el atributo de identificación correspondiente y debe referenciarse con document.getElementById (). El uso de métodos de indexación como document.forms [0] a los formularios de referencia es una mala práctica en casi todos los casos. Algunos navegadores tratan elementos nombrados en documentos utilizando el formulario como un atributo de formulario disponible. Esto no es confiable y no debe usarse.
El siguiente ejemplo muestra cómo evitar una referencia incorrecta de una entrada de formulario usando soportes cuadrados y un método de referencia de objeto correcto:
Entrada de formulario de referencia correcta:
document.Forms ["FormName"]. Elementos ["InputName"]
Mal enfoque:
document.formname.inputName
Si desea hacer referencia a dos elementos de formulario en una función, es mejor referirse al objeto de formulario primero y almacenarlo en una variable. Esto evita consultas duplicadas para resolver las referencias de formulario:
var formelements = document.forms ["mainform"]. Elements; Formelements ["input1"]. Value = "A"; Formelements ["input2"]. Value = "b";
Cuando usa OnChange u otros métodos de manejo de eventos similares, un buen enfoque es consultar siempre el elemento de entrada en la función a través de una entrada. Todos los elementos de entrada llevan una referencia al formulario que lo contiene:
<input type = "text" name = "Dirección" OnChange = "Validate (this)">
function validate (input_obj) {// reference formvar theform que contiene este elemento = input_obj.form; // Ahora puede consultar el formulario en sí sin usar código duro if (theForm.elements ["City"]. Value == "") {Alert ("Error");}}Al acceder a las propiedades del formulario haciendo referencia al elemento de formulario, puede escribir una función que no contenga un código duro para referirse a ningún formulario en esta página con un nombre específico. Esta es una muy buena práctica porque las funciones se vuelven reutilizables.
Evite 'con'
La declaración con JavaScript inserta un objeto en el extremo frontal de un alcance, por lo que cualquier referencia a atributos/variables se resolverá primero en función del objeto. Esto a menudo se usa como un atajo para evitar referencias duplicadas:
Ejemplo de uso con:
con (document.forms ["mainform"]. Elements) {input1.value = "basura"; input2.value = "basura";}Pero el problema es que los programadores no tienen una forma de verificar que Input1 o Input2 realmente se hayan resuelto como propiedades de matrices de elementos de formulario. Primero detecta el atributo con estos valores de nombre, y si no se puede encontrar, continuará detectando este alcance (hacia abajo). Finalmente, trata de tratar la entrada1 y la entrada2 como un objeto global, y esto termina con un error.
La solución es crear un objeto que reduzca las referencias y usarlo para resolver estas referencias.
Use una referencia:
var Elements = document.forms ["mainform"]. Elements; Elements.input1.value = "basura"; elements.input2.value = "basura";
7. Use "OnClick" en Anchor en lugar de "JavaScript: Pseudoprotocol"
Si desea activar el código JavaScript en la etiqueta <a>, elija OnClick en lugar de JavaScript: Pseudo-Protocol; El código JavaScript que se ejecuta usando OnClick debe devolver ture o falso (o una expresión que las evaluaciones a verdadero o falso [¿Cómo traducir esta oración? Entiendo de esta manera: una expresión con prioridad por encima de verdadero o falso]) para devolver la etiqueta en sí: si es verdadero, el href del ancla será tratado como un enlace general; Si es falso, el href será ignorado. Por eso "devuelve falso"; a menudo se incluye al final del código procesado por OnClick.
Sintaxis correcta:
Copie el código de la siguiente manera: <a href = "// www.vevb.com" onClick = "dosomething (); return false;"> Go </a>
En este caso, la función "dosomething ()" (definida en una esquina de la página) se llamará cuando se haga clic. HREF nunca será accedido por un navegador habilitado para JavaScript. El documento javaScript_required.html se cargará en un navegador donde puede recordarle a JavaScript que es necesario y no habilitado por el usuario. Por lo general, cuando se asegura de que el usuario habilite el soporte de JavaScript, durante la mayor cantidad posible, el enlace solo incluirá href = "#". Y este enfoque no se alienta. Por lo general, hay un buen enfoque: puede proporcionar una página que regresa al área local sin usar JavaScript.
A veces, muchas personas quieren visitar un enlace de acuerdo con las situaciones. Por ejemplo, cuando un usuario quiere dejar una de sus páginas de formulario y primero quiere verificar para asegurarse de que nada cambie. En este caso, su OnClick accederá a una función que devuelve una consulta si se debe seguir el enlace:
Acceso de enlace condicional:
<a href = "/" onClick = "return validate ();"> inicio </a>
function validate () {return ind ("¿Estás seguro de que quieres salir de esta página?");}En este caso, la función validate () debe devolver solo ture o falso. Cuando el usuario esté en el ture, el usuario podrá emitir la página de inicio o cuando no se accediera al enlace. Este ejemplo solicita la confirmación (su comportamiento) para acceder a TURE o FALSO, que está completamente determinado por el usuario haciendo clic en "Real" o "Cancelar".
Aquí hay algunos ejemplos de "no debería ser". Si ve el siguiente código en su página, esto es incorrecto y debe modificarse:
¿Qué no se debe hacer?
<a href = "javaScript: dosomthinghing ()"> enlace </a> <a href = "// www.vevb.com/#" onClick = "dosomthething ()"> link </a> <a href = "// www.vevb.com/#" onClick = "javascript: dosomnething ();"> href = "// www.vevb.com/#" onClick = "javascript: dosomthing (); return false;"> enlace </a>
8. Use el operador '+' unario para convertir el tipo a número
En JavaScript, el operador de signo "+" actúa como un signo matemático Plus y un conector. Esto puede causar problemas cuando se suman los valores de campo del formulario. Por ejemplo, debido a que JavaScript es un lenguaje de tipo débil, el valor del campo de formulario se procesará como una matriz, y cuando los tome juntos, el "+" será tratado como un conector, no como un signo matemático más.
Ejemplos de problemas:
<form de nombre = "myform" action = "[url]"> <input type = "text" name = "val1" value = "1"> <input type = "text" name = "val2" value = "2"> </form>
function Total () {var theform = document.forms ["myForm"]; var total = theForm.elements ["val1"]. valor + theform.elements ["val2"]. valor; alert (total); // esto aparecerá "12", pero lo que quieres es 3!}Para resolver este problema, JavaScript necesita un aviso para que procese estos valores como números. Puede usar el signo "+" para convertir una matriz en un número. Presentar una variable o expresión con un signo "+" lo obligará a procesarse como un número, y esto también permitirá que las matemáticas "+" se apliquen con éxito.
Código modificado:
función total () {var theform = document.forms ["myForm"]; var total = (+theform.elements ["val1"]. valor)+(+theform.elements ["val2"]. valor); alerta (total); // esto alertará 3}9. Evite el documento. Todo
El documento. Todo fue introducido por el IE de Microsoft y no es una función de JavaScript DOM estándar. Aunque la mayoría de los navegadores nuevos lo admiten para admitir un código malo que depende de él, (y) hay muchos navegadores que no lo admiten.
No hay razón para que otros métodos no sean aplicables, y un antiguo navegador IE (<5.0) necesita soporte, y el documento. Todo se usa en JavaScript como una compensación. No necesita usar documento. Todo para detectar si se trata de un navegador IE, porque otros navegadores ahora generalmente lo admiten.
Solo documento. Todo es la última opción:
if (document.getElementById) {var obj = document.getElementById ("myId");} else if (document.all) {var obj = document.all ("myId");}Algunos principios para usar documento.
Prueba otros métodos
Cuando es la última opción
Cuando se requiere admitir los navegadores de IE debajo de la versión 5.0
Siempre use "if (document.all) {}" para ver si es compatible.
10. No use comentarios HTML en bloques de código de script
En los viejos tiempos de JavaScript (1995), algunos navegadores como Netscape 1.0 no admitieron ni reconocieron la etiqueta <script>. Entonces, cuando JavaScript se lanzó por primera vez, había una tecnología que evitaría que el código real se muestre en los navegadores más antiguos como texto. Hay un "hack" que usa comentarios HTML en el código para ocultar estos códigos.
Hacer que los comentarios HTML no son buenos:
<script language = "javascript"> <!-// código aquí //-> </script>
Hoy, ningún navegador comúnmente utilizado ignora la etiqueta <script>. Por lo tanto, ya no hay necesidad de ocultar el código fuente de JavaScript. De hecho, también puede considerarse inútil por las siguientes razones:
En la documentación XHTML, el código fuente se ocultará de todos los navegadores y se convertirá en inútil (contenido);
Los comentarios de HTML no están permitidos, esto invalidará cualquier operación de disminución.
11. Evite usar los espacios de nombres globales indiscriminadamente
En general, rara vez se necesitan todas las variables y funciones. El uso global puede causar conflictos de documentos de archivo fuente de JavaScript, y el código aborta. Por lo tanto, un buen enfoque es adoptar la encapsulación funcional dentro de un espacio de nombres global. Hay múltiples formas de completar esta tarea, lo cual es relativamente complicado. La forma más fácil es crear un objeto global y asignar propiedades y métodos a este objeto:
Crea un espacio de nombres:
var myLib = {}; // Objeto global ContENTERMYLIB.Value = 1; myLib.Increment = function () {myLib.Value ++;} mylib.show = function () {alert (mylib.value);} mylib.value = 6; mylib.increment (); mylib.show (); // Alertas 7Los espacios de nombres también se pueden crear utilizando cierres, y las variables de miembros privados también se pueden disfrazar en JavaScript.
12. Evite las llamadas síncronas de 'Ajax'
Al usar la solicitud "AJAX", selecciona el modo asíncrono o usa el modo síncrono. Cuando el comportamiento del navegador puede continuar siendo ejecutado, el modo asíncrono coloca la solicitud en segundo plano y el modo sincrónico esperará hasta que la solicitud se complete antes de continuar.
Se deben evitar las solicitudes realizadas en el modo de sincronización. Estas solicitudes deshabilitarán el navegador al usuario hasta que devuelva la solicitud. Una vez que el servidor está ocupado y se toma un tiempo para completar la solicitud, el navegador del usuario (u sistema operativo) no podrá hacer nada más hasta que la solicitud se agotara.
Si cree que su situación requiere el modo de sincronización, la mayor posibilidad es que necesite tiempo para repensar su diseño. Raramente, si alguna, se requieren solicitudes AJAX en modo síncrono.
13. Usando JSON
Cuando sea necesario almacenar la estructura de datos en texto plano, o enviar/recuperar la estructura de datos a través de AJAX, use JSON en lugar de XML tanto como sea posible. JSON (notación de objeto JavaScript) es un formato de almacenamiento de datos más conciso y eficiente y no depende de ningún idioma (y es un lenguaje neutral).
14. Use la etiqueta <script> correcta
El uso de la propiedad del idioma en <script> no se favorece. Una forma adecuada es crear el siguiente bloque de código JavaScript:
<script type = "text/javaScript"> // código aquí </script>
PD: El código anterior no se ha formateado, y el código formateado generalmente será más fácil de leer y comprender. Aquí hay algunas herramientas de formato y compresión en línea para que pueda usar en un desarrollo futuro:
Terrenos de embellecimiento y formato de código de JavaScript en línea:
http://tools.vevb.com/code/js
BATILización del código JavaScript/compresión/formato/herramientas de cifrado:
http://tools.vevb.com/code/jscompress
JSMIN en línea JS Herramienta de compresión:
http://tools.vevb.com/code/jsmincompress
Código JSON Formateo en línea/embellecimiento/compresión/edición/herramientas de conversión:
http://tools.vevb.com/code/jsoncodeformat
For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of JavaScript Algoritmos y técnicas de recorrido ", y" Resumen del uso de operaciones matemáticas de JavaScript "
Espero que este artículo sea útil para la programación de JavaScript de todos.