Patrones de diseño JS: Patrones de creación de objetos

Entonces, ciudadanos de Khabrovsk, ya este jueves en OTUS comenzará el curso "Fullstack JavaScript Developer" . Y hoy compartimos con usted la publicación de otro autor en anticipación al inicio del curso.



Autor del artículo: Pavel Yakupov

---

En este artículo, hablaremos sobre los patrones de diseño más simples y comunes en el lenguaje Javascript, y trataremos de explicar cuáles aplicar cuando.
¿Qué son los patrones de diseño en general? Patrones de diseño es un término que se utiliza para soluciones comunes y de uso frecuente a problemas comunes en la creación de programas.

En pocas palabras, los patrones de diseño son soluciones exitosas que se utilizan con la frecuencia suficiente. Los patrones de diseño como un concepto formado incluso en un momento en que no se mencionaba el lenguaje de programación JavaScript, en el campo de la ingeniería de software, los Cuatro Grandes describieron en detalle los patrones de diseño en 1994. Sin embargo, en nuestro artículo, pasaremos a la implementación de algunos patrones simples en el lenguaje de programación JavaScript.

Repasemos rápidamente los principales tipos de patrones de diseño:

Patrones de diseño de creación

Como su nombre lo indica, estos patrones se utilizan principalmente para crear nuevos objetos. Estos incluyen patrones como Constructor, Factory, Prototype y Singleton.

Patrones de diseño estructural

Estos patrones están asociados con clases y composición de objetos. Ayudan a estructurar o reestructurar objetos o sus partes sin interrumpir el funcionamiento de todo el sistema.

Patrones de diseño de comportamiento

Este tipo de patrón de diseño tiene como objetivo mejorar la comunicación entre diferentes objetos. Los patrones de diseño de comportamiento incluyen Comandante, Iterador, Mediador, Observador, Patrón de Estado, Estrategia y Plantilla.

En este artículo, analizamos solo los patrones de diseño relacionados con la creación de objetos, porque son un poco más simples y más adecuados para que los principiantes comiencen a crear sus aplicaciones de tareas pendientes, juegos de rol de texto en la consola, juegos simples en Canvas, etc.

Patrón "Módulo"

