Módulos de ECMAScript 6

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:

1. Colocar en frente de cada elemento la palabra export
2. 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>

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

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>

Why ES6 modules are needed?

1. Don’t reinvent the wheel.
2. Knowledge barrier.
3. 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

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

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…

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

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. 👏🏼👏🏼👏🏼

🎠 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

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 ❤️

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

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

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.

1. Importamos el módulo en el html.

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

1. 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.

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

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

//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

El error del minuto 9:00 tambien se puede solucionar con la extension de Visual Studio que se llama “Live Server”

Creo que me había adelantado al futuro jajaja

Realmente fue una clase muy interesante.

main.mjs

// Platzi clases

function videoPlay(id) {
    const urlSecreta = "https://platziseguronasa.com" + id;

    console.log("Se está reproduciendo desde la url secreta " + urlSecreta);
}

function videoStop(id) {
    const urlSecreta = "https://platziseguronasa.com" + id;

    console.log("Pausamos la url " + urlSecreta);
}


export class PlatziClass{
    constructor({
        name,
        videoID,
    }) {
        this.name = name;
        this.videoID = videoID;
    }

    // métodos
    reproducir() {
        videoPlay(this.videoID);
    }

    pausar() {
        videoStop(this.videoID);
    }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mini Platzi</title>
</head>
<body>
    <!-- <script src="./main.mjs" type="module"></script> -->
    <script type="module">
        import { PlatziClass } from "./main.mjs";
    </script>
</body>
</html>

module.mjs

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


const clase67 = new PlatziClass({
    name: "JavaScript: orientado a OPP",
    videoID: "VGJCHCHCVJHHGHHCH",
});

clase67.reproducir();
clase67.pausar();

clase67.reproducir();
clase67.pausar();

clase67.reproducir();
clase67.pausar();

function videoPlay(id){///////////////////////defino el metodo y se lo agrego a la clase video
  const urlSecreta="https://platziultrasecretomasquelanasa.com/"+id;
  console.log("Se está reproduciendo desde la url "+urlSecreta);
}

function videoStop(id){
  const urlSecreta="https://platziultrasecretomasquelanasa.com/"+id;
  console.log("Pausamos la url "+urlSecreta);
}

////////////////////// defino una clase exportable

export class PlatziClass{
  constructor({
    name,
    videoID,
  })
  {
    this.name=name;
    this.videoID=videoID;
  }
  reproducir(){videoPlay(this.videoID);}////// exporto la funcion como metodo

  pausar(){videoStop(this.videoID);}
}

/////////////////////////////////////////class course
class Course{
  constructor({
    name,
    classes=[],
  })
  {
    this._name=name;
    this.classes=classes;
  }
  get name(){return this._name;}

  set name(nuevoNombrecito)
  {
    if(nuevoNombrecito==="Curso Malito de Programación Básica")
    {
      console.error("Web... no");
    }else
    {
      this._name=nuevoNombrecito;
    }
  }
}

///////////////////////////////// instancio distintos course

const cursoProgBasica=new Course(
  {
    name:"Curso Gratis de Programación Básica",
  }
);

const cursoDefinitivoHTML=new Course({name:"Curso Definitivo de HTML y CSS",});

const cursoPracticoHTML=new Course({name:"Curso Practico de HTML y CSS",});

///////////////////////// class learningPath, ruta de aprendizaje:

class LearningPath{
  constructor(
    {
      name,
      courses=[],
    })
    {
      this.name=name;
      this.courses=courses;
    }
}

/////////////////////////// definio instancias de learningPath:

const escuelaWeb=new LearningPath(
  {
    name:"Escuela de Desarrollo Web",
    courses:[
      cursoProgBasica,
      cursoDefinitivoHTML,
      cursoPracticoHTML,
    ],
  }
);

const escuelaData=new LearningPath({
  name:"Escuela de Data Science",
  courses:[cursoProgBasica,"Curso DataBusiness","Curso Dataviz",],
});

const escuelaVgs=new LearningPath({
  name:"Escuela de Vidweojuegos",
  courses:[cursoProgBasica,"Curso de Unity","Curso de Unreal",],
})

//////////////////////////////// class student

class Student{
  constructor({
    name,
    email,
    username,
    twitter=undefined,
    instagram=undefined,
    facebook=undefined,
    approvedCourses=[],
    learningPaths=[],
  })
  {
    this.name=name;
    this.email=email;
    this.username=username;
    this.socialMedia={twitter,instagram,facebook,};
    this.approvedCourses=approvedCourses;
    this.learningPaths=learningPaths;
  }
}

////////////////////////////////instancio distintos students

