madzak · December 16, 2015 13:59
diff --git a/facade_pattern.html b/facade_pattern.html
 <html>
    <head>
        <title>Facade Pattern</title>
    </head>
    <body>
        <h1>Facade Pattern Example</h1>

        <script type="text/javascript">
          !function (window, document) {
            var module = window.module = {},
                i = 5;

            module.get = function() {
              document.write('<h2>current value:' + i + "</h2>");
            };

            module.set = function(val) {
              i = val;
            };

            module.run = function() {
              document.write('<h3 style="color:blue">running</h3>');
            };

            module.jump = function() {
              document.write('<h4>jumping</h4>');
            };
          }(window, document);

          !function(window, module) {
            var facade = window.facade = {};

            facade.module = module;

            facade.setVal = function(val) {
              module.set(val);
              module.get();
            };

            facade.runAndJump = function() {
              module.run();
              module.jump();
            };
          }(window, module);

          facade.setVal(10);
          facade.runAndJump();

          facade.module.run();
        </script>
    </body>
 </html>
diff --git a/mediator_pattern.html b/mediator_pattern.html
 <html>
    <head>
        <title>Mediator Pattern</title>
    </head>
    <body>
        <h1>Mediator Pattern Example</h1>

        <script type="text/javascript">
          !function() {
            var mediator = window.mediator = {},
                channels = [];

            mediator.subscribe = function(channel, func) {
              if (!channels[channel]) {
                channels[channel] = [];
              }
              
              channels[channel].push({ context: this, callback: func });
              return this;
            };

            mediator.publish = function(channel) {
              if(!channels[channel]) {
                return false;
              }

              var args = Array.prototype.slice.call(arguments, 1);
              for (var i=0,l=channels[channel].length; i<l; i=i+1) {
                var subscription = channels[channel][i];
                subscription.callback.apply(subscription.context, args);
              }
              return this;
            };

            mediator.installTo = function(obj) {
              obj.subscribe = this.subscribe;
              obj.publish = this.publish;
            }
          }();
          
          //Pub/sub on a centralized mediator
          mediator.name = "tim"
          mediator.subscribe('nameChange', function(arg) {
              document.write("<h2>Centralized Mediator</h2>");
              document.write("<p>Old name: " + this.name + "</p>");
              this.name = arg;
              document.write("<p>New name: " + this.name + "</p>");
          });

          mediator.publish('nameChange', 'david'); //tim, david

          //Pub/sub via third party mediator
          var obj = { name: 'sam' };
            
          mediator.installTo(obj);
          obj.subscribe('nameChange', function(arg) {
              document.write("<h3>Third Party Mediator</h3>");
              document.write("<p>Old name: " + this.name + "</p>");
              this.name = arg;
              document.write("<p>New name: " + this.name + "</p>");
          });

          obj.publish('nameChange', 'john'); //sam, john
        </script>
    </body>
 </html>
diff --git a/module_pattern.html b/module_pattern.html
 <html>
    <head>
        <title>Module Pattern</title>
    </head>
    <body>
        <h1>Module Pattern Example</h1>

        <script type="text/javascript">
          !function() {
                var basketModule = window.basketModule = {},
                    basket = [];

                basketModule.addItem = function(values) {
                    basket.push(values);
                };

                basketModule.getItemCount = function() {
                    return basket.length;
                };

                basketModule.getTotal = function() {
                    var index = this.getItemCount(),
                        total = 0;

                    while(index--) {
                        total = total + basket[index].price;
                    }

                    return total;
                };

            }();

            basketModule.addItem({item:'bread', price:2.5});
            basketModule.addItem({item:'butter', price:1.3});

            document.write("<h2>Item Count: " + basketModule.getItemCount() + "</h2>");
            document.write("<h3>Total: " + basketModule.getTotal() + "</h3>");

            document.write("<p>basketModule.basket: " + basketModule.basket + "</p>");
        </script>
    </body>
 </html>
	<html>
	<head>
	<title>Facade Pattern</title>
	</head>
	<body>
	<h1>Facade Pattern Example</h1>

	<script type="text/javascript">
	!function (window, document) {
	var module = window.module = {},
	i = 5;

	module.get = function() {
	document.write('<h2>current value:' + i + "</h2>");
	};

	module.set = function(val) {
	i = val;
	};

	module.run = function() {
	document.write('<h3 style="color:blue">running</h3>');
	};

	module.jump = function() {
	document.write('<h4>jumping</h4>');
	};
	}(window, document);

	!function(window, module) {
	var facade = window.facade = {};

	facade.module = module;

	facade.setVal = function(val) {
	module.set(val);
	module.get();
	};

	facade.runAndJump = function() {
	module.run();
	module.jump();
	};
	}(window, module);

	facade.setVal(10);
	facade.runAndJump();

	facade.module.run();
	</script>
	</body>
	</html>
	<html>
	<head>
	<title>Mediator Pattern</title>
	</head>
	<body>
	<h1>Mediator Pattern Example</h1>

	<script type="text/javascript">
	!function() {
	var mediator = window.mediator = {},
	channels = [];

	mediator.subscribe = function(channel, func) {
	if (!channels[channel]) {
	channels[channel] = [];
	}

	channels[channel].push({ context: this, callback: func });
	return this;
	};

	mediator.publish = function(channel) {
	if(!channels[channel]) {
	return false;
	}

	var args = Array.prototype.slice.call(arguments, 1);
	for (var i=0,l=channels[channel].length; i<l; i=i+1) {
	var subscription = channels[channel][i];
	subscription.callback.apply(subscription.context, args);
	}
	return this;
	};

	mediator.installTo = function(obj) {
	obj.subscribe = this.subscribe;
	obj.publish = this.publish;
	}
	}();

	//Pub/sub on a centralized mediator
	mediator.name = "tim"
	mediator.subscribe('nameChange', function(arg) {
	document.write("<h2>Centralized Mediator</h2>");
	document.write("<p>Old name: " + this.name + "</p>");
	this.name = arg;
	document.write("<p>New name: " + this.name + "</p>");
	});

	mediator.publish('nameChange', 'david'); //tim, david

	//Pub/sub via third party mediator
	var obj = { name: 'sam' };

	mediator.installTo(obj);
	obj.subscribe('nameChange', function(arg) {
	document.write("<h3>Third Party Mediator</h3>");
	document.write("<p>Old name: " + this.name + "</p>");
	this.name = arg;
	document.write("<p>New name: " + this.name + "</p>");
	});

	obj.publish('nameChange', 'john'); //sam, john
	</script>
	</body>
	</html>
	<html>
	<head>
	<title>Module Pattern</title>
	</head>
	<body>
	<h1>Module Pattern Example</h1>

	<script type="text/javascript">
	!function() {
	var basketModule = window.basketModule = {},
	basket = [];

	basketModule.addItem = function(values) {
	basket.push(values);
	};

	basketModule.getItemCount = function() {
	return basket.length;
	};

	basketModule.getTotal = function() {
	var index = this.getItemCount(),
	total = 0;

	while(index--) {
	total = total + basket[index].price;
	}

	return total;
	};

	}();

	basketModule.addItem({item:'bread', price:2.5});
	basketModule.addItem({item:'butter', price:1.3});

	document.write("<h2>Item Count: " + basketModule.getItemCount() + "</h2>");
	document.write("<h3>Total: " + basketModule.getTotal() + "</h3>");

	document.write("<p>basketModule.basket: " + basketModule.basket + "</p>");
	</script>
	</body>
	</html>