Javascript_Design Pattern

디자인 패턴이란?

디자인패턴은 소프트웨어 개발에 발생하는 다양한 이슈들을 해결하는데 도움을 주는 일종의 증명된 기술들이다.

이러한 상황에서는 이러한 패턴을 사용하면 좋을 것이라는 일종의 방향성을 제시해준다.

1. Singleton Pattern

• 싱글톤 패턴은 특정 클래스의 객체를 한 개만 유지하는 패턴이다.
• 전역에서 접근할 수 있도록 제한하기 위해 사용한다.

const utils=(function (){
  let instance;
  
  function initialize () {
    return {
      sum : function(a,b) {
        return a+b;
      }
    };
  }
  return {
    getInstance: function () {
      if(!instance){
        instance=initialize();
      }
      return instance;
    }
  };
})();

let sum = utils.getInstance().sum(3,5);//8

2.Factory Pattern

• 팩토리 패턴은 비슷한 객체를 공장에서 찍어내듯이 반복적으로 생성할 수 있는 패턴이다.
• 컴파일 시점에 구체적인 타입(클래스)을 몰라도 객체 생성이 가능하다.
• 팩토리 패턴의 가장 흔한 사례는 Object()를 이용한 객체 생성시, 주어지는 값 타입에 따라 String,Boolean,Number등으로 객체가 생성되는 것이다.

const Vehicle= function(){};

const Car = function() {
  this.say= function() {
    console.log('I am a car');
  }
};

const Truck = function(){
  this.say=function(){
    console.log('I am a truck');
  }
};

const Bike = function(){
  this.say=function(){
    console.log('I am a bike');
  }
};
const VehicleFactory = function(){
  this.createVehicle=(vehicleType)=>{
    let vehicle;
    switch(vehicleType){
      case 'car':
        vehicle = new Car();
        break;
           case 'truck':
        vehicle = new Truck();
        break;
           case 'bike':
        vehicle = new Bike();
        break;
      default:
        vehicle = new Vehicle();
        

3.Constructor Pattern

constructor pattern을 사용함으로써 같은 객체의 여러 인스턴스화를 할 수 있다.

let person = {};
let person = new Object();
function Person (name,age) {
  this.name=name;
  this.age = age;
  this.showName = () => console.log(this.name);
}
let person = new Person('Amy",28);
person.showName();

4.Prototype Pattern

프로토타입패턴은 객체의 새로운 인스턴스를 프로토타입에서 복제를 통해 만든다. 새로운 객체의 생성자를 직접적으로 만든다면 복잡하고, 비효율적일 수 있으니 프로토타입에서는 이를 보완할 수 있다.

function Book(title,price) {
  this.title=title;
  this.price=price;
  this.printTitle = () =>console.log(this.title);
}
function BookPrototype(prototype){
  this.prototype=prototype;
  this.clone=()=>{
    let book = new Book();
    book.title = prototype.title;
    book.price = prototype.price;
    
    return book;
  };
}
let sampleBook = new Book ('JavaScript',15);
let prototype = new BookProtoType(sampleBook);
let book = prototype.clone();
book.printTitle();

자바스크립트에서는 자체 내장 프로토타입 기능이 있기에, 아래의 방법을 통해 효과적으로 이 패턴을 사용할 수 있다.

let book = {
  title : 'Javascript',
  price:15
}
let anotherBook = Object.assign({},book);

5.Observer Pattern

Observer pattern은 이벤트를 구독하는 구독 모델을 제공하며 해당 이벤트가 발생하면 알림을 받게 된다.

function Newsletter(){
  this.observers=[];
}
Newsletter.prototype ={
  subscribe: function (observer) {
    this.observers.push(observer);
  },
  unsubscribe: function (observer){
    this.observers = this.observers.filter(ob => ob !== observer);
  },
  notify:function(){
    this.observers.forEach(observer =>console.log('Hello' + observer.toString()));
  }
}

6.Module Pattern

모듈 패턴은 소프트웨어 모듈의 개념을 구현하는데 사용되는 디자인 패턴이다.이 패턴은 코드에 대한 캡슐화를 제공해주기에 더욱 안전한 어플리케이션을 만들 수 있다.

const bookModule=(function() {
  //private
  let title='Javascript';
  let price=15;
  //public
  return {
    printTitle: function() {
      console.log(title);
    }
  }
})();
bookModule.printTitle();

참고: https://sangcho.tistory.com/entry/%EC%9B%B9%EA%B0%9C%EB%B0%9C%EC%9E%90%EA%B0%80%EC%95%8C%EC%95%84%EC%95%BC%ED%95%A07%EA%B0%80%EC%A7%80%EB%94%94%EC%9E%90%EC%9D%B8%ED%8C%A8%ED%84%B4