Módulos en JavaScript: Encapsulamiento y Uso Práctico

Curso Básico de Programación Orientada a Objetos con JavaScript

Contenido del curso

JavaScript Orientado a Objetos

Objetos, clases y prototipos

Pilares de la POO: abstracción y encapsulamiento

Pilares de la POO: herencia y polimorfismo

Próximos pasos

17
Examen Final de Programación Orientada a Objetos en JavaScript
01:40 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0013:26

Módulos en JavaScript: Encapsulamiento y Uso Práctico

Curso Básico de Programación Orientada a Objetos con JavaScript

Clase 12 de 17

Clase 12 / 17

Recursos

¿Qué es encapsulamiento en archivos JavaScript?

El encapsulamiento es una herramienta poderosa que permite proteger la estructura interna del software, asegurando que ciertos datos y funcionalidades no sean accesibles desde fuera de un módulo o clase. Tradicionalmente, se enfoca en encapsular métodos y atributos dentro de una clase mediante getters y setters. Estos mecanismos permiten validar datos asignados, manejar listas blancas y negras, y controlar el acceso de los usuarios a nuestros atributos y métodos. Es un concepto central en la programación orientada a objetos que otorga seguridad y control sobre el comportamiento del código, evitando que se asignen valores inadecuados o potencialmente dañinos.

¿Cómo aplicamos el encapsulamiento a archivos JavaScript?

Cuando trabajamos con varios archivos JavaScript, es crucial aplicar el encapsulamiento para proteger el acceso a nuestras funciones y datos. En este contexto, se implementan conceptos como imports y exports, que designan qué elementos estarán disponibles para otros módulos. De esta forma, se definen qué clases, funciones o variables se exponen, mientras que el resto permanece oculto, preservando la confidencialidad y asegurando que solo las partes necesarias sean accesibles. Vamos a ver cómo se usa.

// Ejemplo de exportación en JavaScript
export class PlatziClass {
  constructor({ name, videoID }) {
    this.name = name;
    this.videoID = videoID;
  }
  reproducir() {
    videoPlay(this.videoID);
  }
  pausar() {
    videoStop(this.videoID);
  }
}

// Estas funciones permanecen inscritas al módulo y no se exportan
function videoPlay(id) {
  const secreta = `https://platziultrasecretomasquelanasa.com/${id}`;
  console.log(`Se está reproduciendo desde la URL: ${secreta}`);
}

function videoStop(id) {
  const secreta = `https://platziultrasecretomasquelanasa.com/${id}`;
  console.log(`Pausamos la URL: ${secreta}`);
}

¿Cómo gestionamos módulos con JavaScript?

Importación y exportación

Los módulos de JavaScript nos permiten organizar el código, mantener la separación de responsabilidades y mejorar la legibilidad y eficiencia del código. Para que un archivo JavaScript se comporte como un módulo, es necesario cambiar su extensión a .mjs y declarar su tipo de script como "module" en el HTML.

<script type="module" src="main.mjs"></script>

Esta declaración nos habilita el uso de import y export en nuestro código, lo que facilita compartir funciones y variables entre distintos archivos JavaScript.

Resolución de problemas de CURSES y uso de Code Runner

El uso de módulos directamente en el navegador puede ser limitado debido al problema de CURSES (Cross-Origin Resource Sharing), que restringe el acceso por origen y ruta a menos que se utilice un servidor configurado para ello. Para modificar predominantemente esta barrera en el entorno de desarrollo, se recomienda utilizar extensiones como Code Runner en Visual Studio Code.

Utilizando esta extensión, podemos ejecutar código JavaScript sin necesidad de los protocolos del navegador, permitiendo que nuestro enfoque en módulos fluya sin interrupciones.

// Ejemplo de importación
import { PlatziClass } from './main.mjs';

// Crear una instancia de PlatziClass
const clase67 = new PlatziClass({
  name: "Javascript POO Basado en prototipos",
  videoID: "león_escribió_estó",
});

// Usar los métodos reproducir y pausar
clase67.reproducir();
clase67.pausar();

¿Por qué utilizar módulos en JavaScript?

Organización del código: Distribuir el código en varios archivos mejora la legibilidad y facilita el mantenimiento.
Reutilización: Las funciones y clases definidas en un módulo se pueden reutilizar en diferentes partes de la aplicación, lo que fomenta buenas prácticas de programación.
Protección de código: Al encapsular partes del código en módulos, se previene el acceso no autorizado a variables y funciones internas, mejorando la seguridad del mismo.

