JavaScript
행동 디자인 패턴

옵저버 패턴

Observer 패턴은 이벤트 처리 및 위임에 사용됩니다. 피사체 는 옵서버 컬렉션을 유지 관리합니다 . 그런 다음 피사체는 이벤트가 발생할 때마다 이러한 관찰자에게 알립니다. addEventListener 를 사용한 적이 있다면 Observer 패턴을 활용했습니다.

function Subject() {
    this.observers = []; // Observers listening to the subject
    
    this.registerObserver = function(observer) {
        // Add an observer if it isn't already being tracked
        if (this.observers.indexOf(observer) === -1) {
            this.observers.push(observer);
        }
    };

    this.unregisterObserver = function(observer) {
        // Removes a previously registered observer
        var index = this.observers.indexOf(observer);
        if (index > -1) {
            this.observers.splice(index, 1);
        }
    };

    this.notifyObservers = function(message) {
        // Send a message to all observers
        this.observers.forEach(function(observer) {
            observer.notify(message);
        });
    };
}

function Observer() {
    this.notify = function(message) {
        // Every observer must implement this function
    };
}

사용 예 :

function Employee(name) {
    this.name = name;

    // Implement `notify` so the subject can pass us messages
    this.notify = function(meetingTime) {
        console.log(this.name + ': There is a meeting at ' + meetingTime);
    };
}

var bob = new Employee('Bob');
var jane = new Employee('Jane');
var meetingAlerts = new Subject();
meetingAlerts.registerObserver(bob);
meetingAlerts.registerObserver(jane);
meetingAlerts.notifyObservers('4pm');

// Output:
// Bob: There is a meeting at 4pm
// Jane: There is a meeting at 4pm

중재자 패턴

중재자 패턴을 공중의 비행기를 제어하는 ​​비행 제어 타워라고 생각하십시오.이 비행기를 지금 착륙시키고, 두 번째는 대기시키고, 세 번째는 이륙하는 등의 지시를 내립니다. 그러나 어떤 비행기도 동료와 이야기 할 수 없습니다 .

이것은 조정자가 작동하는 방식이며, 서로 다른 모듈 간의 통신 허브로 작동합니다. 이렇게하면 모듈 의존성을 줄이고 커플 링이 느슨해지며 결과적으로 이식성이 향상됩니다.

이 대화방 예제 는 조정자 패턴이 작동하는 방법을 설명합니다.

// each participant is just a module that wants to talk to other modules(other participants)
var Participant = function(name) {
    this.name = name;
    this.chatroom = null;
};
 // each participant has method for talking, and also listening to other participants
Participant.prototype = {
    send: function(message, to) {
        this.chatroom.send(message, this, to);
    },
    receive: function(message, from) {
        log.add(from.name + " to " + this.name + ": " + message);
    }
};

 // chatroom is the Mediator: it is the hub where participants send messages to, and receive messages from
var Chatroom = function() {
    var participants = {};
 
    return {
 
        register: function(participant) {
            participants[participant.name] = participant;
            participant.chatroom = this;
        },
 
        send: function(message, from) {
            for (key in participants) {   
                if (participants[key] !== from) {//you cant message yourself !
                    participants[key].receive(message, from);
                }
            }
        }

    };
};
 
// log helper
 
var log = (function() {
    var log = "";
 
    return {
        add: function(msg) { log += msg + "\n"; },
        show: function() { alert(log); log = ""; }
    }
})();
 
function run() {
    var yoko = new Participant("Yoko");
    var john = new Participant("John");
    var paul = new Participant("Paul");
    var ringo = new Participant("Ringo");
 
    var chatroom = new Chatroom();
    chatroom.register(yoko);
    chatroom.register(john);
    chatroom.register(paul);
    chatroom.register(ringo);
 
    yoko.send("All you need is love.");
    yoko.send("I love you John.");        
    paul.send("Ha, I heard that!");
 
    log.show();
}

명령

명령 패턴은 매개 변수를 메소드, 현재 객체 상태 및 호출 할 메소드에 캡슐화합니다. 나중에 메서드를 호출하는 데 필요한 모든 것을 분류하는 것이 유용합니다. "명령"을 발행하고 나중에 명령을 실행하는 데 사용할 코드를 결정하는 데 사용할 수 있습니다.

