{"componentChunkName":"component---src-templates-blog-post-js","path":"/js-design-patterns/","result":{"data":{"markdownRemark":{"html":"

Introdução

\n

JavaScript é uma linguagem moderna e dinâmica onde temos muita flexibilidade pois sua tipagem é fraca, possibilitando com que possamos fazer muitas manipulações em nosso código, é uma linguagem multiparadigma o que significa que possui elementos de POO (Programação Orientada a Objetos) e também de programação funcional.

\n

No exemplo vamos entender como usamos os mecanismos internos do JavaScript para fazer herança, por meio de Prototypes, como podemos adicionar comportamentos em um objeto já existente e como podemos criar um histórico das transformações que ocorreram em nosso código.

\n

Definição do projeto

\n

Então vamos ao nosso projeto, vamos supor que trabalhamos em um empresa de tecnologia e temos três tipos de funcionários, o dev. Júnior, o Pleno e o Sênior e que cada um pode realizar uma tarefa distinta, o Júnior pode fazer commit do seu código em um repositório da empresa, o Pleno pode fazer commit e revisar o código e o Sênior faz tudo isso e ainda faz o deploy.

\n

Isso é só um exemplo prático não refletindo a realidade ou enviesando como deve ser um fluxo de trabalho no dia-a-dia

\n

Prototype

\n

Aqui vamos abordar o padrão criacional Prototype, esse padrão serve para criar objetos a partir de outros existentes, criando uma cópia do objeto e podendo adicionar mais atributos nele.

\n

No JavaScript a idéia de protótipos é muito forte, pois todo objeto em JS possui propriedades internas, que são chamados de Prototype que é uma referência para outro objeto; resumindo é a forma como o JS faz herança.

\n

*Tem muito mais conteúdo sobre o assunto de Prototype e pode ser encontrado aqui*

\n

Para o nosso exemplo vamos começar criando a estrutura base do que seria um funcionário, na pasta prototype no arquivo index.js vamos criar a nossa function Developer que recebe name e registration. Com isso temos a base (protótipo) para a criação de novos objetos, mais abaixo vamos começar a criar os nossos objetos especializados e adicionar neles a propriedade position onde é informado a senioridade do funcionário:

\n
function Developer(name, registration) {\n\n    this.name = name;\n    this.registration = registration;\n\n}\n\nexports.createJunior = function (name, registration) {\n    return Object.create(new Developer(name, registration), { position: { value: 'Junior' } })\n}\n\nexports.createPleno = function (name, registration) {\n    return Object.create(new Developer(name, registration), { position: { value: 'Pleno' } })\n}\n\nexports.createSenior = function (name, registration) {\n    return Object.create(new Developer(name, registration), { position: { value: 'Senior' } })\n}
\n

Com isso feito agora quando quisermos criar um funcionário basta que chamemos a função criadora respectiva e nos será devolvido o funcionário com sua position correta como no exemplo de uso abaixo:

\n
const {createJunior, createPleno, createSenior} = require('./prototype');\n\nconst junior = createJunior(\"junior\", \"123\");\n\nconst pleno = createPleno(\"pleno\", \"456\");\n\nconst senior = createSenior(\"senior\", \"789\");
\n

Decorator

\n

O padrão Decorator nos permite adicionar comportamentos em um objeto de forma dinâmica. Pensando em como isso pode nos ajudar nesse projeto podemos imaginar que temos ações que cada desenvolvedor pode ou não fazer e podemos adicionar esse comportamento em tempo de execução, tornando o nosso código mais flexível. Podemos aproveitar isso fazendo as nossas validações do que cada desenvolvedor poderá fazer, em nossa pasta decorator iremos adicionar o seguinte código.

\n
exports.commit = function (Developer) {\n    let c = Developer.commit();\n    return c + `Developer ${Developer.position} can committing\\n`\n}\n\nexports.codeReview = function (Developer) {\n    let cr = Developer.codeReview();\n    let test = Developer.position === 'Junior' ? `Developer ${Developer.position} can not make code review` : `Developer ${Developer.position} can make code review`;\n    return cr + test + '\\n';\n}\n\nexports.deploy = function (Developer) {\n    let d = Developer.deploy();\n    let test = Developer.position !== 'Senior' ? `${Developer.position} can not deploy` : `Only Developers ${Developer.position} can deploy`;\n    return d + test + '\\n';\n}
\n

Também adicionamos as funções no nosso arquivo onde temos a definição de Developer:

\n
function Developer(name, registration) {\n\n    this.name = name;\n    this.registration = registration;\n\n    this.commit = function () {\n        return \"Can I to commit?\\n\";\n    };\n    this.codeReview = function () {\n        return \"Can I to do code review?\\n\";\n    };\n    this.deploy = function () {\n        return \"Can I to do a deploy?\\n\";\n    };\n\n}
\n

E podemos usar da seguinte forma:

\n
const {createJunior, createPleno, createSenior} = require('./prototype');\nconst {commit, codeReview, deploy} = require('./decorator');\n\nconst junior = createJunior(\"junior\", \"123\");\n\nconsole.log(commit(junior));\nconsole.log(codeReview(junior));\nconsole.log(deploy(junior));\n\nconst pleno = createPleno(\"pleno\", \"456\");\n\nconsole.log(commit(pleno));\nconsole.log(codeReview(pleno));\nconsole.log(deploy(pleno));\n\nconst senior = createSenior(\"senior\", \"789\");\n\nconsole.log(commit(senior));\nconsole.log(codeReview(senior));\nconsole.log(deploy(senior));
\n

Executando esse código temos o resultado:

\n
Can I to commit?\nDeveloper Junior can committing\n\nCan I to do code review?\nDeveloper Junior can not make code review\n\nCan I to do a deploy?\nJunior can not deploy\n\nCan I to commit?\nDeveloper Pleno can committing\n\nCan I to do code review?\nDeveloper Pleno can make code review\n\nCan I to do a deploy?\nPleno can not deploy\n\nCan I to commit?\nDeveloper Senior can committing\n\nCan I to do code review?\nDeveloper Senior can make code review\n\nCan I to do a deploy?\nOnly Developers Senior can deploy
\n

Memento

\n

Agora veremos o padrão Memento, esse padrão comportamental nos permite salvar os estados dos nossos objetos, criando uma lista como um histórico das ações realizadas. No nosso cenário seria muito útil se pudéssemos ter um histórico de tudo o que cada desenvolvedor tentou fazer em nossa aplicação.

\n

Para isso vamos precisar ter a representação do nosso Memento que é o nosso Snapshot, uma fotografia do nosso objeto naquele momento exato. Precisamos também da representação do objeto que é nosso Originador que salva e recupera os nossos Mementos e por fim a nossa classe “cuidadora” que é quem mantem os registros.

\n

O código ficaria assim:

\n
function Memento(state) {\n    this.state = state;\n    this.getState = function() {\n        return this.state;\n    }\n}\n\nfunction Originator() {\n    this.state = null;\n    \n    this.add = function(state) {\n        this.state = state;\n    }\n    this.save = function() {\n        return new Memento(this.state);\n    }\n    this.restore = function(memento) {\n        return memento.getState();\n    }\n}\n\nfunction Historic() {\n    this.states = [];\n\n    this.originator = new Originator();\n    \n    this.add = function(state) {\n        this.originator.add(state);\n        this.states.push(this.originator.save());\n    }\n    this.getByIndexOrLast = function(i) {\n        if (!this.states.length) {\n            return;\n        }\n\n        if (!i && i !== 0) {\n            i = this.states.length - 1;\n        }\n\n        return this.originator.restore(this.states[i]);\n    }\n    this.countSteps = function() {\n        return this.states.length;\n    }\n    this.getStates = function() {\n        return this.states;\n    }\n\n}\n\nmodule.exports = {\n    Historic: Historic\n};
\n

E aqui temos o nosso Memento que é somente a classe do nosso estado, a Originator que é quem produz e o Historic que é quem adiciona, recupera e lista os nossos estados.

\n

Com isso podemos executar o seguinte código e poder recuperar o histórico de cada desenvolvedor:

\n
const Historic = require('./memento').Historic;\n\nlet juniorHistoric = new Historic();\njuniorHistoric.add(\"Created Junior\\n\");\n\njuniorHistoric.add(\"Junior trying to commit\\n\");\n\njuniorHistoric.add(\"Junior trying to do code review\\n\");\n\njuniorHistoric.add(\"Junior trying to deploy\\n\");\n\njuniorHistoric.getStates().forEach((memento) => {\n    console.log(memento.state);\n});\n\nlet plenoHistoric = new Historic();\nplenoHistoric.add(\"Created Pleno\\n\");\n\nplenoHistoric.add(\"Pleno trying to commit\\n\");\n\nplenoHistoric.add(\"Pleno trying to do code review\\n\");\n\nplenoHistoric.add(\"Pleno trying to deploy\\n\");\n\nplenoHistoric.getStates().forEach((memento) => {\n    console.log(memento.state);\n});\n\nlet seniorHistoric = new Historic();\nseniorHistoric.add(\"Created Senior\\n\");\n\nseniorHistoric.add(\"Senior trying to commit\\n\");\n\nseniorHistoric.add(\"Senior trying to do code review\\n\");\n\nseniorHistoric.add(\"Senior trying to deploy\\n\");\n\nseniorHistoric.getStates().forEach((memento) => {\n    console.log(memento.state);\n});
\n

E temos a seguinte saída:

\n
Created Junior\n\nJunior trying to commit        \n\nJunior trying to do code review\n\nJunior trying to deploy        \n\nCreated Pleno\n\nPleno trying to commit\n\nPleno trying to do code review\n\nPleno trying to deploy\n\nCreated Senior\n\nSenior trying to commit\n\nSenior trying to do code review\n\nSenior trying to deploy
\n

Temos o histórico e podemos navegar nessa “linha do tempo”.

\n

Código fonte

\n

O código fonte pode ser encontrado aqui

","fields":{"slug":"/js-design-patterns/"},"frontmatter":{"date":"01 de outubro de 2020","description":"Utilizando padrões Prototype, Decorator e Memento","title":"Padrões de projeto com JavaScript","tags":["Desenvolvimento","JavaScript","Design Patterns"],"author":"Guilherme Alves","image":{"id":"2d5c9ebb-8a6c-5144-9c9a-0684350651b6","publicURL":"/static/4087a5a05f06d5f1a816989d089ed0ee/JS-Design-Patterns.png","childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACJklEQVQoz2VTS2gTURR900zMNDbpNJE0k2Rm0vrBbroR3UQRigiCW7cFF1ILBUuLbaUVCqIQBAXduBL8bNy4kaIoIrqppSqIFcV+bWv9pFKMSfyU9vjufUwc6+Ixj3fvPfecc++IH7MOsOQCn1z8nHNQmbFBb3S8O77KeMHle3naxuq8fFvJAt/k+exynpcrSlM2Ru8k8eBWAsuvM/g971QTqEFx0saVfAzXLsXxXd6p+dx4GheGGzDUXY+RmwmsffhLQBTf2ehsr0NudwjXZdHqggoQEwIvTGQghMCWWA0XTY2mkLUD/Oadk51R4KOLkqwRlPTyoYXHtxvx7F6SgVjajAIk1pvDGpx0gGWf6TcZZPBEFON3kzi438CNy3GsLSo7BLFZl5Spw7qPesUHWGtoyFgKcLi3ngF7j0fYPxSlj1/cKhHhGU106euZ62dohDS4mQB7+uqRhWidxqAkPT9kYuWtzVaVPcl+Vl4DGsCv98pDAmxydC6koYyNJHGozah62JYzOEYNq4B+YLagoCygxHCtxmx4ylIeltUaked794QY9OrFOK/XfwxJ5psnKfR0RDD9NIXZsTQX7NiqM/OzAyaOHA5j4XkaqDTx6lD8/GmTd/MfQNpJnmSfSoo31MBqVCvSdTTCsQP7lFQzqqFle5DvQV3gxX2LFYmNcskHYpIfNNHaEsTObTq6j0XYS1pgkn3ulIldrZvQ7OrsJf0UtCVU9wdUUhrQZ9r6qwAAAABJRU5ErkJggg==","aspectRatio":1.7777777777777777,"src":"/static/4087a5a05f06d5f1a816989d089ed0ee/0823f/JS-Design-Patterns.png","srcSet":"/static/4087a5a05f06d5f1a816989d089ed0ee/c67b7/JS-Design-Patterns.png 320w,\n/static/4087a5a05f06d5f1a816989d089ed0ee/d3930/JS-Design-Patterns.png 640w,\n/static/4087a5a05f06d5f1a816989d089ed0ee/0823f/JS-Design-Patterns.png 1280w,\n/static/4087a5a05f06d5f1a816989d089ed0ee/c730b/JS-Design-Patterns.png 1920w,\n/static/4087a5a05f06d5f1a816989d089ed0ee/55bfe/JS-Design-Patterns.png 2240w","sizes":"(max-width: 1280px) 100vw, 1280px"}}}},"timeToRead":6}},"pageContext":{"slug":"/js-design-patterns/","previous":{"fields":{"slug":"/python-design-patterns/"},"frontmatter":{"title":"Padrões de projeto com Python","date":"28 set, 2020"}},"next":{"fields":{"slug":"/spring-security-jwt/"},"frontmatter":{"title":"Spring Security e JWT","date":"14 dez, 2020"}}}},"staticQueryHashes":["63159454"]}