의 흔 한 디자인 모델

디자인 모델 을 배 우 는 과정 은 바로 경험 을 쌓 는 과정 이다. 배 운 후에 안의 코드 는 구체 적 인 업무 에서 전혀 사용 되 지 않 을 수 있 지만 그들 은 당신 이 문 제 를 만 났 을 때 영감 적 인 방향 을 제공 하여 문 제 를 잘 해결 하도록 도와 줄 수 있다.
몇 가지 상용 디자인 모델
단일 모드: 하나의 인 스 턴 스 만 있 고 전체 방문 점 을 제공 합 니 다.
응용 장면: 일부 구성 요소 나 방법 이 우리 에 게 하나만 필요 할 때, 예 를 들 어 로그 인 단 추 를 누 르 면 로그 인 창 이 뜨 고, 이 로그 인 창 은 유일한 것 입 니 다. 로그 인 단 추 를 몇 번 눌 러 도 이 부 창 은 한 번 만 만들어 집 니 다. 그러면 이 부 창 은 단일 모드 로 만 들 기 에 적합 합 니 다.
실현: 현재 클래스 에 대상 을 만 들 었 는 지 여 부 를 변수 로 표시 합 니 다. 만약 그렇다면 다음 에 이 클래스 의 인 스 턴 스 를 가 져 올 때 이전에 만 든 대상 을 직접 되 돌려 줍 니 다.

var Singleton=function(){
     this.name=name;
     this.instance=null;
}
Singleton.getInstance=function(){
    if(!this.instance){//    
      this.instance=new Singleton(name)
    }
    return this.instance;
}

전략 모드: 같은 기능 을 실현 하기 위해 일련의 알고리즘 을 정의 하고 그들 을 전략 류 내부 방법 에 하나씩 밀봉 하여 필요 에 따라 전략 류 중의 하 나 를 호출 하여 계산 합 니 다.
응용 장면: 연말 상여금 계산 을 예 로 들 면 연말 상여금 은 직원 의 급여 기수 와 연말 실적 에 따라 지급 된다. 예 를 들 어 실적 이 S 인 사람 은 연말 상여금 이 4 배, A 는 3 배, B 는 2 배 에 달한다.

var strategies={//    （ ）
  "S":function(salary){//            
        return salary*4;
  },
  "A":function(salary){
      return salary*3;
  },
  "B":function(salary){
      return salary*2;
  }
}
var calculateBonus=function(level,salary){
      return strategies[level](salary);
}
console.log(calculateBonus('S',20000)); //  ：80000

게시 - 구독 모드 (관찰자 모드 라 고도 함): 대상 간 의 다 중 의존 관 계 를 정의 합 니 다. 대상 의 상태 가 바 뀌 면 모든 의존 대상 에 게 알려 집 니 다.
응용 장면: 구독 모드 는 비동기 프로 그래 밍 (예 를 들 어 응답 식 프로 그래 밍 라 이브 러 리 Rxjs) 예제 에 광범 위 하 게 사 용 됩 니 다.

//   
class Subject {
    constructor() {
        this.observerCollection = [];
    }
    addObserver(observer) { //      
        this.observerCollection.push(observer);
    }
    
    deleteObserver(observer) { //      
        let index = this.observerCollection.indexOf(observer);
        if(index >= 0) this.observerCollection.splice(index, 1);
    }
    
    notifyObservers() { //      
        this.observerCollection.forEach((observer)=>observer.notify());
    }
}
//   
class Observer {
    constructor(name) {
        this.name = name;
    }
    
    notify() {
        console.log(`${this.name} has been notified.`);
    }
}
//  
let subject = new Subject(); //       

let observer1 = new Observer('semlinker'); //      A - 'semlinker'
let observer2 = new Observer('lolo'); //      B - 'lolo'

subject.addObserver(observer1); //      A
subject.addObserver(observer2); //      B
 
subject.notifyObservers(); //      

subject.deleteObserver(observer1); //      A

명령 모드:
명령 모드 는 가장 간단 하고 우아 한 모드 중 하나 입 니 다. 명령 모드 의 명령 (command) 은 특정한 일 을 수행 하 는 명령 (또는 방법) 응용 장면 을 말 합 니 다. 어떤 대상 에 게 요청 을 보 내야 할 때 도 있 지만 요청 한 수신 자가 누구 인지, 요청 한 동작 이 무엇 인지 모 릅 니 다.이 때 요청 한 발송 자 와 수신 자가 서로의 결합 관 계 를 없 앨 수 있 도록 느슨 한 결합 방식 으로 프로그램 을 설계 하고 자 합 니 다.

    var setCommand=function(func){//     
        func()
    }
    var MenuBar={//      
        refresh:function(){
            console.log('    ');
        }
    }
    var RefreshMenuBarCommand=function(receiver){
        return function(){
            receiver.refresh();
        }
    }
    var refreshMenuBarCommand=RefreshMenuBarCommand(MenuBar);
    setCommand(refreshMenuBarCommand);//    

조합 모드: 일련의 잎 대상 으로 큰 조합 대상 을 구축 하고 사용 자 는 조합 대상 의 방법 만 실행 하면 모든 잎 대상 의 방법 을 순서대로 집행 할 수 있다.
예시:

/*
*   
*             
*/
    //     
var closeDoorCommand={
    execute:function(){
        console.log('  ');
    }
}
var openPcCommand={
    execute:function(){
        console.log('   ');
    }
}
var loginQQCommand={
    execute:function(){
        console.log('  qq');
    }
}
var MarcoCommand=function(){
    return {
        commandList:[],
        add:function(command){
            this.commandList.push(command);
        },
        execute:function(){
            this.commandList.forEach(function(command){
                command.execute();
            })
        }
    }
}
var marcoCommand=MarcoCommand();//    
marcoCommand.add(closeDoorCommand);
marcoCommand.add(openPcCommand);
marcoCommand.add(loginQQCommand);

marcoCommand.execute();//                   qq

주의: 1. 조합 모델 중의 조합 대상 과 잎 대상 은 부자 관계 가 아니 라 집합 관계 이다.(HAS - A) 2. 대 엽 대상 의 조작 은 일치 해 야 합 니 다. 만약 에 회사 전체 직원 이 하나의 조합 대상 을 구성한다 고 가정 하면 회사 설날 에 전체 직원 에 게 명절 비용 1000 위안 을 지불해 야 합 니 다. 이 장면 은 조합 모델 을 사용 할 수 있 지만 회사 가 오늘 생일 을 보 낸 직원 에 게 생일 축하 메 일 을 보 내 면 조합 모델 은 사용자 의 땅 이 없습니다.