이 패턴에는 세 가지 구성 요소가 있습니다.

1. 명령 메시지 - 메서드 이름, 매개 변수 및 상태를 포함하는 명령 자체
2. 호출자 (Invoker) - 명령에 명령을 실행하도록 지시하는 부분입니다. 시간 초과 이벤트, 사용자 상호 작용, 프로세스의 단계, 콜백 또는 명령을 실행하는 데 필요한 모든 방법이 될 수 있습니다.
3. Reciever - 명령 실행의 대상입니다.

배열로 명령 메시지 보내기

var aCommand = new Array();
aCommand.push(new Instructions().DoThis);  //Method to execute
aCommand.push("String Argument");  //string argument
aCommand.push(777);                //integer argument
aCommand.push(new Object {} );     //object argument
aCommand.push(new Array() );       //array argument

커멘드 클래스의 생성자

class DoThis {
    constructor( stringArg, numArg, objectArg, arrayArg ) {
        this._stringArg = stringArg;
        this._numArg = numArg;
        this._objectArg = objectArg;
        this._arrayArg = arrayArg;
    }
    Execute() {
       var receiver = new Instructions();
       receiver.DoThis(this._stringArg, this._numArg, this._objectArg, this._arrayArg );
    }
}     

호출자

aCommand.Execute();  

호출 가능 :

• 바로
• 사건에 대한 응답으로
• 실행 순서대로
• 콜백 응답 또는 약속으로
• 이벤트 루프의 끝에서
• 메소드를 호출하는 데 필요한 다른 방법으로

리시버

class Instructions {
    DoThis( stringArg, numArg, objectArg, arrayArg ) {
        console.log( `${stringArg}, ${numArg}, ${objectArg}, ${arrayArg}` );
    }
}

클라이언트는 명령을 생성하여 즉시 실행하거나 명령을 지연시키는 호출자에게 전달합니다. 그러면 명령이 수신기에서 작동합니다. 명령 패턴은 컴패니언 패턴과 함께 사용하여 메시징 패턴을 작성할 때 매우 유용합니다.

반복자

반복자 패턴은 컬렉션의 다음 항목을 순차적으로 선택하는 간단한 방법을 제공합니다.

고정 콜렉션

class BeverageForPizza {
    constructor(preferenceRank) {
        this.beverageList = beverageList;
        this.pointer = 0;
    }
    next() {
        return this.beverageList[this.pointer++];
    }

var withPepperoni = new BeverageForPizza(["Cola", "Water", "Beer"]);
withPepperoni.next(); //Cola
withPepperoni.next(); //Water
withPepperoni.next(); //Beer

ECMAScript 2015 iterators는 done과 value를 반환하는 메소드로서 내장되어 있습니다. iterator가 콜렉션의 끝에있을 때 done이 참이된다.

function preferredBeverage(beverage){
    if( beverage == "Beer" ){
        return true;
    } else {
        return false;
    }
}
var withPepperoni = new BeverageForPizza(["Cola", "Water", "Beer", "Orange Juice"]);
for( var bevToOrder of withPepperoni ){
    if( preferredBeverage( bevToOrder ) {
        bevToOrder.done; //false, because "Beer" isn't the final collection item
        return bevToOrder; //"Beer"
    }
}

발전기로서

class FibonacciIterator {
    constructor() {
        this.previous = 1;
        this.beforePrevious = 1;
    }
    next() {
        var current = this.previous + this.beforePrevious;
        this.beforePrevious = this.previous;
        this.previous = current;
        return current;
    }
}

var fib = new FibonacciIterator();
fib.next(); //2
fib.next(); //3
fib.next(); //5

ECMAScript 2015에서

function* FibonacciGenerator() {  //asterisk informs javascript of generator 
    var previous = 1;
    var beforePrevious = 1;
    while(true) {
        var current = previous + beforePrevious;
        beforePrevious = previous;
        previous = current;
        yield current;  //This is like return but 
                        //keeps the current state of the function
                        // i.e it remembers its place between calls
    }
}

var fib = FibonacciGenerator();
fib.next().value; //2
fib.next().value; //3
fib.next().value; //5
fib.next().done; //false