Padrões de Design JS: Padrões de Criação de Objetos

Então, cidadãos de Khabrovsk, já nesta quinta-feira no OTUS, o curso "Fullstack JavaScript Developer" começará. E hoje estamos compartilhando com você a publicação de outro autor antes do início do curso.



Autor do artigo: Pavel Yakupov

---

Neste artigo, falaremos sobre os padrões de design mais simples e comuns na linguagem Javascript - e tentaremos explicar quais aplicar quando.
O que são padrões de design em geral? Padrões de design é um termo usado para soluções comuns e freqüentemente usadas para problemas comuns na criação de programas.

Simplificando, os padrões de design são soluções bem-sucedidas que são usadas com bastante frequência. Os padrões de design como conceito foram formados no momento em que a linguagem de programação JavaScript não foi mencionada, no campo dos padrões de design de engenharia de software foram descritos em detalhes em 1994 pelos Big Four. No entanto, em nosso artigo, abordaremos a implementação de alguns padrões simples na linguagem de programação JavaScript.

Vamos examinar rapidamente os principais tipos de padrões de design:

Padrões de Design de Criação

Como o nome indica, esses padrões são usados ​​principalmente para criar novos objetos. Isso inclui padrões como Construtor, Fábrica, Protótipo e Singleton.

Padrões de projeto estrutural

Esses padrões estão associados a classes e composição de objetos. Eles ajudam a estruturar ou reestruturar objetos ou suas partes sem interromper a operação de todo o sistema.

Padrões de Design de Comportamento

Esse tipo de padrão de design visa melhorar a comunicação entre diferentes objetos. Os padrões de design comportamental incluem Comandante, Iterador, Mediador, Observador, Padrão de Estado, Estratégia e Modelo.

Neste artigo, analisamos apenas os padrões de design relacionados à criação de objetos - porque eles são um pouco mais simples e mais adequados para os iniciantes começarem a criar seus aplicativos de tarefas, RPGs de texto no console, jogos simples no Canvas etc.

Padrão "Módulo"

Esse padrão de design apareceu na linguagem JavaScript, por assim dizer, involuntariamente. Inicialmente, a linguagem não pensava em neutralizar fenômenos como a poluição do escopo global (e em outros idiomas, como C # ou C ++, há espaço para nome que resolve esse problema imediatamente). Além disso, os módulos são parcialmente necessários para a reutilização de código, porque, depois que eles podem ser criados e usados ​​pela primeira vez, eles podem ser conectados a projetos de outras equipes usando horas-homem com muito mais competência.
O módulo durante toda a sua existência (já no ES5, era amplamente utilizado) usava IIFE (imediatamente chamado de expressões funcionais).

Aqui está um exemplo simples do padrão "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); //       

O padrão "Módulo" encapsula completamente os dados nele contidos. Nós podemos acessá-los apenas usando métodos públicos, e até que implementações de JavaScript de métodos públicos e privados "fora da caixa" tenham que ser implementadas dessa maneira.

Padrão do Construtor

Este é um padrão de design projetado para criar um objeto. Um construtor é uma função que cria novos objetos. No entanto, no JavaScript, os objetos podem ser criados dinamicamente, mesmo sem uma função de construtor ou definição de classe.
O construtor é um dos padrões de design mais usados. É usado para criar objetos de um determinado tipo.

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

Padrão de fábrica

O padrão Factory é outro padrão focado na criação de um objeto a partir de uma classe. Nele, fornecemos interfaces comuns que delegam a criação de um objeto de subclasses.

Esse padrão de design é mais frequentemente usado para manipular uma coleção de objetos que possuem características diferentes e mesmas.
No exemplo abaixo, criaremos uma classe inimiga (EnemyFactory) para a nossa busca de texto. Sim, o exemplo é bastante simples, mas esse é o problema dos padrões de design: eles são necessários para aplicativos "grandes". Se você tiver apenas três fotos voando ao clicar na página, nenhum padrão de design será especialmente útil para você.

Ok, apenas mostre um código para o nosso RPG de texto no console:

 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()); //  

Padrão de protótipo

Aqui usamos algum tipo de "esqueleto" de um objeto real para criar um novo objeto. E a prototipagem é o tipo mais nativo de criação de OOP em 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 

O padrão Prototype é útil se seu aplicativo puder expandir ou reduzir a funcionalidade.

O Padrão Solitário

Ou, como ele é mais conhecido, "Singleton". Um "solitário" é um padrão especial no qual apenas uma instância de uma classe pode existir. O padrão funciona da seguinte maneira - a inicialização do objeto funcionará se não houver uma única instância criada ou retornada. Se presente, o objeto acionado será retornado.
Suponha que criamos uma classe do personagem principal e queremos que seja 1, não 4, como em 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! // ,       .         . //            

Então, obrigado a todos pela atenção! Espero que este artigo sirva como um bom começo para a OOP em JavaScript (embora, para ser honesto, meu colega com muitos anos de experiência em Java e JavaScript, a OOP não seja muito desenvolvida lá, para dizer o mínimo). No entanto, nos novos padrões, a linguagem melhorou significativamente e tenho certeza de que essa metodologia será usada apenas com mais frequência (ou o Dart virá e substituirá tudo).

Links úteis:

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