디자인 패턴 Module, Singleton, Mixin , PubSub

디자인 패턴
자주 쓰는 설계, 구조상의 문제를 정리한 패턴의 집합
문제 해결을 위한 틀

잘 적용해서 사용하는것이 중요

 

도구, 툴 유행변함
// 라이브러리,프레임워크 
=>스스로 학습능력 중요 

많은 종류가 있고,  만들기도 가능 

 

왜 쓰는지 ?
객체관의 관계를 유연하게 만듬
=> 유지보수가 용이

---

장점
- 증명됨 
많은 시행착오 후 결과물 
​ 
- 재사용성 
우리가 사용할곳에 조립해서 재 사용 
​ 
- 표현적 
가독성 
우리상황에 맞게 조금씩 변형,수정해서 씀 
​ 
=> 사용하면 해결보단 방향성 제시 
수정, 손본 후에 사용해야 함 
설계도 제시

---

디자인 패턴의 종류

1. module
객체 만드는것 === 모듈 만드는것 
ex) 레고 만들기 한피스 모아서 더 큰걸 만듬 ( 조립형 ) 
​ 
모듈을 만드는 패턴이 기본 ( 객체 ) 를  응용해서 나감

사용이유
자바스크립트 이용시 많은 전역 변수 사용 =>
전역 유효범위 어지럽혀짐 =>
모듈패턴 : 어플리케이션, 라이브러리를 위한 하나의 객체 만든 후 모든 기능을 객체에 추가한다.
ex) Jquery 
//소스 충돌이 나지 않는건 제이쿼리도 모듈이기 때문

var module = {
  level: 1,
  levelUp: function () {
    this.level = level + 1;
  }
}
// 하나의 모듈 
module.level = 1000;
console.log(module.level); // 1000 
// 단점 : module.level로 강제로 변경 가능
 

 

var module = (function() { 
  var level = 1; 
   return  { 
  levelUp : function () { 
      level++; 
    },  
  levelDown : function () { 
      level--; 
    }, 
  findLevel : function () { 
     console.log(level); 
    } 
  } 
})(); 
 
module.level = 1500; 
//module 객체에 level 속성 만든것이지 , level에 접근 X 
console.log(module.findLevel()); // 1 
 
//글로벌에서 level 변수에 접근 불가로 만듦
 
 

 

//글로벌에서 level 변수에 접근 불가로 만듬

 

 즉시 호출 실행 함수(IIFE) 다른말로 모듈패턴

 

 

글로벌 변수 선언 자제하는  이유
=>누구나 접근 가능 
같이쓰는곳 => 글로벌 => 공유하는곳  
ex) 제이쿼리 리액트 모두 사용 
상황판단후 사용 

 

---

 

2. Singletons

하나의 객체 만들어지도록 제한

필요 상황에따라 하나만 만들게 제한둬야 할때

​

---

 

3. Mixin
공통적으로 들어가는것​ 
어떤 기능을 공유하여 사용 
코드 재사용 패턴 
​ 
코드재사용성 패턴 => 프로토타입, 함수​ 
힘수 이용하는것과 똑같음 
​ 
ex) 3개의 객체에 같은 기능이 있다 
=> 새 함수 만들어서 객체 인자로받고 
=> 같은 기능 추가 해주기  
​ 
장점 
코드 재사용
제약 X
// 제약  =>this ,new, 프로토타입 체인 생각해야함 
심플, 유연 ,우아
쓰기편함

 

---

 

PubSub 

publsh 발행 , & subscribe 구독
모듈을 다른 모듈에서 사용
중간 매개체 역할
​
종류
coupling =>붙어있음
decoupling => 안붙었다
loosely coupled => 느슨하게 붙어있다
tight coupled => 타이트하게 붙어있다.
​
OOP
tight 안된다
각자 본인 임무만 실행 해야함
하나만 독립적으로 사용할 수 있어야 함
​
SOLID
- SRP( Single Responsibility Principle ), 단일 책임
객체는 단 하나만의 책임을 가진다
잘못된것 ex) 계산기 객체에 알람 추가
이유 : 시스템 변화에도 영향 최소화

본인이 하는일에 집중해서 기능 완성
단일책임, 커플링 생각 하기
​
coupling 해결 방법 => 펍섭
나 - 신문사 - 컬럼리스트  비유
// 나 => 신문사에게 내 정보전달
// 신문사가 나에게 신문발송
// 컬럼리스트와의 조율은 신문사가 함
​
PubSub패턴 이해
coupling => decoupling 해주기
매게체 역할 
소통 가능 , 거리 띄어놓음
// 여전히 소통 가능 하지만 거리를 띄어놓는다.
​
ex) addEventListener 펍섭과 비슷
이런일이 생기면 알려달라 => 구독 신청
DOM 이 알아서 호출 => 신문 배달
​
ex) 한가지 주제 많은 사람 구독
5만명 구독자가 신청 =>
// 개별 사람이 한번 구독 해놓으면
매주 정보 발송 ​
//구독 최소 전까진
​
패턴이 이런것이지 코드 디테일은 상황에 따라 다름
​
펍섭 프로그래밍은 다른곳에서도 많이 이용 됨
// 자바 스크립트 라이브러리는 허다하게 사용 됨
​
커플링, 디커플링 판단 방법
1, 2 있을때 1에 대한것이 2에 심어져 있음
​
​

---