JavaScript
व्यवहार डिजाइन पैटर्न

ऑब्जर्वर पैटर्न

ऑब्जर्वर हैंडलिंग और डेलिगेशन के लिए ऑब्जर्वर पैटर्न का उपयोग किया जाता है। एक विषय पर्यवेक्षकों के संग्रह को बनाए रखता है । जब भी कोई घटना घटती है तो विषय इन पर्यवेक्षकों को सूचित करता है। यदि आपने कभी addEventListener का उपयोग किया है तो आपने ऑब्जर्वर पैटर्न का उपयोग किया है।

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. प्राप्तकर्ता - कमांड निष्पादन का लक्ष्य।

एक संदेश के रूप में कमान संदेश

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

invoker

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 में पुनरावृत्तियां एक अंतर्निर्मित विधि के रूप में होती हैं जो कि किया हुआ और मान लौटाता है। जब संग्रह के अंत में पुनरावृत्ति होती है तो यह सही है

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