El uso de módulos en JavaScript es una práctica recomendable para desarrolladores que deseen crear software robusto y mantenible. Recuerda siempre compartir tus dudas o comentarios en las comunidades de aprendizaje, donde más personas pueden enriquecer y dar solución a nuestras inquietudes. ¡Continúa explorando y amplía tus habilidades en programación web!

Victor Marquez

Hace 5 años

Cuando vale la pena utilizar modulos ?
por que cuando lo ejecuto en la web salto ese error?

Hermes Aguilar

Hace 5 años

Hola Victor, generalmente usarás módulos cuando tu código empiece a hacerse grande. Esto es debido a que resulta más fácil darle mantenimiento y encontrar errores a un componente con 50 líneas de código que a uno de 700, cuando empieces a usar librerías como express o react, vas a darte cuenta de sus ventajas.

Juan Castro

Profesor

Hace 5 años

:one: Cuándo vale la pena

Mientras más grades y complejas sean tus páginas web, más código JavaScript vas a escribir. Esto significa que tendrás cientas o incluso miles de líneas de código.

Guardar todo esto en un solo archivo es MALÍSIMA idea.

De hecho, el solo organizarme para escribir las clases de este curso ya se me estaba complicando bastante. :sweat_smile:

Pero es un "pequeño sacrificio" que decidimos "aguantar" para no complicar el entendimiento del resto de temas. En un próximo curso de POO en JS (99% seguro de que será en el curso práctico) vamos a volver a utilizarlos para crear una estructura de archivos y carpetas extremadamente organizada, escalable, elegante y (a gusto personal) HERMOSAAAA.

(y también para aplicar encapsulamiento de código a nivel de archivos)

:two: Por qué salta ese error cuando lo ejecutamos en la web

Todas las páginas web corren en un servidor que determina qué código y archivos expone a los usuarios en cada diferente ruta de la página.

Y no solo cuando publicamos las páginas web en "internet", también en nuestra computadora (nuestro entorno de desarrollo local).

Pero por defecto los navegadores no pueden trabajar con los módulos a menos que el servidor que está controlando todo habilite una configuración llamada CORS (por seguridad): https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS.

Para resolverlo solo debemos abrir un servidor y habilitar el uso de CORS para poder usar los módulos.

La opción más sencilla es usar la extensión Live Server de VSCode para crear el servidor, ya que trae habilitada la opción de CORS por defecto.

Te adelanto que estoy 99% seguro de que eso es precisamente lo que haremos en un próximo curso de la saga (99% seguro también de que ese curso será el práctico de POO en JS).

Comentarios (94)94 comentarios

Andres Alvarez Becerra

Hola, mi aporte es el siguiente: El uso de los módulos en JavaScript depende de las declaraciones ++Export++ e ++Import++.

Para modular, solo basta que el archivo tenga la extensión ++.js++, pero el motor V8 que es el que corre en los navegadores, recomienda usar la extensión ++.mjs++

Esto es util porque queda claro cuál archivo es modulo y cual no.
Asegura que los archivos de modulo sean tratados como tal por la extensión Babel o Node.js

¿Como Exportar? hay dos formas de exportar:

Colocar en frente de cada elemento la palabra ++export++
Exportar en una sola declaración al final del archivo modulo las características que se quieren exportar, ejemplo:

export {PlatziClass, Student, LearningPaths};

¿Como Importar? La importación obviamente se hace en el script que queremos usar dichos elementos.

import {PlatziClass, Student, LearningPaths} from '/ruta';

¿Como aplicar el modulo en HTML?

<script type="module" src="main.js"></script>

Angel Hernandez

Excelente aporte, Gracias!

Bryam Esteban Trochez Torres

Hace 4 años

Gracias!! (y) :)

Otra cosa importante es que podemos Renombrar las Importaciones y Exportaciones.

¿Como renombramos los componentes? esto básicamente se logra con la palabra clave ++as++ Ejemplo:

export {
PlatziClass as ClasesPlatzi,
LearningPaths as RutaAprendizaje

y en donde vayamos a importar, llamamos con su nuevo nombre, ejemplo:

import { ClasesPlatzi, RutaAprendizaje} from '/ruta';

++NOTA:++

Se recomienda que el cambio de nombre se haga en la importación y no en la exportación, pero eso ya es criterio del programador

Sebastián Andrés Sanhueza Tapia

Con la extensión Live Server, el servidor ya esta montado al ejecutar esa extensión para ver la web, y no es necesario instalar Code Runner. Si usan Live Server, el codigo HTLM debe quedar así cuando se llama a los scripts

    <script src="./main.mjs"  type="module"></script>
    <script src="./module.mjs" type="module"></script>

José Luis Encastin Flores

Muchas gracias por el aporte. Me sirvió porque no podía correr el código con la extensión que se recomienda en el curso.

Sebastian Mera

Recuerda que para poder usar code runner debes tener instalado node.js

Obed Paz

Why ES6 modules are needed?

Don’t reinvent the wheel.
Knowledge barrier.
Unexpected behavior.

. What’s the purpose?

Encapsulate behaviour
Easy to work with
Easy to maintain
Easy to scale Yes, it makes development easier!

The export keyword is used when we want to make something available somewhere, and the import is used to access what export has made available.

The thumb rule is, in order to import something, you first need to export it.

. And what can we actually export?

A variable
An object literal
A class
A function

Carlos Mazzaroli

Si les sale este error

import { PlatziClass } from "./main.mjs";

Pueden "solucionarlo" corriéndolo del navegador agregando el src de module a su HTML asi

<script src="module.mjs" type="module"></script>

Vi que en las pregutnas que varios companeros le ocurrio lo mismo, asi que puedo acotar que este fue un excelente ejemplo de

Irving Juárez

En pocas palabras, se están creando funciones fuera de un prototipo, pero aun así el prototipo las llama de alguna manera. Al importar ese prototipo, nos es imposible acceder a esas funciones, ya que no hacen parte del prototipo mismo, por lo tanto son clases secretas...

José Gregorio Estrada Meneses

Para mas informacion sobre ECMAScript 6 esta este curso https://platzi.com/clases/ecmascript-6/

Eliaz Bobadilla

Gracias!

Christian Alvarenga

Me encantaría algún mini taller en donde se realice una web simple en donde se ponga en práctica en situaciones reales. Me sentí con super poderes con esta clase. 😂 Muy bueno realmente. 👏🏼👏🏼👏🏼

Eso lo tenemos preparado para el Curso Práctico de POO en JavaScript. Dale 5 :star: al curso y al intermedio que está por salir para que grabemos ese nuevo curso. :pray::muscle:

Ya le di las 5 estrellas al terminar. Quedó excelente el curso.

Fernando Quinteros Gutierrez

🎠 Módulos de ECMAScript 6

Apuntes

Si bien podemos encapsular atributos y propiedades también podemos encapsular archivos enteros
Al encapsular archivos enteros podemos restringir y controlar el acceso tanto de variables como funciones o el contenido en sí que tenga dicho módulo
Para ser utilizados en un sitio web es necesario poder contar con un servidor web y también que sea soportado por el navegador del usuario
El uso de dichos módulos nos permite usar
- import {variable} from “./modulo.js”
- export variable

Jesus Martinez

Hace 3 años

gracias por tu aporte muy buen resumen

Jesús Medina

COMPAÑEROS Se me solucionó el problema de CODE RUNNER descargando NODE.JS y el NPM. para hacerlo vayan a su navegador, escriban nodejs y entren a la primera opción que es 'nodejs. org' Instalen la version que dice LTS <3

Reinaldo Mendoza

Que bueno que lo solucionaste, bueno, si vas a usar js fuera del navegador "siempre" necesitas node

Les dejo esta clase del curso de ECMAScript 6+ donde explican un poco mas acerca de los modulos.

Andrés Felipe Eslava Zuluaga

Buen dato!

Primera vez que veo un archivo .mjs, ya he usado import/export pero no sabia que se llamaba módulos

Raul Romero Cisneros

Cuando sale el Curso Práctico de POO en JavaScript?

Pablo Antipan Quiñenao

Hola Raul! Creo que este es el curso te puede servir! Saludos!

Muy pronto. Mientras toma el Curso Intermedio. :wink:

Franks Jhon Colque Zegarra

También podemos usar la extensión live server( download link ) de VSCode, nos crea un servidor al correr la extensión en nuestro proyecto.

Importamos el módulo en el html.

Corremos el live server( por unica vez ) y listo.

Code runner es buena extensión , pero para seguir jugando y curioseando 🧐, con los objetos instanciados, en el navegador podemos usar live server.

Cristian Blandon

No estoy de acuerdo... Yo uso code runner aún en entornos profesionales; no es solo para jugar y curiosear, de hecho es mucho más fácil y rápido de usar cuando quieres ejecutar JavaScript directamente en la consola, para lo cual no necesitarías en lo absoluto un navegador.

Erick Icaza

Cuando uso WSL no me funciona el code runner que crees que sea?

Angel Rodriguez

Creo que no es necesario utilizar el ".mjs", es igual que el ".jsx" de React

No es necesario si usamos empaquetadores. Pero sí si lo hacemos "a lo nativo". Lo veremos en el curso práctico. :wink:

Henry Alexander Velásquez Rosas

Por favor Juan, un curso práctico please, ya pasaron dos años y nada de nada 😢

Leonardo Moreno Faberón

bueno en mi caso jamas vi antes modulos y no me andaba ni para atraz ni adelnate asi que me toco buscar por Youtube. Encontre este link que me saco de la oscuridad:

https://www.youtube.com/watch?v=0GEUyQXe3NI&ab_channel=jonmircha

Hector suarez

//En pocas palabras, se están creando funciones fuera de un prototipo, pero aun así el prototipo las llama ya que forma parte de sus metodos} //Al importar ese prototipo, es imposible acceder a esas funciones, ya que no hacen parte del prototipo mismo, por lo tanto son clases secretas… //pero si se pueden acceder a la funciones secretas desde una instancia de clase

Alberto Becerra Díaz

Cuando le doy run code obtengo este error :( import{ PlatziClass } from "./main.mjs"; ^

SyntaxError: Unexpected token { at Module._compile (internal/modules/cjs/loader.js:723:23) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Function.Module.runMain (internal/modules/cjs/loader.js:831:12) at startup (internal/bootstrap/node.js:283:19) at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)

Viéndolo muy rápido solo veo que falta un espacio entre import y {.

¿Si no es eso, podrías mostrarnos tu código para ver dónde está el error?

Giuseppe Ramirez

Hola, Alberto. Tuve el mismo error, pero luego de revisar noté que se originaba por esto así que cuando lo resuelvas regresa aquí y cuéntanos como te fue. Si te topas con más problemas no dudes en hacer preguntas toda la comunidad estará atenta. 💚

Gabriel Hernández Valdez

Me queda una duda, para continuar, ¿Tendríamos que importar al html el archivo module.mjs para poder ver todo en el navegador cuando tengamos el servidor?

Si, Gabriel. De esta manera:

Ricardo Alfonso Chavez Vilcapoma

Cuando uses node, ya no es necesario cambiar la extensión a mjs, solo deberás agregar en el package.json "type":"module" y te funcionarán los modulos.

JavaScript Orientado a Objetos

Fundamentos de Programación Orientada a Objetos en JavaScript

Programación Orientada a Objetos con JavaScript: Fundamentos y Aplicaciones

Conceptos Básicos de Programación Orientada a Objetos

Objetos, clases y prototipos

Objetos y prototipos en JavaScript: diferencias y usos

Objetos Literales y Prototipos en JavaScript

Clases en JavaScript: Sintaxis y Uso Práctico

Comparativa de Objetos Literales y Clases en JavaScript

Pilares de la POO: abstracción y encapsulamiento

Abstracción en Programación Orientada a Objetos con JavaScript

Programación Orientada a Objetos con JavaScript: Clases y Prototipos

Encapsulamiento en JavaScript: Uso de Getters y Setters

Encapsulamiento con Getters y Setters en JavaScript

Módulos en JavaScript: Encapsulamiento y Uso Práctico

Pilares de la POO: herencia y polimorfismo

Herencia en Programación Orientada a Objetos: Tipos de Estudiantes

Implementación de Herencia en JavaScript con Clases

Polimorfismo en Programación Orientada a Objetos

Polimorfismo en JavaScript: Crear y Publicar Comentarios

Próximos pasos

Examen Final de Programación Orientada a Objetos en JavaScript

Módulos en JavaScript: Encapsulamiento y Uso Práctico

Progreso del curso

JavaScript Orientado a Objetos

Objetos, clases y prototipos

Pilares de la POO: abstracción y encapsulamiento

Pilares de la POO: herencia y polimorfismo

Próximos pasos

Recursos

Recursos