Crear un directorio de clases en JavaScript

Un proyecto de programación, por muy pequeño que sea, puede crecer rápidamente y contener cientos de líneas de código. Por ello, solemos dividir nuestros archivos en varios subarchivos que nos permiten ordenar los elementos de nuestro proyecto. En JavaScript, el uso de módulos como CommonJS y ES6 nos permite mantener la relación entre estos elementos al importar y exportar objetos. En este post, te enseñaremos cómo utilizar esta herramienta para crear un directorio de clases en JavaScript.

¿Qué es un módulo?

Cómo te hemos mencionado antes, un módulo es un archivo de JavaScript que contiene parte del código de un proyecto. Separar nuestro código en módulos nos permite tener distintas unidades lógicas con un propósito específico, haciendo que el proyecto sea más legible y fácil de modificar. En JavaScript existen tres formas de escribir módulos: CommonJS, ADM y ES6. En este tutorial, utilizaremos el formato ES6 Modules, que puedes aprender a utilizar en nuestro post sobe cargar módulos en JavaScript.

¿Qué haremos en este post?

En este post, utilizaremos los módulos para crear un directorio de clases en JavaScript. Es decir, crearemos un archivo individual para cada una de las clases que hemos creado. Esto nos ayudará a ubicarlas más fácilmente en el futuro y a reducir el número de líneas de código que tenemos en nuestro archivo principal index.js.

Entonces, en este momento, tenemos un proyecto que pretende crear una liga de deportes basado en la clase padre League y la clase hija FootballLeague. Ahora, nuestro índice se ve de la siguiente manera. No te preocupes si no entiendes lo que está pasando, lo importante es que veas la extensión de este código y cómo lo transformaremos usando módulos. De igual manera, te dejamos enlazados los posts en los que hemos creado cada parte del código para crear clases en JS.

import { teams } from ‘./teams.js’;

class League {

constructor (name, teams, config = { }) {

this.name = name;

this.setupTeams (teams);

this.setup (config);

this.matchDaySchedule = [ ];

this.scores = [ ];

this.matches = [ ]

}

setup (config = { }) {

const deafultConfig = {rounds;1};

this.config = Object.assign (defaultConfig, config);

}

setupTeams (teams) {

this.teams = [ ];

for (let teamName of teams) {

teamObj = this.customizeTeam (teamName);

this.teams.push (teamObj)

}

}

customizeTeams (teamName) {

return {

name: teamName,

matchesWon:0,

matchesDraw:0,

matchesLost:0

}

}

showTeams ( ) {

console.log (this.teams)

}

}

class FootballLeague extends League {

constructor (name, teams, config = {}) {

super (name, teams, config)

)

setup(config = {}) {

class defaultCondig = {

rounds: 1,

pointsPerWin: 3,

pointsPerDraw: 1,

pointsPerLose: 0,

}

this.config = object.assign (defaultConfig, config);

}

customizeTeam (teamName)

const customizedTeam = super.customizeTeam (teamName)

return {

…customizedTeam,

points: 0,

goalsFor: 0,

goalsAgainst:0

}

}

}

let footballLeague = new FootballLeague (‘foot’, teams)

console.log (footballLeague)

Ahora, que has conocido cómo se ven las clases en JS, vamos a crear e importar clases en Javascript.

Crear un directorio de clases en JavaScript

A partir de las líneas de código anteriores, vamos a crear un directorio de clases en JavaScript utilizando los módulos ES6. Un directorio de clases es una carpeta que nos permite unificar todas las clases en un solo sitio. Para ello, podemos crear una carpeta, al mismo nivel de nuestra carpeta vscode, que se llame classes. Dentro de esta carpeta, insertaremos un archivo por cada clase que tengamos.

Por convención, haremos que el archivo se llame de la misma manera que nuestra clase. Recuerda que estas se suelen escribir usando la nomenclatura UpperCamelCase. Es decir, todas las palabras empezarán por mayúscula.

Entonces, dentro de nuestra nueva carpeta classes, hemos creado un archivo llamado League.js. Dentro de este archivo pegaremos toda nuestra clase, es decir, desde class League hasta console.log (this.teams). Una vez copiado, añadiremos antes de la clase la palabra clave export para asegurarnos de que sea accesible a los demás archivos. Recuerda que con ES6 Modules puedes exportar clases con default o con nombres nuevos. Como en este archivo hay un solo objeto League, podríamos exportarla con export default.

Una vez tenemos nuestro archivo, podemos pasar a la siguiente clase. Entonces, creamos un archivo llamado FootballLeague.js y copiamos las líneas de código de esta clase. Al igual que en la anterior, podemos escribir simplemente export default para exportar la clase entera, pues solo hay una por archivo.

Ahora que tenemos estas clases organizadas en nuestros nuevos módulos, podemos llamarlas al index usando la palabra clave import y de esta manera podrás importar clases en Javascript. Entonces, nuestro índice quedará escrito de la siguiente manera para crear clases en Javascript:

import { teams } from ‘./teams.js’;

import FootballLeague from ‘./classes/FootballLeague.js’

let footballLeague = new FootballLeague (‘foot’, teams)

console.log (footballLeague)

Estas pocas líneas, en comparación a las más de cincuenta que teníamos antes, nos permiten ver nuestro código de una manera mucho más organizada. Ten presente que, ya que nuestra clase FootballLeague hereda propiedades de League, deberás importar esta clase a su archivo. Entonces, escribiremos la siguiente línea de código dentro de nuestro archivo FootballLeage.js para hacer que el código funcione:

import League from ‘./classes/League.js’

¡Así de fácil tendrás un código infinitamente más organizado!

¿Qué sigue?

Ahora que sabes cómo utilizar los módulos para crear un directorio de clases en JavaScript y cómo importar clases en Javascript, ¡te invitamos a que lo pongas en práctica en tus propios proyectos! Desde KeepCoding creemos en el poder de la práctica para realmente aprender y profundizar en la teoría. Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, donde no solo aprenderás a dominar los lenguajes de programación para la web, sino que también los usarás para crear tus propios proyectos. ¡Anímate a matricularte!