Creational Design Patterns in Javascript

abs_factory_create.js

(function (win, $) {
    ...
    ...
    var NumberplateFactory = function () {
        // To manage which number plate needs to be created.
        this.types = {};
        this.create = function(type){
            return new this.types[type]().create();
        };

        this.register = function (type, cls) {
            if(cls.prototype.create){
                this.types[type] = cls;
            }
        }

    };
    ...

    })();
    ...
})(window, jQuery);

abs_factory_register.js

(function(win, $){
  ...
  
  KarnatakaNumberplate.prototype.create = function () {
    this.item = 'KA ' + Math.floor(Math.random() * 100) + ' B ';
    return this.item;
  };
  
   var NumberplateFactory = function () {
        // To manage which number plate needs to be created.
        this.types = {};
        
        this.register = function (type, cls) {
            if(cls.prototype.create){
                this.types[type] = cls;
            }
        }

    };
  ...
  ...
})(window, jQuery);

abs_factory_regsiter_class.js

(function (win, $) {

   ...
   ...
    var CounterGeneratorSingleton = (function () {

        var instance;

        function init() {

            var _counter = 0,
                _nf = new NumberplateFactory();

            _nf.register('Delhi', DelhiNumberplate),
            _nf.register('Karnataka', KarnatakaNumberplate);
           ...
           ...
        }

    })();

    ...
})(window, jQuery);

abstract_factory_const.js

(function(win, $){
  
    function DelhiNumberplate() {

    }

    DelhiNumberplate.prototype.create = function () {
        this.item = 'DL ';
        return this.item;
    };

    function KarnatakaNumberplate() {

    }

    KarnatakaNumberplate.prototype.create = function () {
        this.item = 'KA ' + Math.floor(Math.random() * 100) + ' B ';
        return this.item;
    };
  
    var NumberplateFactory = function () {
      // To manage which number plate needs to be created.
      this.create = function(state){  
  ...
  ...
})(window, jQuery);

factory_design_pattern_constructor.js

(function(win, $){
	
  var DelhiNumberplate = function () {
    this.item = 'DL ';
  };

  var KarnatakaNumberplate = function () {
    this.item = 'KA ' + Math.floor(Math.random() * 100) + ' B ';
  };
  
  var CounterGeneratorSingleton = (function () {
		// Local reference to instance
		var instance;
		...
    		...
	})();
	
  ...
  ...
})(window, jQuery);

factory_dp_factory.js

(function(win, $){
  ...
  
  var KarnatakaNumberplate = function () {
    this.item = 'KA ' + Math.floor(Math.random() * 100) + ' B ';
  };
  
  var NumberplateFactory = function () {
    // To manage which number plate needs to be created.
    this.create = function(state){
      if (state === "Delhi"){
        return new DelhiNumberplate();
      } else {
        return new KarnatakaNumberplate();
      }
    }
  };
  ...
  ...
})(window, jQuery);

factory_dp_implementation.js

(function(win, $) {
	var CounterGeneratorSingleton = (function() {
		...

		function init() {
			var _counter = 0,
				_nf = new NumberplateFactory();

			...
			...

			function decrement() {
				_counter -= 1;
				_log();
			}


			function createPlate(state) {
				var plate = _nf.create(state).item + _counter;
				console.log(plate);
			}

			// Public API, methods/properties that we want to reveal of the instance 
			return {
				increment: increment,
				decrement: decrement,
				createPlate: createPlate
			}
		}
    }

    ...
    ...
    ...
})(window, jQuery);

factory_events.js

(function(win, $) {
    var CounterGeneratorSingleton = (function() {
        // Local reference to instance
        var instance;
        ...
        ...
    })();

    $(win.document).ready(function() {
        $('.canvas').click(function(e) {
            var counterGen = CounterGeneratorSingleton.getInstance();
            counterGen.increment();
            counterGen.createPlate('Delhi');
        });

        $(document).keypress(function(e) {
            var counterGen = CounterGeneratorSingleton.getInstance();
            if (e.key == 'n') {
                counterGen.increment();
                counterGen.createPlate('Delhi');
            } else {
                counterGen.decrement();
                counterGen.createPlate('Karnataka');
            }
        });
    });
})(window, jQuery);

factory_output.txt

1
DL 1
0
KA 74 B 0

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>The Sigleton Design Pattern</title>
	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
	<script src="js/singleton_pattern.js"></script>
	<style>
		.main .canvas{  height:200px;  background:#454e5c;  padding-top:50px;  }
	</style>
</head>
<body>
<div class="main">
	<h1>The Singleton Design Pattern</h1>
	<div class="canvas">

	</div>
</div>
</body>
</html>

script.js

(function(win, $){
	$(win.document).ready(function(){
		var counter = 0;
		$('.canvas').click(function (e) {
			counter ++;
			console.log(counter);
		})
	});
})(window, jQuery);

signleton_getinstance.js

(function(win, $){
	var CounterGeneratorSingleton = (function () {
		// Local reference to instance
		var instance;
		// Function that will initiate the object
		function init() {
			// Public API, methods/properties that we want to reveal of the instance 
			return {
			}
		}

		// Public method to generate and return instance
		return {
      			getInstance: function () {
				if (!instance){
					instance = init();
				}

				return instance;
      			}
		}
	})();
  ...
  ...
  ...
})(window, jQuery);

singleton_boilerplate.js

(function(win, $){
	var CounterGeneratorSingleton = (function () {
		// Local reference to instance
		var instance;
		// Function that will initiate the object
		function init() {
			// Public API, methods/properties that we want to reveal of the instance 
			return {
			}
		}

		// Public method to generate and return instance
		return {
		}
	})();
	
 	$(win.document).ready(function(){
		var counter = 0;
		$('.canvas').click(function (e) {
			counter ++;
			console.log(counter);
		})
	});
})(window, jQuery);

singleton_init.js

(function(win, $){
	var CounterGeneratorSingleton = (function () {
		// Local reference to instance
		var instance;
		// Function that will initiate the object
		function init() {
      			var _counter = 0;

			function _log(){
				console.log(_counter);
			}

			function increment(){
				_counter += 1;
        			_log();
			}

			function  decrement() {
				_counter -= 1;
        			_log();
      			}
      			// Public API, methods/properties that we want to reveal of the instance 
			return {
        			increment:increment,
         			decrement:decrement
			} 
		}
    
  ...
  ...
  ...
})(window, jQuery);

singleton_keypress.js

(function(win, $){
	var CounterGeneratorSingleton = (function () {
		// Local reference to instance
		var instance;
		...
    		...
	})();
	
 	$(win.document).ready(function(){
		$('.canvas').click(function (e) {
			var counterGen = CounterGeneratorSingleton.getInstance();
			counterGen.increment();
		});
    
		$(document).keypress(function (e) {
		      	var counterGen = CounterGeneratorSingleton.getInstance();
			if (e.key == 'n'){
				counterGen.increment();
			} else {
				counterGen.decrement();
			}
		});
	});
})(window, jQuery);

singleton_onclick.js

(function(win, $){
	var CounterGeneratorSingleton = (function () {
		// Local reference to instance
		var instance;
		...
    		...
	})();
	
 	$(win.document).ready(function(){
		$('.canvas').click(function (e) {
			var counterGen = CounterGeneratorSingleton.getInstance();
			counterGen.increment();
		})
	});
})(window, jQuery);