JavaScript'in güçlü türleri ve arayüzleri olmamasına veya sahte sınıflara sahip olmasına rağmen, bu daha iyi kod için çabalamamamız gerektiği anlamına gelmez .

Kodumuzu her seferinde bir adım olmak üzere daha temiz, anlaşılır ve bakımı yapılabilir hale getirmek için her zaman durumlar vardır .

Creational Patterns (Oluşturma Kalıpları)

Factory Function

Factory Method  olarak da bilinen Factory Function , kodun ortak çalışma bölümünü gevşek bir şekilde birleştirmeyi amaçlayan bir kalıptır .

Oluşumlarının, beklenen durumu döndüren bir fabrika işleviyle değiştirilmesinden oluşur .

İlk uygulama

Standart bir JavaScript uygulamasında aşağıdaki bir gibi betiğimizin olduğunu varsayalım.

"use strict";

window.fetch = fetch;

function Response(response) {
  this.response = response.response;
  this.ok = response.status >= 200 && response.status < 300;
  this.statusText = response.statusText;
}

Response.prototype.json = function() {
  return JSON.parse(this.response);
};

function Request(requestInit) {
  this.method = requestInit.method || "GET";
  this.body = requestInit.body;
  this.headers = requestInit.headers;
}

function fetch(url, requestInit) {
  return new Promise(function(resolve, reject) {
    const request = new XMLHttpRequest();
    const requestConfiguration = new Request(requestInit || {});
    request.open(requestConfiguration.method, url);
    request.onload = function() {
      const response = new Response(this);
      resolve(response);
    };
    request.onerror = function() {
      reject("Network error!");
    };
    for (const header in requestConfiguration.headers) {
      request.setRequestHeader(header, requestConfiguration.headers[header]);
    }
    requestConfiguration.body && request.send(requestConfiguration.body);
    requestConfiguration.body || request.send();
  });
}

Bu, örnekte new betimlemesini nesnelerimi oluşturmak için bazen 4 kez çağrıldığını göreceksiniz. Fetch için özellikle bazen gerçekten çok fazla tekrara düştüğünü göreceksiniz. 

Fakat; 

function fetch(url, requestInit) {
  return new Promise(function(resolve, reject) {
    const request = new XMLHttpRequest(); // bad
    const requestConfiguration = new Request(requestInit || {}); // bad
    request.open(requestConfiguration.method, url);
    request.onload = function() {
      const response = new Response(this); // bad
      resolve(response);
    };
//

Şeklinde bir kullanım burada söz konusu olabilir, biz sarmak istiyorum sonuçta bir Promise kadar kötü değil oluşturmak için XMLHttpRequestbir Promise düşen sevgili geliştiriciler için daha iyi bir ergonomik sunuyor gibi görünüyor. Peki ya başka bir yolu olsaydı? 

Spesifik uygulamalar : ait XMLHttpRequest, Requestve Response. Ya farklı kurucular kullanmak istiyorsak ve gelecekte (veya test aşamasında) farklı uygulamalar arasında geçiş yapabilmek istiyorsak?

Factory Function Yeniden Düzenleme

Factory fonksiyonlarına Refactor (testler olmadan Refactor yok!) Her hareket kendi fabrika işlevine yapıcı çağrısı . Ardından, istenen örneği oluşturmak için fabrika işlevini kullanırız:

function createXHR() {
  return new XMLHttpRequest();
}

function createRequest(init) {
  return new Request(init);
}

function createResponse(response) {
  return new Response(response);
}

function fetch(url, requestInit) {
  return new Promise(function(resolve, reject) {
    const request = createXHR();
    const requestConfiguration = createRequest(requestInit || {});
    request.open(requestConfiguration.method, url);
    request.onload = function() {
      const response = createResponse(this);
      resolve(response);
    };

Burada, değiştirdiğimiz tüketici kodunda:

  • new XMLHttpRequest() ile createXHR()
  • new Request(arg) ile createRequest(arg)
  • new Response(arg) ile createResponse(arg)

Bu yeniden düzenleme, kodu daha az bağlantılı , kolayca test edilebilir ve gelecekte yeniden düzenlemeyi daha kolay hale getirir . Artık belirli bir kurucuya bağlı olmadığımız için, kurucuyu tek bir yerde değiştirebiliriz ve değişiklik tüm tüketicilere yayılır.