Convenciones de nomenclatura de Javascript


12

Soy de Java y soy nuevo en JavaScript. He notado que muchos métodos de JavaScript utilizan nombres de parámetros de un solo carácter, como en el siguiente ejemplo.

doSomething(a,b,c)

No me gusta, pero otro desarrollador de JavaScript me convenció de que esto se hace para reducir el tamaño del archivo, y señaló que los archivos de JavaScript deben transferirse al navegador.

Luego me encontré hablando con otro desarrollador. Me mostró la forma en que Firefox truncaría los nombres de las variables para cargar la página más rápido. ¿Es esta una práctica estándar para los navegadores web?

¿Cuáles son las conversiones de nombres de mejores prácticas que se deben seguir al programar en JavaScript? ¿Importa la longitud del identificador y, en caso afirmativo, en qué medida?


13
Dudo mucho que los navegadores cambien los nombres de las variables. En presencia de eval, no es seguro (sí, evales horrible, pero es parte del estándar y no descarta la compilación estándar para una optimización) y no ayuda en lo más mínimo en la reducción del tráfico, aún así enviar el archivo completo

44
A menudo he visto desarrolladores discutiendo sobre las ventajas de los nombres cortos de variables. No los escuches. Esto casi siempre es una excusa para "Soy demasiado pulgar para inventar un buen nombre" o "Soy demasiado flojo para escribir tantos caracteres".
Doc Brown

@DocBrown: Incluso a mí no me gustó. Como no soy un experto en JavaScript quería saber las mejores prácticas.
ManuPK

Al final del día, ¿hablamos de unos 50-100 KB de datos adicionales para usar nombres de métodos significativos? Si 100 KB causa un problema de velocidad, entonces no vale la pena intentar resolverlo, porque no un grupo de usuarios lo suficientemente grande experimentará ese problema.
Ramhound

Respuestas:


26

Encontrará que los propios desarrolladores no están usando nombres cortos de variables. Mientras se desarrollan, utilizan nombres de variables significativos y detallados.

Luego , en el proceso de compilación / lanzamiento, el código que han escrito se ejecuta a través de un minificador / ofuscador con la intención de minimizar el tamaño del archivo, como una mejor práctica para acelerar un sitio web. Este es un opcional paso si usted se preocupa de que mucho sobre el rendimiento. La mayoría de los sitios web pequeños no hacen esto.

Usted , como desarrollador, no debe preocuparse por el proceso de minificación / ofuscación; escriba su código para que sea legible, significativo, bien documentado y bien estructurado. Luego, si te importa tanto el rendimiento (opcional, ¡no lo olvides!), Introduce un minificador / ofuscador en tu proceso de lanzamiento para minimizar el código (eliminar espacios en blanco, nuevas líneas, comentarios, etc.) y ofuscarlo (por ejemplo, acortar la variable nombres). Un buen artículo que explica la ofuscación frente a la minificación se puede encontrar aquí .

Además, Desktop FireFox no truncará el período de nombres de variables . El truncamiento de nombres de variables está ahí para acelerar la descarga de la página. Cuando FireFox obtiene el archivo, ya se ha descargado, por lo tanto, no es necesario hacerlo. Su amigo puede ejecutar un complemento que está haciendo esto; en cuyo caso, dile que lo desinstale, porque es inútil.

Para completar, algunos navegadores (móviles) tienen la opción de usar servidores intermedios, que interceptan las respuestas de los recursos que solicitó, y comprimirlos por usted (lo que podría incluir la minificación de archivos JavaScript). Tenga en cuenta que la compresión se realiza en el servidor (es decir, antes de que haya descargado la página), de ahí el beneficio potencial de descargar un archivo más pequeño, en lugar de hacerlo en el navegador una vez que ya ha descargado el archivo (como se sugiere en la pregunta). Dichos navegadores móviles incluyen Opera Mini y versiones más recientes de Google Chrome (al menos en iOS; no estoy seguro acerca de Android). Para más información, ver aquí .


11

No, no todos los navegadores acortarán automáticamente el JavaScript para ayudar con el rendimiento.

Sin embargo, en el caso de JavaScript, no debe sacrificar la legibilidad / mantenibilidad del código para obtener ganancias en la velocidad o la seguridad del procesamiento porque hay herramientas llamadas ofuscadores y otras herramientas llamadas shinkers (o compresores) que fueron diseñados para este propósito.

Recuerde, no optimice previamente. Si su página se carga lo suficientemente rápido y no tiene ningún contenido demasiado sensible en su JavaScript, no se preocupe. Nombra tus variables con nombres significativos. La legibilidad del código es muy importante para la mantenibilidad y rara vez, si es que alguna vez, debe ser sacrificada.

Si desea una referencia a algunas buenas convenciones de codificación de JavaScript, recomiendo el uso de éstos .



1

Trabajé en JavaScript durante mucho tiempo.

Teníamos un estándar de nomenclatura que tenía que usar la notación húngara para todas las variables.

Parecía funcionar bien. Sé que hay casos en contra de usar eso, pero funcionó bien para nosotros. Especialmente cuando tienes archivos JavaScript masivos donde necesitas encontrar cosas.

Advierto contra la optimización prematura. Es muy probable que termines con un código desordenado que realmente no se ejecuta mucho más rápido.