  const juan2=new Student({
    name:"JuanDC",
    username:"juandc",
    email:"[email protected]",
    twitter:"fjuandc",
    learningPaths:[escuelaWeb,escuelaVgs,],
});

const miguelito2=new Student({
  name:"Miguelito",
  username:"migelitofeliz",
  email:"[email protected]",
  instagram:"migelito_feliz",
  learningPaths:[escuelaWeb,escuelaData,],
});

ok me perdi en esra

Pueden usar para levantar un servidor de forma facil, en VS Studio, instalar un plugin que se llama live server.

Luego desde el archivo index.html, click derecho, y “Open with live server”

Es importante que se fijen que al momento de importar

import { PlatziClass } from "./PLatziClass.mjs"

esta usando los simbolso de llave, esto es debido a que aplica la destructuración.

Les comparto una clase del curso de ECMA6 para que entiendand mejor el concepto

Destructuración

Si es que les está saliendo un error de tipo que alguna clase o algo no esta referenciado o no esta definido asegúrense de:

• Al momento de ejecutar el código con el Run Code simplemente den click derecho en la pantalla directamente eso seleccionará todo el código, mientras que si lo señalan pueda que se les escape algo y les saldrá error, a mi me paso eso
• Y asegúrense que sus dos archivos estén con .mjs y que estos estén bien referenciados desde el html y desde el import

Para solucionar el problema de la importación

1. En la terminal ejecutamos:

   npm install -g npm (para actualizar npm)
   npm install -g node@latest (para actualizar node)

2. Exportamos con:

   export {nombreClase};

3. Importamos con:

   import {nombreClase} from ‘rutaArchivo’

resumen de mi aporte : usen let y/o ++const ++

Bueno una obs si quieren un aporte yo me demore un dia en darme cuenta , mis funciones que venian funcionado bien al exportarlas no funcionaban. crei que era por el .mjs , pero viendo videos de youtube vi :

• Que .mjs no es obigatorio (aun q si muy recomendable).
• Que aun volviendo a poner mis archivos con .js nuevamente mis funciones no fucionaban exportando e importando en el modulo.
• finalmente que la fuente de todos mis males era que en mis funciones (osea dentro de ellas ) las variables no las habia declarado ni con var , ni con let , ni con const y eso era toda la fuente de mis males por el bendito Hoisting.

Para habilitar los módulos en JavaScript es necesario cambiar las extensiones de los archivos .mjs.
Solamente podemos exportar una clase o con la palabra reservada export antes de declarar una clase, de esta manera:

//these functions must be declare outside the class
function videoPlay(id) {
  const secretUrl = "https://platzisecreto.com" + id;
  console.log("Se esta reproduciendo desde la url " + secretUrl);
}

function videoPause(id) {
  const secretUrl = "https://platzisecreto.com" + id;
  console.log("Pausamos la url " + secretUrl);
}

export class PlatziClass {
  constructor({ name, videoID }) {
    this.name = name;
    this.videoID = videoID;
  }

  play() {
    videoPlay(this.videoID);
  }

  pause() {
    videoPause(this.videoID);
  }
}

Ahora, es neceario crear otro archivo .mjs donde se va a realizar la importación de la clase que previamente fue preparada para ser exportada, esto lo logramos con el uso de la palabra reservada import. La usamos e implementamos el código de la siguiente manera:

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

const clase67 = new PlatziClass({
  name: "JavaScritp: orientado a objetos, basado en prototipos",
  videoID: "qoiu8902j34r902",
});

clase67.play();
clase67.pause();

Les comparte un enlace para que conozcan más sobre los módulos, además el mismo sitio es una tremenda guía para JavaScript.

Uy me encanto esta clase

A mi no me aparece el error, ya que tengo instalado Live Server de VSCode que trae habilitada la opción de CORS por defecto

Si no se ejecuta el ejercicio de la clase PlatziClass que trabaja con módulos sino que te muestra un error, es debido a que Nodejs no tiene la ultima versión.

Puedes ejecutar lo siguiente para actualizarlo :

sudo npm install -g n

sudo  n stable 

node -v 

Si al hacer node -v sigues con la misma versión , abre otra ventana de la terminal y ejecuta node -v y aparecerá actualizada.
Nota.
Al actualizar mi nodejs tambien el npm se me actualizo.

En esta url encuentras información detallada, igual con los anteriores pasos pude sacar adelante el ejercicio.

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

const clase67 = new PlatziClass({
    name: "curso de JavaScript",
    videoId: "klasjdvhasldkvn",
});

clase67.reproducir();
clase67.pausar();

clase67.reproducir();
clase67.pausar();

clase67.reproducir();
clase67.pausar();

CORS >> Cross-Origin Resource Sharing, se soluciona con un modulo de npm con el mismo nombre, lo usan los navegadores para protegerse de peticiones externas, pero al final no se que tan util sea, explicación bastante superficial BTW

no funcionan los modulos en mi codigo

Le agregue un poquito mas de codigo a los metodo de pausar y reproducir para simular que no se puede pausar 2 veces por asi decirlo, o analaogamente reproducir multiples veces.

export class PlatziClass{
    constructor({
        name,
        videoID,
    }){
        this.state = true
        this.name = name
        this.videoID = videoID
    }

    reproducir(){
        if(this.state){
            console.log(`Ya se esta reproduciendo weon`)
        }else{
            videoPlay(this.videoID)
        }
        this.state = true
    }

