Dominando JavaScript: Padrões de Design de Criação

Mar 21 2023

De solteiros a fábricas: um guia completo para padrões de criação

“[…] cada padrão representa nosso melhor palpite atual sobre qual arranjo do ambiente físico funcionará para resolver o problema apresentado.” - Christopher Alexander e outros.

Foto de Andrew Ridley no Unsplash

“ […] cada padrão representa nosso melhor palpite atual sobre qual arranjo do ambiente físico funcionará para resolver o problema apresentado. ” - Christopher Alexander e outros. (Uma Linguagem Padrão, p. xv)

A citação a seguir pode parecer não relacionada a padrões de software, mas é um bloco de construção para a bíblia dos padrões de engenharia de software: “Design Patterns” da Gang of Four. Descubra como este livro se tornou uma referência clássica na indústria!

O que é um padrão de projeto?

Embora existam muitas definições, um padrão de projeto pode ser entendido como um conceito comprovado que oferece a solução mais conhecida para um problema considerando fatores positivos e negativos.

Para projetar camadas de serviço de software, use o padrão modular . Ao lidar com objetos complexos, use o Padrão Façade (por exemplo, jQuery em cima de DOM complicado). Para notificar observadores específicos sobre uma mudança de estado em um objeto observado, use o Observer Pattern (por exemplo, RxJS , React Router ).

Para concluir, um padrão é definido como a capacidade de resolver um problema por meio de um conceito comprovado que descreve relacionamentos . Não é um caminho direto e geralmente requer várias religações. O fator humano também entra em jogo, pretendendo utilizar métodos que já demonstraram sua eficácia .

Para aumentar a clareza, os padrões de design em JavaScript são classificados em três grupos com base em sua função: padrões criacionais , estruturais e comportamentais .

Padrão de design criacional

Geralmente, um padrão de design criacional é um padrão de design que lida com mecanismos de criação de objetos. Em JavaScript, está relacionado ao processo de criação de novos objetos.

Padrão Singleton

Usado para restringir um objeto a apenas uma instância:

var Person = (function() {
   var person = null;

   function create() {
      return new Object({
         name: 'John',
         age: 29
      });
   }

   return {
      getInstance: function() {
         if (!person) {
            person = create();
         }

         return person;
      }
   }
})();

var instance1 = Person.getInstance();
var instance2 = Person.getInstance();

console.log(instance1 === instance2);

module.exports = Person();
// or we can also instantiate an object with the 'new' keyword
module.exports = new Person;
// CommonJS caches the 'Person' property

Usado para criar novos objetos com o escopo do objeto:

// Creating constructor's functions
var Person = function(firstName, lastName) {
   // Bind 'this' to the new object scope
   this.firstName = firstName;
   this.lastName = lastName;

   // Implicitly return 'this'
}

// Using prototype to avoid creating new instance for each object
Person.prototype.toString = function() {
   return this.firstName + " " + this.lastName;
}

// Creating new objects
// Link objects to an Object's prototype
var p1 = new Person('John', "Doe");
var p2 = new Person('Johana', 'Smith');

console.log('Person 1: ', p1.toString());
console.log('Person 2: ', p2.toString());

class Person {
   constructor(firstName, lastName) {
      this.firstName = firstName;
      this.lastName = lastName;
   }

   toString() {
      return this.firstName + " " + this.lastName;
   }
}

var p1 = new Person('John', "Doe");
var p2 = new Person('Johana', 'Smith');

console.log('Person 1: ', p1.toString());
console.log('Person 2: ', p2.toString());

Usado para criar um pedaço de código encapsulado dentro de seu contexto:

// usersDB.js (controller)
var usersDB = (function() {
   // Creating it's own context
   // Database is secured in this module (context)

   // Instantiate database connection here...

   var get = function(id) {
      return {
         id,
         firstName: 'John',
         lastName: 'Doe'
      }
   }

   var save = function(user) {
      console.log("Saving user: ", user.toString());
   }

   // Revealing Module Pattern
   return {
      get,
      save
   }
})();

// Person.js (model)
var Person = function(data) {
   this.active = false;
   this.firstName = data.firstName;
   this.lastName = data.lastName;
}

Person.prototype.toString = function() {
   return this.firstName + " " + this.lastName;
}

Person.prototype.activate = function() {
   this.active = true;
   this.save();
}

Person.prototype.save = function() {
   usersDB.save(this);
}

// index.js (view)
var p1 = new Person({
   firstName: "Johana",
   lastName: "Smith"
});
var p2 = new Person(usersDB.get(2));
p2.activate();

console.log('Person 1: ', p1.toString());
console.log('Person 2: ', p2.toString());

Padrão de fábrica

Usado para simplificar a criação de objetos:


// userDB.js (controller)
var userDB = (function() {
   // database records...
   var users = [{
      id: 0,
      firstName: 'John',
      lastName: 'Doe'
   }, {
      id: 1,
      firstName: 'Johana',
      lastName: 'Smith'
   }]

   var get = function(id) {
      return {
         ...users[id]
      };
   }

   return {
      get
   }
})();

// taskDB.js (controller)
var taskDB = (function() {
   var get = function(id) {
      return {
         id,
         name: 'Learn Factory Pattern',
         completed: false
      }
   }

   var save = function(user) {
      console.log("Saving task assinged to user: ", user.firstName, user.task);
   }

   return {
      get,
      save
   }
})();

// Person.js (model)
var Person = function(data) {
   this.firstName = data.firstName;
   this.lastName = data.lastName;
   this.task = null;
}

Person.prototype.save = function() {
   taskDB.save(this);
}

// Factroy for dbs
var dbFactory = function() {
   var dbs = this;

   var dbList = [{
      name: 'user',
      source: userDB
   }, {
      name: 'task',
      source: taskDB
   }];

   dbList.forEach(function(db) {
      dbs[db.name] = db.source;
   })
}

// index.js (view)
var factory = new dbFactory();

var p1 = new Person(factory.user.get(0));
var p2 = new Person(factory.user.get(1));

var t1 = factory.task.get(1);

p1.task = t1;
p1.save();

console.log('Person 1: ', p1);
console.log('Person 2: ', p2);

Este artigo abordou os padrões de design de criação, que permitem a criação de instâncias de objeto quando necessário. Examinamos uma seleção desses padrões, incluindo: