JavaScript
क्रिएशनल डिज़ाइन पैटर्न

परिचय

टिप्पणियों

सिंगलटन पैटर्न

सिंगलटन पैटर्न एक डिज़ाइन पैटर्न है जो किसी कक्षा को एक वस्तु के लिए तत्काल रोक देता है। पहली वस्तु बनाए जाने के बाद, यह उसी के संदर्भ को वापस लौटा देगा जब भी किसी वस्तु को बुलाया जाएगा।

var Singleton = (function () {
        // instance stores a reference to the Singleton
        var instance;
    
        function createInstance() {
            // private variables and methods
            var _privateVariable = 'I am a private variable';
            function _privateMethod() {
                console.log('I am a private method');
            }

            return {
                // public methods and variables
                publicMethod: function() {
                    console.log('I am a public method');
                },
                publicVariable: 'I am a public variable'
            };
        }
         
        return {
            // Get the Singleton instance if it exists
            // or create one if doesn't
            getInstance: function () {
                if (!instance) {
                    instance = createInstance();
                }
                return instance;
            }
        };
    })();

उपयोग:

// there is no existing instance of Singleton, so it will create one
var instance1 = Singleton.getInstance();
// there is an instance of Singleton, so it will return the reference to this one
var instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true

मॉड्यूल और खुलासा मॉड्यूल पैटर्न

मॉड्यूल पैटर्न

मॉड्यूल पैटर्न एक रचनात्मक और संरचनात्मक डिजाइन पैटर्न है जो सार्वजनिक एपीआई का निर्माण करते समय निजी सदस्यों को इनकैप्सुलेट करने का एक तरीका प्रदान करता है। यह एक IIFE बनाकर पूरा किया जाता है, जो हमें किसी वस्तु को वापस करते समय केवल उसके दायरे में उपलब्ध चर ( बंद करने के माध्यम से) को परिभाषित करने की अनुमति देता है, जिसमें सार्वजनिक एपीआई होता है।

यह हमें मुख्य तर्क को छिपाने के लिए एक स्वच्छ समाधान देता है और केवल एक इंटरफ़ेस को उजागर करता है जिसे हम अपने आवेदन के अन्य भागों का उपयोग करने की इच्छा रखते हैं।

var Module = (function(/* pass initialization data if necessary */) {
  // Private data is stored within the closure
  var privateData = 1;

  // Because the function is immediately invoked,
  // the return value becomes the public API
  var api = {
    getPrivateData: function() {
      return privateData;
    },
    
    getDoublePrivateData: function() {
      return api.getPrivateData() * 2;
    }
  };
  return api;
})(/* pass initialization data if necessary */);

मॉड्यूल पैटर्न का खुलासा

रिवाइलिंग मॉड्यूल पैटर्न मॉड्यूल पैटर्न में एक प्रकार है। मुख्य अंतर यह है कि सभी सदस्यों (निजी और सार्वजनिक) को बंद करने के भीतर परिभाषित किया गया है, वापसी मूल्य एक ऑब्जेक्ट शाब्दिक है जिसमें कोई फ़ंक्शन परिभाषाएं नहीं हैं, और सदस्य डेटा के सभी संदर्भ लौटे ऑब्जेक्ट के बजाय प्रत्यक्ष संदर्भ के माध्यम से किए जाते हैं।

var Module = (function(/* pass initialization data if necessary */) {
  // Private data is stored just like before
  var privateData = 1;

  // All functions must be declared outside of the returned object
  var getPrivateData = function() {
    return privateData;
  };

  var getDoublePrivateData = function() {
    // Refer directly to enclosed members rather than through the returned object
    return getPrivateData() * 2;
  };

  // Return an object literal with no function definitions
  return {
    getPrivateData: getPrivateData,
    getDoublePrivateData: getDoublePrivateData
  };
})(/* pass initialization data if necessary */);

प्रोटोटाइप पैटर्न का खुलासा

खुलासा पैटर्न की इस भिन्नता का उपयोग निर्माणकर्ता को विधियों को अलग करने के लिए किया जाता है। यह पैटर्न हमें ऑब्जेक्ट ओरिएंटेड भाषा की तरह जावास्क्रिप्ट भाषा का उपयोग करने की अनुमति देता है:

//Namespace setting
var NavigationNs = NavigationNs || {};

// This is used as a class constructor 
NavigationNs.active = function(current, length) {        
    this.current = current;
    this.length = length;
}

// The prototype is used to separate the construct and the methods    
NavigationNs.active.prototype = function() {
    // It is a example of a public method because is revealed in the return statement
    var setCurrent = function() {
        //Here the variables current and length are used as private class properties  
        for (var i = 0; i < this.length; i++) {                
                $(this.current).addClass('active');                 
        }
    }
    return { setCurrent: setCurrent };
}();

// Example of parameterless constructor  
NavigationNs.pagination = function() {}

NavigationNs.pagination.prototype = function() {
// It is a example of a private method because is not revealed in the return statement
    var reload = function(data) {
        // do something
    },
    // It the only public method, because it the only function referenced in the return statement
     getPage = function(link) {
        var a = $(link);

        var options = {url: a.attr('href'), type: 'get'}
        $.ajax(options).done(function(data) {            
           // after the the ajax call is done, it calls private method
           reload(data);
        });

        return false;
    }
    return {getPage : getPage}
}();

ऊपर दिया गया यह कोड एक अलग फ़ाइल में होना चाहिए .js को किसी भी पेज में संदर्भित किया जाना चाहिए जो आवश्यक हो। इसका उपयोग इस तरह किया जा सकता है:

var menuActive = new NavigationNs.active('ul.sidebar-menu li', 5);
menuActive.setCurrent();

प्रोटोटाइप पैटर्न

प्रोटोटाइप पैटर्न एक ऑब्जेक्ट बनाने पर केंद्रित है जिसे प्रोटोटाइप विरासत के माध्यम से अन्य वस्तुओं के लिए ब्लूप्रिंट के रूप में इस्तेमाल किया जा सकता है। जेएस में प्रोटोटाइप की विरासत के मूल समर्थन के कारण जावास्क्रिप्ट में काम करने के लिए यह पैटर्न स्वाभाविक रूप से आसान है, जिसका अर्थ है कि हमें इस टोपोलॉजी की नकल करने में समय या प्रयास खर्च करने की आवश्यकता नहीं है।

प्रोटोटाइप पर तरीकों का निर्माण

function Welcome(name) {
  this.name = name;
}
Welcome.prototype.sayHello = function() {
  return 'Hello, ' + this.name + '!';
}

var welcome = new Welcome('John');

welcome.sayHello();
// => Hello, John!

प्रोटोटाइप इनहेरिटेंस

निम्नलिखित पैटर्न के माध्यम से 'पैरेंट ऑब्जेक्ट' से इनहेरिट करना अपेक्षाकृत आसान है

ChildObject.prototype = Object.create(ParentObject.prototype);
ChildObject.prototype.constructor = ChildObject;

जहाँ ParentObject वह वस्तु है जिसे आप प्रोटोटाइप किए गए कार्यों से प्राप्त करना चाहते हैं, और ChildObject वह नई वस्तु है जिसे आप उन्हें रखना चाहते हैं।

यदि पैरेंट ऑब्जेक्ट में यह वैल्यूज़ होती है, तो यह कंस्ट्रक्टर में इनिशियलाइज़ हो जाता है, आपको बच्चे को इनिशियलाइज़ करते समय पेरेंट्स कंस्ट्रक्टर को कॉल करने की आवश्यकता होती है।

आप ChildObject कंस्ट्रक्टर में निम्न पैटर्न का उपयोग करते हैं।

function ChildObject(value) {
    ParentObject.call(this, value);
}

एक पूर्ण उदाहरण जहां ऊपर लागू किया गया है

function RoomService(name, order) {
  // this.name will be set and made available on the scope of this function
  Welcome.call(this, name);
  this.order = order;
}

// Inherit 'sayHello()' methods from 'Welcome' prototype
RoomService.prototype = Object.create(Welcome.prototype);

// By default prototype object has 'constructor' property. 
// But as we created new object without this property  -  we have to set it manually,
// otherwise 'constructor' property will point to 'Welcome' class
RoomService.prototype.constructor = RoomService;

RoomService.prototype.announceDelivery = function() {
  return 'Your ' + this.order + ' has arrived!';
}
RoomService.prototype.deliverOrder = function() {
  return this.sayHello() + ' ' + this.announceDelivery();
}

var delivery = new RoomService('John', 'pizza');

delivery.sayHello();
// => Hello, John!,

delivery.announceDelivery();
// Your pizza has arrived!

delivery.deliverOrder();
// => Hello, John! Your pizza has arrived!

फैक्टरी के कार्य

फैक्ट्री फंक्शन बस एक फंक्शन होता है जो किसी ऑब्जेक्ट को लौटाता है।

फ़ैक्ट्री फ़ंक्शंस को new कीवर्ड के उपयोग की आवश्यकता नहीं है, लेकिन फिर भी एक ऑब्जेक्ट को इनिशियलाइज़ करने के लिए इस्तेमाल किया जा सकता है, जैसे एक कंस्ट्रक्टर।

अक्सर, कारखाने के कार्यों को एपीआई रैपर के रूप में उपयोग किया जाता है, जैसे कि jQuery और moment.js के मामलों में, इसलिए उपयोगकर्ताओं को new का उपयोग करने की आवश्यकता नहीं है।

फैक्ट्री फ़ंक्शन का सबसे सरल रूप निम्नलिखित है; तर्क लेना और उनका उपयोग वस्तु शाब्दिक के साथ एक नई वस्तु को तैयार करना है:

function cowFactory(name) {
    return {
        name: name,
        talk: function () {
            console.log('Moo, my name is ' + this.name);
        },
    };
}

var daisy = cowFactory('Daisy');  // create a cow named Daisy
daisy.talk();  // "Moo, my name is Daisy"

किसी फैक्ट्री में निजी संपत्तियों और तरीकों को परिभाषित करना आसान है, उन्हें लौटाए गए ऑब्जेक्ट के बाहर शामिल करना। यह आपके कार्यान्वयन के विवरण को गुप्त रखता है, इसलिए आप केवल सार्वजनिक इंटरफ़ेस को ही अपनी वस्तु में उजागर कर सकते हैं।

function cowFactory(name) {
    function formalName() {
        return name + ' the cow';
    }

    return {
        talk: function () {
            console.log('Moo, my name is ' + formalName());
        },
    };
}

var daisy = cowFactory('Daisy');
daisy.talk();  // "Moo, my name is Daisy the cow"
daisy.formalName();  // ERROR: daisy.formalName is not a function

अंतिम पंक्ति एक त्रुटि देगी क्योंकि फ़ंक्शन formalName cowFactory फ़ंक्शन के अंदर बंद है। यह एक क्लोजर है ।

फैक्टर भी जावास्क्रिप्ट में कार्यात्मक प्रोग्रामिंग प्रथाओं को लागू करने का एक शानदार तरीका है, क्योंकि वे कार्य हैं।

रचना के साथ फैक्टरी

Pre विरासत पर अधिक ध्यान देना ’ एक महत्वपूर्ण और लोकप्रिय प्रोग्रामिंग सिद्धांत है, जिसका उपयोग वस्तुओं को व्यवहार सौंपने के लिए किया जाता है, जैसा कि कई बार अनावश्यक व्यवहारों को विरासत में देने के विपरीत होता है।

व्यवहार कारखानों

var speaker = function (state) {
    var noise = state.noise || 'grunt';

    return {
        speak: function () {
            console.log(state.name + ' says ' + noise);
        }
    };
};

var mover = function (state) {
    return {
        moveSlowly: function () {
            console.log(state.name + ' is moving slowly');
        },
        moveQuickly: function () {
            console.log(state.name + ' is moving quickly');
        }
    };
};

वस्तु कारखाने

var person = function (name, age) {
    var state = {
        name: name,
        age: age,
        noise: 'Hello'
    };

    return Object.assign(     // Merge our 'behaviour' objects
        {},
        speaker(state),
        mover(state)
    );
};

var rabbit = function (name, colour) {
    var state = {
        name: name,
        colour: colour
    };

    return Object.assign(
        {},
        mover(state)
    );
};

प्रयोग

var fred = person('Fred', 42);
fred.speak();        // outputs: Fred says Hello
fred.moveSlowly();   // outputs: Fred is moving slowly

var snowy = rabbit('Snowy', 'white');
snowy.moveSlowly();  // outputs: Snowy is moving slowly
snowy.moveQuickly(); // outputs: Snowy is moving quickly
snowy.speak();       // ERROR: snowy.speak is not a function

सार फैक्टरी पैटर्न

एब्सट्रैक्ट फ़ैक्टरी पैटर्न एक रचनात्मक डिज़ाइन पैटर्न है जिसका उपयोग विशिष्ट वस्तुओं या वर्गों को परिभाषित करने के लिए किया जा सकता है, बिना बनाए गए सटीक ऑब्जेक्ट को निर्दिष्ट करने के लिए।

function Car() { this.name = "Car"; this.wheels = 4; }
function Truck() { this.name = "Truck"; this.wheels = 6; }
function Bike() { this.name = "Bike"; this.wheels = 2; }

const vehicleFactory = {
    createVehicle: function (type) {
        switch (type.toLowerCase()) {
            case "car":
                return new Car();
            case "truck":
                return new Truck();
            case "bike":
                return new Bike();
            default:
                return null;
        }
    }
};

const car = vehicleFactory.createVehicle("Car"); // Car { name: "Car", wheels: 4 }  
const truck = vehicleFactory.createVehicle("Truck"); // Truck { name: "Truck", wheels: 6 }  
const bike = vehicleFactory.createVehicle("Bike"); // Bike { name: "Bike", wheels: 2 }  
const unknown = vehicleFactory.createVehicle("Boat"); // null ( Vehicle not known )