JavaScript
Zachowawcze wzorce projektowe

Wzór obserwatora

Wzorzec obserwatora służy do obsługi zdarzeń i delegowania. Podmiot utrzymuje kolekcję obserwatorów. Następnie podmiot powiadamia tych obserwatorów za każdym razem, gdy nastąpi zdarzenie. Jeśli kiedykolwiek addEventListener to użyłeś wzorca 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
    };
}

Przykładowe użycie:

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

Wzór Pośrednika

Pomyśl o wzorcu mediatora jako o wieży kontroli lotów, która kontroluje samoloty w powietrzu: kieruje tym samolotem do lądowania teraz, drugim do oczekiwania, a trzecim do startu itp. Jednak żaden samolot nigdy nie może rozmawiać z rówieśnikami .

Tak działa mediator, działa jako koncentrator komunikacyjny między różnymi modułami, w ten sposób zmniejszasz zależność modułów od siebie, zwiększasz luźne połączenie, aw konsekwencji przenośność.

W tym przykładzie pokoju rozmów wyjaśniono, jak działają wzorce mediatora:

// 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();
}

Komenda

Wzorzec poleceń obudowuje parametry do metody, bieżącego stanu obiektu i metody, którą należy wywołać. Przydatne jest podzielenie na przedziały wszystkiego, co jest potrzebne do wywołania metody w późniejszym czasie. Można go użyć do wydania „polecenia” i później zdecydować, którego fragmentu kodu użyć do wykonania polecenia.

Ten wzorzec składa się z trzech elementów:

1. Komunikat polecenia - samo polecenie, w tym nazwa metody, parametry i stan
2. Invoker - część, która nakazuje komendzie wykonanie instrukcji. Może to być zdarzenie czasowe, interakcja użytkownika, krok w procesie, wywołanie zwrotne lub dowolny inny sposób potrzebny do wykonania polecenia.
3. Odbiornik - cel wykonywania polecenia.

Komunikat polecenia jako tablica

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

Konstruktor dla klasy poleceń

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 );
    }
}     

Invoker

aCommand.Execute();  

Może wywoływać:

• natychmiast
• w odpowiedzi na zdarzenie
• w sekwencji wykonania
• jako odpowiedź zwrotna lub w obietnicy
• na końcu pętli zdarzeń
• w jakikolwiek inny potrzebny sposób, aby wywołać metodę

Odbiorca

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

Klient generuje polecenie, przekazuje je wywołującemu, który wykonuje je natychmiast lub opóźnia polecenie, a następnie polecenie działa na odbiornik. Wzorzec poleceń jest bardzo przydatny, gdy jest używany ze wzorami towarzyszącymi do tworzenia wzorców przesyłania komunikatów.

Iterator

Wzorzec iteratora zapewnia prostą metodę sekwencyjnego wybierania następnego elementu w kolekcji.

Naprawiono kolekcję

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

W ECMAScript 2015 iteratory są wbudowane jako metoda zwracająca wykonane i wartość. Wykonane jest prawdziwe, gdy iterator znajduje się na końcu kolekcji

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"
    }
}

Jako generator

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

W 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