¿Qué hace el punto y coma principal en las bibliotecas de JavaScript?


156

En varias bibliotecas de JavaScript vi esta notación al principio:

/**
 * Library XYZ
 */
;(function () {
  // ... and so on

Si bien estoy perfectamente cómodo con la sintaxis de "función ejecutada inmediatamente"

(function(){...})()

Me preguntaba para qué sirve el punto y coma principal. Todo lo que se me ocurre es que es un seguro. Es decir, si la biblioteca está incrustada en otro código con errores, sirve como "la última declaración termina aquí en el último" tipo de aumento de velocidad.

¿Tiene alguna otra funcionalidad?


Respuestas:


140

Le permite concatenar de manera segura varios archivos JavaScript en uno, para servirlo más rápido como una solicitud HTTP.


16
Pero no sería necesario, si todos los archivos se codificaran correctamente, ¿verdad?
Boldewyn

8
No: en tu ejemplo, lo obtendrías (function(){...})()(function(){...})().
Aaron Digulla

8
Eso quería decir con 'codificado correctamente', que cada extremos de la biblioteca con la cantidad correcta de comas finales ...
Boldewyn

66
Sí Boldewyn, pero ese no es el caso.
Mathias Bynens el

13
Dos archivos mal codificados no se ajustarán solo por el hecho de que un tercer archivo contiene esta corrección sucia. ¿Por qué el concatenador no puede agregar puntos y comas adicionales entre los archivos en el resultado?
Dávid Horváth

30

La mejor respuesta se dio realmente en la pregunta, así que solo escribiré aquí para mayor claridad:

El principio ;delante de las expresiones de función invocadas de inmediato está ahí para evitar errores al agregar el archivo durante la concatenación a un archivo que contiene una expresión que no termina correctamente con un ;.

La mejor práctica es terminar sus expresiones con punto y coma, pero también usar el punto y coma inicial como medida de seguridad.


¿Por qué también terminas tus expresiones con punto y coma, si estás usando puntos y comas defensivos? O te arriesgas a depender de que haya punto y coma al final de cada línea, o usas punto y coma defensivo. Hacer ambas cosas hace que las personas concluyan incorrectamente que hay una razón para hacer ambas cosas. El consejo para usar puntos y comas defensivos es bueno; el consejo de reemplazar también cada instancia de "\n"con ";\n"no tiene sentido.
Vladimir Kornea

44
@VladimirKornea: porque no siempre estás usando solo tus propias bibliotecas :)
jvenema

@jvenema No sé por qué piensas que eso hace la diferencia.
Vladimir Kornea

66
Porque no puede confiar en el código de otra persona siguiendo sus convenciones. Codifique a la defensiva y no tendrá que hacerlo.
jvenema

1
@VladimirKornea Puedes pensar en eso también como defensivo, si lo deseas: defiende contra el código de otra persona que no siempre comienza con punto y coma defensivo.
Nathan Hinchey

26

En general, si una declaración comienza con (, [, /, + o -, existe la posibilidad de que pueda interpretarse como una continuación de la declaración anterior. Las declaraciones que comienzan con /, + y - son bastante raras en la práctica , pero las declaraciones que comienzan con (y [no son infrecuentes en absoluto, al menos en algunos estilos de programación de JavaScript. A algunos programadores les gusta poner un punto y coma defensivo al comienzo de cualquier declaración para que continúe funcionando correctamente incluso si la declaración antes de que se modifique y se elimine un punto y coma que termina previamente:

var x = 0 // Semicolon omitted here
;[x,x+1,x+2].forEach(console.log) // Defensive ; keeps this statement separate

Fuente:

JavaScript: la guía definitiva, sexta edición


9

Esto se conoce como punto y coma inicial.

Su objetivo principal es protegerse del código anterior que se cerró incorrectamente, lo que puede causar problemas. Un punto y coma evitará que esto suceda. Si el código anterior se cerró incorrectamente, nuestro punto y coma lo corregirá. Si se cerró correctamente, nuestro punto y coma será inofensivo y no habrá efectos secundarios.


7

Una respuesta de una línea es concatenar de manera segura múltiples archivos JavaScript. Usar un punto y coma no plantea un problema.

Supongamos que tiene múltiples funciones:

IIFE 1

(function(){
  // The rest of the code
})(); // Note it is an IIFE

IIFE 2

(function(){
   // The rest of the code
})(); // Note it is also an IIFE

En la concatenación puede verse así:

(function(){})()(function(){})()

Pero si agrega un punto y coma antes de la función, se verá así:

;(function(){})();(function(){})()

Entonces, al agregar a ;, se cuida si alguna expresión no se termina correctamente.

Ejemplo 2

Suponga que tiene un archivo JavaScript con una variable:

var someVar = "myVar"

Otro archivo JavaScript con alguna función:

(function(){})()

Ahora en la concatenación se verá como

var someVar = "myVar"(function(){})() // It may give rise to an error

Con un punto y coma, se verá así:

var someVar = "myVar";(function(){})()

4

Es bueno cuando minimizas el código JavaScript. Previene errores de sintaxis inesperados.


¿Como que? ¿Tiene el punto y coma algún significado para el siguiente código o es solo para un código de error hipotético combinado frente a la biblioteca real?
Boldewyn

En ese código solo, no hay un significado especial, pero cuando ese código está en el medio de otros códigos y cuando lo minimiza a una sola línea, puede haber errores inesperados, como (1) falta el punto y coma en las líneas anteriores, (1 ) el anterior también es funcional, por lo que será () () () (), cuando se obtiene un error, es difícil de depurar, no podemos decir que tenga errores, porque antes de minificar está funcionando bien.
USTED

1
Pero seguramente es responsabilidad del minificador manejar esto correctamente. ¿Son los minificadores con errores la norma hoy en día?
Vladimir Kornea
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.