Skip to main content
se añadieron 2 caracteres en el cuerpo
Origen Enlace
gugadev
  • 19.1k
  • 1
  • 27
  • 49

¿Cómo puedo modularizar eso y poder utilizar las variables valor como variable global?

¿Cómo puedo modularizar eso y poder utilizar las variables valor como variable global?

¿Cómo puedo modularizar eso y poder utilizar las variables valor como variable global?

¿Cómo puedo modularizar eso y poder utilizar las variables valor como variable global?

Origen Enlace
gugadev
  • 19.1k
  • 1
  • 27
  • 49

¿Cómo puedo modularizar eso y poder utilizar las variables valor como variable global?

La modularización siempre ha sido posible en el JavaScript moderno. Hay varias técnicas que puedes utilizar para este objetivo y que ciertamente son mejores que usar variables globales. En lo posible, no uses variables globales, tiene muchas contras y pocos pros. En este enlace puedes ver muy buenas respuestas al respecto.

Algunas estrategias son:

  • Namespaces y Module pattern
  • CommonJS, AMD, UMD, etc.
  • ES6 modules

Namespaces y module pattern

Un namespace o espacio de nombres, se refiere a un ente con un contexto propio y que guarda dentro distintos valores. Si has programado en C# entonces entenderás con exactitud qué es un namespace.

Por otro lado, el module pattern o patrón módulo, como su propio nombre lo indica, es un patrón de diseño creado para permitir la organización del código en módulos que, hablando en JavaScript, corresponde parcialmente a un namespace.

Este patrón se representa de la siguiente manera en JavaScript:

var modulo = (() => {
  const name = 'Hola Gustavo';
  
  return {
    greet() {
      return name;
    }
  }
})();

// en otro archivo
console.log(modulo.greet());

Es realmente sencillo usar este patrón. Solo necesitas meter las variables y métodos en una IIFE y estarán disponibles en el módulo/namespace. Si me dices, ¿qué tiene de especial contra guardar un objeto literal en window? La respuesta es que tienes un mayor control de lo que ocurre dentro de dicho módulo. Por ejemplo, puedes tener variables privadas, métodos privados/públicos, y todo estará dentro de dicho contexto, lo que no ocurre si usas un objeto literal.

CommonJS, AMD, UMD, RequireJS, etc.

Para no extender la respuesta, voy a tratar solo de CommonJS. CommonJS es una especificación que te permite programar en módulos y exportar, tanto valores individuales como un "todo", es decir, exportar todo el contenido del módulo:

// archivo A.js
module.exports = {
  const privada = 'valor';

  const metodo = function () {
    // hacer algo
  }
}

// Archivo B.js
const moduleA = require('B');

moduleA.metodo();

Esta especificación está implementada en Node.js de forma nativa.

ES6

ECMAScript 6 trajo una novedad que se venía pidiendo a gritos: módulos nativos. Estos llegaron y de inmediato significaron una mejora enorme en la forma en que escribes JavaScript. ES6 modules es una especificación con una sintaxis natural, por ejemplo, para exportar un módulo:

// archivo A.js
export const propiedad = 123;
export default function hacerAlgo() { ... }

Y para importar:

// archivo B.js
import hacerAlgo, { propiedad } from 'A';

Si bien ES6 modules aún no ha sido implementado en los navegadores (salvo por Safari Tech Preview), puedes usar esta especificación y todas las de ES6 en adelante mediante Babel.