    pausar(){
        if(!this.state){
            console.log(`Ya esta pausado`)
        }else{
            videoStop(this.videoID)
        }
        this.state = false
    }
}

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

const clase69 = new PlatziClass({
    name: "JavaScript: OOP",
    videoID: "2312asdsa23wnjrwhire"
}) 

clase69.reproducir();

clase69.pausar();

clase69.reproducir()

clase69.reproducir()
clase69.reproducir()

clase69.pausar();
clase69.pausar();
clase69.pausar();

![](

Que interesante, hasta ahora había trabajado programación modular, importando exportando funciones desde archivos de js, pero no sabía que se debería utilizar la extensión mjs

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Clases del curso POO JS</title>
</head>
<body>
<h1>Esto no está vacío, abre la consola</h1>
<script type=“module” src="./src/index.js"></script>
</body>
</html>

----- index.js -----

import { Student } from "./class/Student.js"
import { learningPaths } from "./class/LearningPath.js"
import { Course } from "./class/Courses.js"
import { PlatziClass } from “./class/PlatziClases.js”

Si estan ejecutando desde webstorm, verifiquen que node este instalado.

A mi me sale este error 😦 alguien me podrá decir porque?

Queeee! 🤯 Resulta que aprendí encapsulamiento para archivos en esta clase

JuanDC aplicando el famoso: “Yo no lo descargo porque ya lo tengo” 😆

por fin , después de mucho entendí los módulos de js, no se como había sobrevivido sin ellos

Extensión Live Server

Al usar Live Server, podrás cargar tus archivos HTML y JavaScript como si estuvieran alojados en un servidor web real, lo que te permitirá probar la importación de módulos ES6 en el navegador sin tener problemas con la política de seguridad del navegador al cargar archivos directamente desde el sistema de archivos local.

Export e Import

Para usar export e import en JavaScript, debes seguir los siguientes pasos:

1. Crear un archivo de JavaScript que contenga el código que deseas exportar. Por ejemplo, crea un archivo llamado module.js que contenga lo siguiente:

//module.js
export const PI = 3.14159;

export function saludar(nombre) {
	console.log(`Hola, ${nombre}!`);
}

1. Crear un archivo de JavaScript separado donde desees importar el código del archivo module.js. Por ejemplo, crea un archivo llamado app.js que contenga lo siguiente:

//app.js
import { PI, saludar } from './module.js';

console.log(PI); // Output: 3.14159
saludar('Juan'); // Output: Hola, Juan!

1. En el caso de querer ejecutar estos archivos usando la extensión Code Runner, debes asegurarte de tenerla instalada en tu editor de código. Luego, abre el archivo que deseas ejecutar (en este caso, app.js) y presiona el botón “Run” (o ejecuta el comando de teclado correspondiente). Esto ejecutará el código y mostrará la salida en la consola de Code Runner.

2. Si deseas ejecutar el código en el navegador, debes crear un archivo HTML que cargue tanto el archivo module.js como el archivo app.js. Por ejemplo, crea un archivo llamado index.html que contenga lo siguiente:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My App</title>
</head>
<body>
    <script src="./module.js" type="module"></script>
    <script src="./app.js" type="module"></script>
</body>
</html>

Luego, abre el archivo index.html en tu navegador y abre la consola de desarrollador. Verás la salida del código en la consola del navegador.

Nota: Es importante destacar que para usar import y export en el navegador es necesario que el navegador soporte módulos ES6.

index.html

Es mejor usar node para trabajar ocn modulos, ya que solo necesitarias agregar “type”:“module” en el package.json y no se necesitaría agregar en en script el atributo type=“module” ni cambiar las extensiones de los archivos a .mjs.

Usen npm init en su carpeta del proyexto y se creará automáticamente el package.json.

me marea demaciado que suba y baje en el codigo y que la letra este tangrande solo hace que me pierda pero la clase esta bastante facil

Hi! I want to share this article about the use of the export and import statement.

https://javascript.info/import-export

Solo vine a decir que esta clase me causo MUCHO dolor mental 🤣

Senti que esta clase es algo confusa, y la razon es porque se aborda un tema nuevo sin hacer una introducción desde la pizarra generando un macro de como funciona y todo lo que se require modificaciones para poder ejecutarlo.

Con runner no termino de entender cómo es que queda oculta la url del video. Para ver module asi prefiero no ver nada. Esto hay que verlo cuando podamos crear un servidor e implementar cors, al fin y al cabo no es nada del otro mundo.

En esta clase me perdí bastante. Me toca verla varias veces para entender bien.

Esta clase no me quedó tan clara como las demás 😅

Aunque creo que no es necesario lo d cambiar la extensión, siempre se utiliza el index.js donde se colocan todos los imports y el resto de archivos de utils en otras carpetas y no hay cambio de extensión y html los lee sin ningún problema, claro en html si hay que colocarle el type=‘module’

Creo que voy a tener que ver la última parte entre 15 y 23 veces…