Este patrón de diseño apareció en el lenguaje JavaScript, por así decirlo, involuntariamente. Inicialmente, el lenguaje no pensó en contrarrestar fenómenos como la contaminación del alcance global (y en otros lenguajes, como C # o C ++, hay espacios de nombres que resuelven este problema de forma inmediata). Además, los módulos son parcialmente necesarios para reutilizar el código, porque después de que se pueden crear y usar por primera vez, se pueden conectar a proyectos de otros equipos utilizando horas hombre de manera mucho más competente.
El módulo del módulo a lo largo de su existencia (ya en ES5 fue ampliamente utilizado) usó IIFE (inmediatamente llamado expresiones funcionales).

Aquí hay un ejemplo simple del patrón "Módulo":

const first_Module = (function() { let Surname = "Ivanov"; let Nickname = "isakura313"; function declare_Surname() { console.log(Surname); } return { declare_Nickname: function() { alert(Nickname); } } })(); first_Module.declare_Nickname(); console.log(Surname); //       

Patrón de "módulo" encapsula completamente los datos, que están encerrados en ella. Podemos referirnos a ellos sólo con la ayuda de métodos públicos, y si bien en JavaScript parece implementación de métodos públicos y privados "fuera de la caja" es necesario para implementar el módulo de esta manera.

El patrón de "diseñador"

Este patrón de diseño está diseñado para crear un objeto. Constructor es una función que crea nuevos objetos. Sin embargo, en los objetos de JavaScript se pueden crear "sobre la marcha", sin ni siquiera la función constructora o definición de clase.
Constructor es uno de los patrones de diseño más comúnmente utilizados. Se usa para crear objetos de un tipo particular.

 //     to-do  //,    ,           class ItemDeal { constructor(name, color) { this.name = name; this.color = color; } } //     ,       localStorage  ? let item = new ItemDeal(`${text}`, `${select.value - 1}`); // text -   , a select.value -    let myJson = JSON.stringify(item); //        //localStorage,        //localStorage.setItem(item.name, myJson); {texto}` `$ {select.value - //     to-do  //,    ,           class ItemDeal { constructor(name, color) { this.name = name; this.color = color; } } //     ,       localStorage  ? let item = new ItemDeal(`${text}`, `${select.value - 1}`); // text -   , a select.value -    let myJson = JSON.stringify(item); //        //localStorage,        //localStorage.setItem(item.name, myJson); 

Patrón "de fábrica"

patrón de fábrica es otro patrón orientado a crear un objeto de la clase. En ella proporcionamos interfaces comunes para delegar la creación de un objeto de subclase (subclases).

Este patrón de diseño es la más utilizada para manipular colecciones de objetos que son diferentes y las mismas características.
En el siguiente ejemplo, creamos un enemigo de clase (EnemyFactory) para nuestra búsqueda de texto. Sí, el ejemplo bastante simple, pero este es el problema de los patrones de diseño: se necesitan para las aplicaciones "grandes". Si usted tiene sólo tres imágenes volar haciendo clic en la página - luego diseñar ningún extra que los patrones y no serán útiles.

Está bien, sólo mostrar una pieza de código RPG nuestro texto en la consola:

 class EnemyFactory{ constructor() { this.createEnemy = function(type) { let enemy; if (type === 'goblin' || type === 'ork') enemy = new Infantry(); else if (type === 'elf') enemy = new Archer(); enemy.attack = function() { return `The ${this._type} is attack`; }; return enemy; }; } } class Infantry { constructor() { this._type = 'goblin'; this.scream = function() { return 'AAAAAAAAA! Za ordu!!!'; }; } } class Archer { constructor() { this._type = 'elf'; this.magic_attack = function() { return 'Magic fog around you! You cant see!!'; }; } } const enemy_army = new EnemyFactory(); let newGoblin = enemy_army.createEnemy('goblin'); let newElf = enemy_army.createEnemy('elf'); console.log(newGoblin.attack()); console.log(newElf.attack()); console.log(newGoblin.scream()); console.log(newElf.magic_attack()); //  escriba === 'ork') enemigo = new infantería (); class EnemyFactory{ constructor() { this.createEnemy = function(type) { let enemy; if (type === 'goblin' || type === 'ork') enemy = new Infantry(); else if (type === 'elf') enemy = new Archer(); enemy.attack = function() { return `The ${this._type} is attack`; }; return enemy; }; } } class Infantry { constructor() { this._type = 'goblin'; this.scream = function() { return 'AAAAAAAAA! Za ordu!!!'; }; } } class Archer { constructor() { this._type = 'elf'; this.magic_attack = function() { return 'Magic fog around you! You cant see!!'; }; } } const enemy_army = new EnemyFactory(); let newGoblin = enemy_army.createEnemy('goblin'); let newElf = enemy_army.createEnemy('elf'); console.log(newGoblin.attack()); console.log(newElf.attack()); console.log(newGoblin.scream()); console.log(newElf.magic_attack()); //  ) = enemigo nueva Archer (); class EnemyFactory{ constructor() { this.createEnemy = function(type) { let enemy; if (type === 'goblin' || type === 'ork') enemy = new Infantry(); else if (type === 'elf') enemy = new Archer(); enemy.attack = function() { return `The ${this._type} is attack`; }; return enemy; }; } } class Infantry { constructor() { this._type = 'goblin'; this.scream = function() { return 'AAAAAAAAA! Za ordu!!!'; }; } } class Archer { constructor() { this._type = 'elf'; this.magic_attack = function() { return 'Magic fog around you! You cant see!!'; }; } } const enemy_army = new EnemyFactory(); let newGoblin = enemy_army.createEnemy('goblin'); let newElf = enemy_army.createEnemy('elf'); console.log(newGoblin.attack()); console.log(newElf.attack()); console.log(newGoblin.scream()); console.log(newElf.magic_attack()); //  attack`; class EnemyFactory{ constructor() { this.createEnemy = function(type) { let enemy; if (type === 'goblin' || type === 'ork') enemy = new Infantry(); else if (type === 'elf') enemy = new Archer(); enemy.attack = function() { return `The ${this._type} is attack`; }; return enemy; }; } } class Infantry { constructor() { this._type = 'goblin'; this.scream = function() { return 'AAAAAAAAA! Za ordu!!!'; }; } } class Archer { constructor() { this._type = 'elf'; this.magic_attack = function() { return 'Magic fog around you! You cant see!!'; }; } } const enemy_army = new EnemyFactory(); let newGoblin = enemy_army.createEnemy('goblin'); let newElf = enemy_army.createEnemy('elf'); console.log(newGoblin.attack()); console.log(newElf.attack()); console.log(newGoblin.scream()); console.log(newElf.magic_attack()); //  ); class EnemyFactory{ constructor() { this.createEnemy = function(type) { let enemy; if (type === 'goblin' || type === 'ork') enemy = new Infantry(); else if (type === 'elf') enemy = new Archer(); enemy.attack = function() { return `The ${this._type} is attack`; }; return enemy; }; } } class Infantry { constructor() { this._type = 'goblin'; this.scream = function() { return 'AAAAAAAAA! Za ordu!!!'; }; } } class Archer { constructor() { this._type = 'elf'; this.magic_attack = function() { return 'Magic fog around you! You cant see!!'; }; } } const enemy_army = new EnemyFactory(); let newGoblin = enemy_army.createEnemy('goblin'); let newElf = enemy_army.createEnemy('elf'); console.log(newGoblin.attack()); console.log(newElf.attack()); console.log(newGoblin.scream()); console.log(newElf.magic_attack()); //  ); class EnemyFactory{ constructor() { this.createEnemy = function(type) { let enemy; if (type === 'goblin' || type === 'ork') enemy = new Infantry(); else if (type === 'elf') enemy = new Archer(); enemy.attack = function() { return `The ${this._type} is attack`; }; return enemy; }; } } class Infantry { constructor() { this._type = 'goblin'; this.scream = function() { return 'AAAAAAAAA! Za ordu!!!'; }; } } class Archer { constructor() { this._type = 'elf'; this.magic_attack = function() { return 'Magic fog around you! You cant see!!'; }; } } const enemy_army = new EnemyFactory(); let newGoblin = enemy_army.createEnemy('goblin'); let newElf = enemy_army.createEnemy('elf'); console.log(newGoblin.attack()); console.log(newElf.attack()); console.log(newGoblin.scream()); console.log(newElf.magic_attack()); //  

El patrón de "prototipo"

Aquí se utiliza algún tipo de "esqueleto" del objeto para crear un nuevo objeto. Una de prototipos es el tipo nativo del edificio de la OLP en JavaScript.

 //,     to-do  const itemDeal = { colorOfHeader: blue; //     .    ? create() { console.log("our item create"); //  item }, delete() { console.log("our item delete now"); //   item }, }; //     ,  to-do  //  ,   Trello. const newDeal = Object.create(itemDeal, { owner: { value: 'Paul' } }); console.log(newDeal.__proto__ === itemDeal); //true ; //,     to-do  const itemDeal = { colorOfHeader: blue; //     .    ? create() { console.log("our item create"); //  item }, delete() { console.log("our item delete now"); //   item }, }; //     ,  to-do  //  ,   Trello. const newDeal = Object.create(itemDeal, { owner: { value: 'Paul' } }); console.log(newDeal.__proto__ === itemDeal); //true ); //,     to-do  const itemDeal = { colorOfHeader: blue; //     .    ? create() { console.log("our item create"); //  item }, delete() { console.log("our item delete now"); //   item }, }; //     ,  to-do  //  ,   Trello. const newDeal = Object.create(itemDeal, { owner: { value: 'Paul' } }); console.log(newDeal.__proto__ === itemDeal); //true dueño: {valor: 'Paul'}}); //,     to-do  const itemDeal = { colorOfHeader: blue; //     .    ? create() { console.log("our item create"); //  item }, delete() { console.log("our item delete now"); //   item }, }; //     ,  to-do  //  ,   Trello. const newDeal = Object.create(itemDeal, { owner: { value: 'Paul' } }); console.log(newDeal.__proto__ === itemDeal); //true 

El patrón de "prototipo" es útil si de alguna manera se puede ampliar o reducir la funcionalidad de la aplicación.

Patrón "Singleton"

O como es más conocido, «Singleton». "Único" es un patrón especial en el que puede existir sólo una instancia de la clase. El patrón es el siguiente - el trabajo objeto de inicialización si no hay una instancia creada o devuelto. Si la hay, entonces devolver el objeto iniciado.
Supongamos que creamos una clase del héroe, y nosotros queremos que sea 1 en lugar de 4 como en Jumanji.

 class Hero { constructor(name) { if (Hero.exists) { return Hero.instance; } this._name = name; Hero.instance = this; Hero.exists = true; return this; } getName() { return this._name; } setName(name) { this._name = name; } } //    const smolder = new Hero('Smolder!'); console.log(smolder.getName()); // Smolder! const ruby = new Hero('Ruby'); console.log(ruby.getName()); // Smolder! // ,       .         . //            !'); class Hero { constructor(name) { if (Hero.exists) { return Hero.instance; } this._name = name; Hero.instance = this; Hero.exists = true; return this; } getName() { return this._name; } setName(name) { this._name = name; } } //    const smolder = new Hero('Smolder!'); console.log(smolder.getName()); // Smolder! const ruby = new Hero('Ruby'); console.log(ruby.getName()); // Smolder! // ,       .         . //            '); class Hero { constructor(name) { if (Hero.exists) { return Hero.instance; } this._name = name; Hero.instance = this; Hero.exists = true; return this; } getName() { return this._name; } setName(name) { this._name = name; } } //    const smolder = new Hero('Smolder!'); console.log(smolder.getName()); // Smolder! const ruby = new Hero('Ruby'); console.log(ruby.getName()); // Smolder! // ,       .         . //            

Así, gracias a todos por su atención! Espero que alguien, este artículo servirá como un buen inicio de la OLP en JavaScript (aunque, para ser honesta confesión de mis colegas con años de experiencia y en Java, y en JavaScript, programación orientada a objetos allí, por decirlo suavemente, no muy desarrollada). Sin embargo, en el lenguaje de las nuevas normas ha mejorado mucho, y estoy seguro de que esta metodología seguirá siendo sólo es más probable que se utilicen (o reemplazará el dardo y todo).

Enlaces de interés:

developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/create
learn.javascript.ru/class
developer.mozilla.org/ru/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript