namespaces - funciones - ¿Comparte el espacio de nombres de una biblioteca JavaScript o usa el tuyo propio?

clases en javascript ejemplos

Question

Es bastante conocido en JavaScript que declarar variables dentro del alcance global es algo malo. Así que el código en el que suelo trabajar contiene JavaScript con espacios de nombres.

Parece que hay dos enfoques diferentes tomados para esto:

1. Agregar funciones específicas de la aplicación al espacio de nombres de las bibliotecas, por ejemplo $.myCarouselfunction
2. Creando su propio espacio de nombres, por ejemplo, MyApplication.myCarouselFunction

Quería saber si hay una mejor solución o si tienden a encontrarse en algún lugar cercano en términos de pros y contras.

La razón por la que personalmente decidí no ir con la biblioteca hasta ahora es por Separación / Aislamiento / Falta de conflicto con el código de la biblioteca y los posibles complementos que es probable que compartan ese espacio de nombres. ¿Hay algo más que no estoy considerando?

Answer 1

Tiendo a preferir agregar código personalizado a la biblioteca yo mismo. La razón principal de esto es que la semántica de uso permanece constante a través del código incorporado y mi código personalizado. Dicho esto, no puedo pensar en ventajas técnicas o desventajas para este enfoque. Creo que su preocupación por los conflictos es válida, aunque probablemente no muy probable (si termina con un componente / módulo que entra en conflicto con una de sus funciones personalizadas, es probable que lo sea porque está reemplazando su código con el de otra persona).

Answer 2

Creo que lo más importante al elegir este tipo de cosas es la semántica .

¿Su función / clase se extiende o depende de una función específica de la biblioteca? Ponlo en el espacio de nombres de la biblioteca.

¿Es tu función / clase independiente de la biblioteca? En este caso, es mejor colocarlo en un espacio de nombre personalizado. Esto hace posible reutilizar su código fuera de la biblioteca con la que lo usó originalmente.

Answer 3

La elección correcta depende de su entorno objetivo. Está eligiendo entre dos espacios de nombres, los cuales pueden llegar a estar arbitrariamente desordenados. Si cree que es más probable que encuentre un conflicto en el espacio de nombres de la biblioteca, debe usar el espacio de nombres de la ventana. Si cree que el espacio de nombres de la ventana es más probable que se sature, elija el espacio de nombres de la biblioteca.

En cualquier caso, normalmente solo deberías crear un nombre "global". En otras palabras, si va a poner su función en el espacio de nombres de la biblioteca, es mejor no llamarla $ .myFn. Llámalo $ .yaya3.myFn y guarda en caché una referencia local en cualquier contexto en el que invoques myFn varias veces.

Una mejor práctica para hacer referencia a su función es pasar el espacio de nombres en el que vive como argumento a una función anónima:

(function (yaya3) {   
var myFn = yaya3.myFn;
myFn("frobnard!");
}(window.yaya3)); // you could instead pass $.yaya3 or YUI.namespace("yaya3") here

Esto lo hace mucho más fácil si descubre que necesita moverse a un espacio de nombres diferente.

Answer 4

Personalmente, me gusta este tipo de enfoque:

(function(namespace) {

function myPrivateFunction(){};

namespace.myPublicFunction = function(){};

})($); // passing the $ namespace, but if it clutters, 
       // we can change it to something else

Answer 5

Si alguna vez ha intentado acceder a más de una biblioteca utilizando el mismo espacio de nombres, puede sorprender la probabilidad de que se produzcan colisiones, y puede ser bastante frustrante que este tipo de errores surjan a menudo en forma sorprendente y difícil de depurar. formas. Creo que su intuición sobre las colisiones es correcta, y que la consideración más importante en cuanto a si debe definir su propio espacio de nombres o reutilizar el de otra persona es respetar la propiedad del espacio de nombres. Eso significa que a menos que esté en contacto con las personas que mantienen otro espacio de nombres y saben lo que está haciendo, es una buena idea usar su propio espacio de nombres.

Si decide ignorar el consejo sobre la propiedad del espacio de nombres y define una API en un espacio de nombres existente (para semántica o lo que sea), una cosa a considerar sería usar una función de exportación para detectar errores. Básicamente, primero puede definir algo en su propio espacio de nombres y luego exportarlo al espacio de nombres de destino, siguiendo las líneas de:

MyApplication.exportName = function(objToExportTo, name, obj) {
  if (objToExportTo[name] === undefined) {
    objToExportTo[name] = obj;
  } else {
    // Possibly assert!
  }
};

MyApplication.myCarouselFunction = function() { ... };
MyApplication.exportName($, ''myCarouselFunction'', MyApplication.myCarouselFunction);