55
Notación húngara? Esa es la vieja escuela. La notación húngara es una antigua réplica de desarrollo y, con el tiempo, ya no se recomienda.
Smokefoot

2
Tiendo a usarlo un poco, pero solo para valores envueltos por jquery, comenzaré con $. El problema con la notación húngara es que la gente solía decirle que escriba en términos de "int" frente a "String" y no en términos de la semántica de un programa
Zachary K

"Especialmente cuando tienes archivos JavaScript masivos donde necesitas encontrar cosas". -- Te escucho. Pero la notación húngara es solo un yeso pegajoso ... no ayudará a largo plazo, solo confundirá cuando necesite cambiar el tipo de algo pero no tenga tiempo para cambiar todos los prefijos variables. Automatizando todo eso es donde GWT entra en su propia IMO.
funkybro

1
No necesariamente compro usando la notación como "romper" los aspectos del lenguaje que se escriben libremente. Claro, tendrías que cambiar el nombre cuando cambies el tipo, pero eso sería algo bueno de todos modos para que puedas seguir lo que estás haciendo. Sé que hay aspectos que son feos. Pero, si alguna vez ha trabajado en un proyecto GRANDE (estoy hablando de cientos de miles de líneas de código) en un lenguaje mecanografiado, puede ayudarlo a encontrar su camino más rápido en ciertos casos. Decir que está anticuado, etc., realmente no aborda el problema central que el OP estaba tratando de resolver.
Alan Delimon

1
La notación húngara es una de esas cosas que la gente descarta de inmediato sin comprender realmente por qué. Se encuentra en la misma categoría gotoen que las personas repiten sin pensar el mantra 'no uses goto ... no uses goto ...' . La realidad es que es solo una herramienta en su kit de herramientas. Al igual que cualquier herramienta, tiene situaciones en las que es útil y situaciones en las que no es tan útil (o incluso perjudicial). Es como si alguien hubiera tenido una mala experiencia tratando de cortar un trozo de madera con un martillo, y luego proclamó '¡nunca uses martillos, sierras mucho mejor!' . Las generalizaciones
radicales

1

La longitud del identificador no importa. Como han dicho otros, en producción Minification se puede utilizar para reducir el tiempo de descarga del script. De hecho, se debe seguir una convención de codificación / nomenclatura aceptable, especialmente porque JavaScript es un lenguaje peculiar y por mucho tiempo se ha descuidado JavaScript como algo para hacer el trabajo. Si está buscando un lugar para la convención de nomenclatura, la Guía de estilo de JavaScript de Google es un buen lugar. Sugiere,

  • functionNamesLikeThis, por ejemplo, getCashbackData () {}
  • variableNamesLikeThis, por ejemplo, var alertInterval = 10;
  • ClassNamesLikeThis, por ejemplo, var CustomerOrder = {getOrderLines: function () {}}
  • EnumNamesLikeThis, por ejemplo, var ColorOfChoice = {White: "#FFFFFF"}
  • methodNamesLikeThis, por ejemplo, var CustomerOrder = {getOrderLine: function () {}}
  • SYMBOLIC_CONSTANTS_LIKE_THIS, por ejemplo, var EPOCH_UNIX = "01011970"

¿Tienes algo más que agregar y luego un montón de enlaces? Quiero decir que ni siquiera explicas quién es Douglas Crockford.
Ramhound

0

Enfurecido por la filosofía del "desarrollador de código limpio" (y dado que ahora sabe por las publicaciones anteriores que, debido a la minimización del tamaño de los nombres de sus variables, tendrá un impacto cero en el rendimiento) solo podría aconsejar:

  1. Encuentre el mejor IDE para sus necesidades de desarrollo personal que tenga una función de autocompletado e inteligente inteligente, como aptana, netbeans, eclipse (todo gratis) o cualquiera de los numerosos productos comerciales (si tuviera un juego gratis, lo haría mira los productos de JetBrains)
  2. Escriba su código de manera que cualquier comentario sea superfluo. Eso significa, en lugar de escribir

    getXy(e) { return [e.pageX, e.pageY ] }

    lo que podría significar realmente cualquier cosa (especialmente en un lenguaje loco tipeado como js;) haces que el código se exprese

    getPageCoordinatesFromEvent(event) { 
        return [event.pageX, event.pageY ];
    }

    En un buen IDE, normalmente nunca escribiría un nombre de variable que dure dos veces - segundos cada vez que escribe algunas letras y simplemente presiona enter desde la finalización automática. Si insiste en escribir cada carácter usted mismo, un buen IDE de todos modos lo notará de un error tipográfico. Este es solo un ejemplo muy superficial, por lo tanto, sugiero encarecidamente (no como una forma de crítica sino como una recomendación honesta) que

  3. Obtenga los libros "Clean Code" de Robert C.Martin y "Pragmatic Programmer" de Hunt / Thomas y nunca más se haga este tipo de preguntas: estará demasiado ocupado trabajando en un servidor de integración continua para automatizar la prueba aburrida -, y construya partes del proceso de desarrollo (incluida la minificación) y concéntrese en la parte divertida, escribiendo un código claramente comprensible que haga cosas geniales.

PD Si necesita ponerse al día con el desarrollo de código javascript de última generación, eche un vistazo al libro de Resig de John "Mr. jQuery" sobre "Técnicas Pro Javascript" inmediatamente después o junto con lo anterior.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.