자바스크립트 디자인 패턴

싱글톤 패턴 | 공장 패턴 | 생성자 패턴

주제

싱글턴 패턴
공장 패턴
팩토리 패턴과 생성자 패턴

Singleton 디자인 패턴은 여러 구성 요소에서 사용할 수 있는 단일 인스턴스를 노출합니다.
Singleton Pattern 은 Redux나 React Context 와 같은 전역 상태 관리 라이브러리의 기본이라고 할 수 있습니다 .
인스턴스를 하나만 생성하도록 클래스를 제한하는 패턴입니다.
전역적으로 액세스할 수 있으며 전역 상태에 액세스하기 위한 단일 액세스 지점 역할을 합니다.

let instance;
let globalState = {
  color: ""
};

class StateUtility {
  constructor() {
    if (instance) {
      throw new Error("New instance cannot be created!!");
    }
    instance = this;
  }
  getPropertyByName(propertyName) {
    return globalState[propertyName];
  }
  setPropertyValue(propertyName, propertyValue) {
    globalState[propertyName] = propertyValue;
  }
}
let stateUtilityInstance = Object.freeze(new StateUtility());
export default stateUtilityInstance;

마지막으로 다음과 같이 클래스의 인스턴스를 만듭니다 let stateUtilityInstance = Object.freeze(new StateUtility());. .
우리는 Object.freeze다른 클래스/구성 요소/모듈이 노출된 를 수정할 수 없도록 사용했습니다 stateUtilityInstance.

팩토리는 객체를 생성하기 위한 함수형 프로그래밍 패러다임의 객체 또는 클래스 또는 함수입니다.
Factory Method 는 클라이언트의 지시에 따라 새 객체를 생성합니다 . JavaScript에서 객체를 생성하는 한 가지 방법은 new 연산자로 생성자 함수를 호출하는 것입니다.
팩토리 디자인 패턴은 여러 하위 클래스가 있는 상위 클래스가 있고 입력에 따라 하위 클래스 중 하나를 반환해야 할 때 사용됩니다 . 이 패턴은 클라이언트 프로그램에서 팩터리 클래스로 클래스를 인스턴스화하는 책임을 집니다.
클래스는 여러 도우미 하위 클래스 중 하나에 책임을 위임하고 어떤 도우미 하위 클래스가 위임인지에 대한 지식을 지역화하려고 합니다.
팩토리 메소드는 다르지만 동시에 많은 특성(예: 메소드 및 속성) 을 공통으로 갖는 객체 모음을 관리, 유지 또는 조작하는 애플리케이션에서 자주 사용됩니다.
팩토리 패턴은 내부에서 생성자나 클래스를 사용할 수 있습니다. 그러나 동적으로 서브클래스를 생성하려는 경우와 같이 객체 생성 프로세스가 동적 요소에 의존하는 경우에는 팩토리 패턴이 선호됩니다.
Factory는 유연하고 재사용 가능한 객체 생성 메커니즘을 제공합니다.

// creates factory function
function vehicleFactory (manufacturer, plateNO) {
    return  {
        manufacturer,
        plateNO,
        startEngine () {
            console.log("reving engine")
        },
        drive () {
            console.log("driving car...")
        }
    }
}
 
const Vehicle1 = vehicleFactory("Toyota", 12345);
console.log(Vehicle1) 
// prints 
//{
//  manufacturer: 'Toyota',
//  plateNO: 12345,
//  startEngine: [Function: startEngine],
//  drive: [Function: drive]
//}
  
const Vehicle2 = vehicleFactory("Ford", 13345);
console.log(Vehicle2) 
// prints 
// {
//  manufacturer: 'Ford',
//  plateNO: 13345,
//  startEngine: [Function: startEngine],
//  drive: [Function: drive]
// }

StartEngine팩터리 패턴은 , driveVehicle및 stopEngine메서드 를 재사용하여 코드 재사용성을 촉진합니다 .

class Car {
    constructor(options) {
        this.wheels = options.wheels || 4;
        this.doors = options.doors || 4;
        this.color = options.color || "silver"; 
    }
}

class Truck {
    constructor(options) {
        this.wheels = options.wheels || 6;
        this.doors = options.doors || 2;
        this.color = options.color || "red"; 
    }
}


class Factory {

    create = (options, vehicleType) => {

        if(!vehicleType) {
            return "unable to make vehicle. Please specify a vehicle type and tryagain!"
        }

        let vehicle;
        
        if (vehicleType === "car") {
            vehicle = new Car(options);
        } else if (vehicleType === "truck") {
            vehicle = new Truck(options);
        } 

  
        vehicle.vehicleType = vehicleType;

        vehicle.startEngine = ()=> console.log(`Reving ${vehicleType} engine`);

        vehicle.driveVehicle = ()=> console.log(`Driving ${vehicleType}...`);

        vehicle.stopEngine = ()=> console.log(`Stop ${vehicleType} engine`);

        return vehicle;
    }
 
};

const vehicleFactory = new Factory();

const car = vehicleFactory.create({
    wheels: 4,
    doors: 2,
    color: "black",
}, "car");

console.log(car)
console.log(car.startEngine())
console.log(car.driveVehicle())

// prints:
//Car {
//  wheels: 4,
//  doors: 4,
//  color: 'silver',
//  vehicleType: 'car',
//  startEngine: [Function],
//  driveVehicle: [Function],
//  stopEngine: [Function]
//}

// Reving car engine
// Driving car...

const truck = vehicleFactory.create({
    wheels: 4,
 doors: 2,
 color: "yellow",
}, "truck")

console.log(truck)
console.log(truck.startEngine())
console.log(truck.stopEngine())
// prints
//Truck {
//  wheels: 4,
//  doors: 2,
//  color: 'yellow',
//  vehicleType: 'truck',
//  startEngine: [Function],
//  driveVehicle: [Function],
//  stopEngine: [Function]
//}

// Reving truck engine
// Stop truck engine

class Car {
    constructor(options) {
        this.wheels = options.wheels || 4;
        this.doors = options.doors || 4;
        this.color = options.color || "silver"; 
    }
}

class Truck {
    constructor(options) {
        this.wheels = options.wheels || 6;
        this.doors = options.doors || 2;
        this.color = options.color || "red"; 
    }
}

class Bus {
    constructor(options) {
        this.wheels = options.wheels || 4;
        this.doors = options.doors || 4;
        this.color = options.color || "white"; 
    }
}

class Motorcycle {
    constructor(options) {
        this.wheels = options.wheels || 2;
        this.doors = options.doors || 0;
        this.color = options.color || "Black"; 
    }
}


class Factory {

    create = (options, vehicleType) => {

        if(!vehicleType) {
            return "unable to make vehicle. Please specify a vehicle type and tryagain!"
        }

        let vehicle;
        
        if (vehicleType === "car") {
            vehicle = new Car(options);
        } else if (vehicleType === "truck") {
            vehicle = new Truck(options);
        } else if (vehicleType === "bus") {
            vehicle = new Bus(options);
        } else if (vehicleType === "motorcycle") {
            vehicle = new Motocycle(options);
        }

  
        vehicle.vehicleType = vehicleType;

        vehicle.startEngine = ()=> console.log(`Reving ${vehicleType} engine`);

        vehicle.driveVehicle = ()=> console.log(`Driving ${vehicleType}...`);

        vehicle.stopEngine = ()=> console.log(`Stop ${vehicleType} engine`);

        return vehicle;
    }
 
};

const vehicleFactory = new Factory();

const bus = vehicleFactory.create({
    wheels: 4,
    doors: 4,
    color: "yellow",
}, "bus");

console.log(bus)
console.log(bus.startEngine())
console.log(bus.driveVehicle())

// prints:
// Bus {
//  wheels: 4,
//  doors: 4,
//  color: 'yellow',
//  vehicleType: 'bus',
//  startEngine: [Function],
//  driveVehicle: [Function],
//  stopEngine: [Function]
//}

// Reving bus engine
// Driving bus...

const bike = vehicleFactory.create({
    wheels: 2,
 doors: 0,
 color: "red",
}, "motorcycle")

console.log(bike)
console.log(bike.startEngine())
console.log(bike.stopEngine())
// prints
// Motorcycle {
//  wheels: 2,
//  doors: 0,
//  color: 'red',
//  vehicleType: 'bike',
//  startEngine: [Function],
//  driveVehicle: [Function],
//  stopEngine: [Function]
//}

// Reving motorcycle engine
// Stop motorcycle engine

var Factory = function () {
    this.createEmployee = function (type) {
        var employee;

        if (type === "fulltime") {
            employee = new FullTime();
        } else if (type === "parttime") {
            employee = new PartTime();
        } else if (type === "temporary") {
            employee = new Temporary();
        } else if (type === "contractor") {
            employee = new Contractor();
        }

        employee.type = type;

        employee.say = function () {
            console.log(this.type + ": rate " + this.hourly + "/hour");
        }

        return employee;
    }
}

var FullTime = function () {
    this.hourly = "$12";
};

var PartTime = function () {
    this.hourly = "$11";
};

var Temporary = function () {
    this.hourly = "$10";
};

var Contractor = function () {
    this.hourly = "$15";
};

function run() {

    var employees = [];
    var factory = new Factory();

    employees.push(factory.createEmployee("fulltime"));
    employees.push(factory.createEmployee("parttime"));
    employees.push(factory.createEmployee("temporary"));
    employees.push(factory.createEmployee("contractor"));

    for (var i = 0, len = employees.length; i < len; i++) {
        employees[i].say();
    }
}

생성자 패턴과 팩토리 패턴은 새로운 객체를 반환하는 객체 생성 패턴 이므로 유사하다.
Factory 메서드는 항상 새 인스턴스를 생성하는 생성자와 달리 이미 생성된 객체를 반환할 수 있습니다 .
팩토리 메서드는 인터페이스를 사용한 코딩 아이디어를 촉진한 다음 구현을 통해 보다 유연한 코드를 생성하지만 생성자는 코드를 특정 구현에 연결합니다.
생성자를 사용하는 이유: 생성자 를 사용하여 객체를 기본 또는 초기 상태로 초기화합니다 . 프리미티브의 기본값은 원하는 값이 아닐 수 있습니다. 생성자를 사용하는 또 다른 이유는 종속성에 대해 알려주기 때문입니다.
팩토리를 사용하는 이유: 팩토리 메소드 패턴 을 사용하면 하위 클래스에서 생성할 객체 유형을 선택할 수 있습니다 . 응용 프로그램별 클래스를 코드에 바인딩할 필요가 없으므로 느슨한 결합이 촉진됩니다.

const vehicleOptions = {type: "cars", color: "white", doors: 4, wheels: 4}

// factory pattern
function Factory(options) {
  let factory = {};
  factory.type = options.type;
  factory.color = options.color;
  factory.wheels = options.wheels;
  factory.doors = options.doors;
  
  return factory;
}

const vehicle = Factory(vehicleOptions);

// constructor pattern
function ConstructorPattern(options) {
  this.type = options.type;
  this.color = options.color
  this.doors = options.doors;
  this.wheels = options.wheels;
}

const vehicle2 = new ConstructorPattern(vehicleOptions);

console.log("factory car", vehicle)
// prints { type: 'cars', color: 'white', wheels: 4, doors: 4 }

console.log("constructor car", vehicle2)
// prints { type: 'cars', color: 'white', wheels: 4, doors: 4 }

개체 또는 구성 요소 설정에 높은 수준의 복잡성이 포함된 경우.
우리가 처한 환경에 따라 다양한 객체 인스턴스를 쉽게 생성해야 할 때.
동일한 속성을 공유하는 많은 작은 개체 또는 구성 요소로 작업할 때.
작동하려면 API 계약(일명 덕 타이핑)만 충족하면 되는 다른 객체의 인스턴스로 객체를 구성할 때. 이는 디커플링에 유용합니다.

스토리 박수 쳐주시고 팔로우 해주세요
코딩 및 시스템 설계 인터뷰 에서 더 많은 콘텐츠 보기
팔로우: 링크드 인 !

레벨업 인재 집단에 가입하고 놀라운 직업을 찾으세요

예술은 비정치적인가?

어제 우리는 스웨덴 가수 Loreen이 트로피를 집으로 가져가서 ABBA가 대회에서 우승한 지 50년 만에 스웨덴의 왕관을 다시 가져가면서 두 번 우승한 최초의 여성이 되는 반짝반짝하고 혼란스러운 그랜드 피날레로 올해 유로비전 송 콘테스트의 문을 닫았습니다. "워털루"와 함께. 그들은 계속해서 팝 음악의 정경에서 가장 큰 행위 중 하나가 되었습니다.