İçeriğe geç →

TypeScript ile Decorator Pattern

Vikipedia

Nesne yönelimli programlamada, dekoratör kalıbı, aynı sınıftaki diğer nesnelerin davranışını etkilemeden dinamik olarak bireysel bir nesneye davranış eklenmesine izin veren bir tasarım desenidir. Dekoratör modeli, tek bir Sorumluluk Prensibi’ne uymak için kullanışlıdır, çünkü işlevselliğin özel ilgi alanlarına sahip sınıflar arasında bölünmesine izin verir. Dekoratör paterni yapısal olarak neredeyse bir sorumluluk paterni zincirine özdeştir; aradaki fark, bir sorumluluk zincirinde, sınıfların tam olarak bir tanesinin talebi yerine getirmesidir, dekoratör için ise tüm sınıflar bu talebi yerine getirir.

UML

Senaryo

Bir araba (tesla) alacağımızı varsayalım ve bu arabanın farklı opsiyonları var opsiyonlara göre fiyatları artıyor ve azalıyor.

/**
 *============================= DECORATOR PATTERN ========================================================
 * Component dinamik olarak operasyonlar eklenecek yapının yani (Concrete Component) uygulayacağı interface veya abstract nesnedir.
 * Concrete Component ise bu yapıyı uygulayan gerçek nesnelerdir.
 * Decorator nesnesi Component Interfacesini uygular ve içinde Component tipinden bir referans barındırır
 * ConcreteDecerator nesneleri ekleyeceğimiz operasyonların olacağı nesnelerdir ve Decorator arayüzünü veya Abstract Classı uygular
 * 
 */

// COMPONENT INTERFACE
// * Component dinamik olarak operasyonlar eklenecek yapının uygulayacağı interface veya abstract nesnedir.
abstract class Car {

    public description: string;

    public getDescription(): string{
        return this.description;
    }

    public abstract cost(): number;

}


// REAL OBJECTS
// Concrete Component ise bu yapıyı uygulayan gerçek nesnelerdir.
class ModelS extends Car {

    public description = "Model S";

    public cost(): number {
        return 73000;
    }
}


// REAL OBJECTS
// Concrete Component ise bu yapıyı uygulayan gerçek nesnelerdir.
class ModelX extends Car {

    public description = "Model X";

    public cost(): number
    {
        return 77000;
    }
}


// DECORATOR
// Decorator nesnesi Component Interfacesini uygular ve içinde Component tipinden bir referans barındırır
abstract class CarOptions extends Car
{
    decoratedCar: Car;
    public abstract getDescription():string;
    public abstract cost():number;
}

// ConcreteDecerator nesneleri ekleyeceğimiz operasyonların olacağı nesnelerdir ve Decorator arayüzünü veya Abstract Classı uygular
class EnhancedAutoPilot extends CarOptions
{
    constructor(car:Car)
    {
        super();
        this.decoratedCar = car;
    }
    public getDescription(): string {
       return this.decoratedCar.getDescription() + ', Enhanced Autopilot';
    }   
    
    public cost(): number {
        return this.decoratedCar.cost() + 5000;
    }
    
}

// ConcreteDecerator nesneleri ekleyeceğimiz operasyonların olacağı nesnelerdir ve Decorator arayüzünü veya Abstract Classı uygular
class RearFacingSeats extends CarOptions
{
    constructor(car:Car)
    {
        super();
        this.decoratedCar = car;
    }
    public getDescription(): string {
       return this.decoratedCar.getDescription() + ', Rear Facing Seats ';
    }   
    
    public cost(): number {
        return this.decoratedCar.cost() + 4000;
    }
    
}

let myTesla  = new ModelS();
myTesla = new RearFacingSeats(myTesla);
myTesla = new EnhancedAutoPilot(myTesla);
console.log(myTesla.cost());
console.log(myTesla.getDescription());
// Result : 82000 Model S, Rear Facing Seats , Enhanced Autopilot 

Kategori: VueJs

Yorumlar

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir