document.addEventListener("DOMContentLoaded", function(){ var images = [] var patterns = [] for(var i = 0; i < 13; i++) { images.push(document.getElementsByTagName('img')[i]) images[i].setAttribute("draggable", "false") patterns.push(document.getElementsByClassName('col-sm-4')[i]) } var contents = [ ['The Singleton Pattern', 'The Singleton pattern allows you to create a single instance of a specified class, since Javascript has no classes, a normal "literal object" can be considered a singleton, however... it might happen that you need to create an object later on the program, the Singleton comes in help in this case. It is worth to say that the Singleton is considered an "Anti-Pattern" by most of the Javascript developers.

More informations ', singleton], ['The Module Pattern', 'The Module Pattern makes use of the closure to return an object. The main goal of this pattern is to separate methods in "private/public" by emulating the "information hiding"', module], ['The Command Pattern', 'The Command pattern aims to encapsulate method invocation, requests, or operations into a single object and gives us the ability to both parameterize and pass method calls around that can be executed at our discretion.

Definition by: Addy Osmani', command], ['The Revealing Module Pattern', 'The Revealing Module Pattern is pretty similar to the classic Module Pattern but with few important changes, all variable and functions are declared as public and this pattern should return only the properties that we want as public.', revealing], ['The Mixin Pattern', 'The Mixin Pattern provides functionality that can be easily extended by other sub-classes', mixin], ['The Creational Pattern', 'The Creational Patterns forms the basis for a number of the other design patterns. It deals with the idea of creating new things, specifically new objects.', creational], ['The Prototype Pattern', 'The Prototype Pattern is not so popular in programming languages different from Javascript, however it\'s a clean solution to easily clone an object by accessing to the prototype of the objects we are working with.', prototype], ['The Constructor Pattern', 'Constructors are widely used to create easily few instances without have to rewrite them. will be called each time you create an instance. What a Constructor Pattern does, is to create However, most of the time, they are badly written since the methods inside a constructor a single istance that will be shared between all of our objects.', constructor], ['The Decorator Pattern', 'The Decorator Pattern is useful for modifying existing systems where you may wish to add additional features to objects without the need to change the underlying code that uses them.', decorator], ['The Facade Pattern', 'The Facade Patterns provides a simple interface by hiding the complexity "behind the scenes"', facade], ['The Flyweight Pattern', 'The Flyweight Pattern allows you to encapsulate and re-use a single portion of code to improve performances of your application and avoid redundancy', flyweight], ['The Factory Pattern', 'The Factory Pattern is a creational pattern used to create multiple objects based on conditions by implementing an interface (method) as factory, in other programming languages the Factory Pattern can be also more useful and complex than that', factory], ['The Mediator Pattern', 'The Mediator Pattern acts like a mediator between our objects, it helps one or more of them to communicate each other in a cleaner and more organized way.', mediator] ] var homeButton = document.getElementById("homeButton") homeButton.onclick = function() { hide(patternSection) show(homeSection) } var homeSection = document.getElementById("homeSection") var patternSection = document.getElementById("patternSection") var patternSectionTitle = document.getElementById("pattern_section-title") var patternSectionInfo = document.getElementById("pattern_section-info") var patternSectionCode = document.getElementById("pattern_section-code") for(var i = 0; i < patterns.length; i++) { patterns[i].onclick = function() { patternSectionTitle.innerHTML = contents[patterns.indexOf(this)][0] patternSectionInfo.innerHTML = contents[patterns.indexOf(this)][1] patternSectionCode.innerHTML = contents[patterns.indexOf(this)][2] hide(homeSection) show(patternSection) syntaxHighlightingOn() } } }) function hide(el) { el.style.display = "none" } function show(el) { el.style.display = "block" } function syntaxHighlightingOn() { var codeElements = $(".pattern_section pre code"); var strReg1 = /"(.*?)"/g, strReg2 = /'(.*?)'/g, specialReg = /\b(new|var|if|do|function|while|switch|for|foreach|in|continue|break)(?=[^\w])/g, specialJsGlobReg = /\b(document|window|Array|String|Object|Number|\$)(?=[^\w])/g, specialJsReg = /\b(getElementsBy(TagName|ClassName|Name)|getElementById|typeof|instanceof)(?=[^\w])/g, specialMethReg = /\b(indexOf|match|replace|toString|length)(?=[^\w])/g, specialPhpReg = /\b(define|echo|print_r|var_dump)(?=[^\w])/g, specialCommentReg = /(\/\*.*\*\/)/g, inlineCommentReg = /(\/\/.*)/g; var htmlTagReg = /(<[^\&]*>)/g; var sqlReg = /\b(CREATE|ALL|DATABASE|TABLE|GRANT|PRIVILEGES|IDENTIFIED|FLUSH|SELECT|UPDATE|DELETE|INSERT|FROM|WHERE|ORDER|BY|GROUP|LIMIT|INNER|OUTER|AS|ON|COUNT|CASE|TO|IF|WHEN|BETWEEN|AND|OR)(?=[^\w])/g; var htmlTagReg = /(<[^\&]*>)/g; codeElements.each(function (){ var string = this.innerHTML, parsed = string.replace(strReg1,'"$1"'); parsed = parsed.replace(strReg2,"'$1'"); parsed = parsed.replace(specialReg,'$1'); parsed = parsed.replace(specialJsGlobReg,'$1'); parsed = parsed.replace(specialJsReg,'$1'); parsed = parsed.replace(specialMethReg,'$1'); parsed = parsed.replace(htmlTagReg,'$1'); parsed = parsed.replace(sqlReg,'$1'); parsed = parsed.replace(specialPhpReg,'$1'); parsed = parsed.replace(specialCommentReg,'$1'); parsed = parsed.replace(inlineCommentReg,'$1'); this.innerHTML = parsed; }); } /** All the patterns examples i made */ var singleton = `var singleton = (function(){ var instance function create_object() { return { name: "Bob", address: "21th Road, NY", animal: "Dog", print_info: function() { return this.name + " lives in " + this.address + " with his " + this.animal } } } return { get_instance: function() { if(!instance) instance = create_object() return instance } } })(); console.log(singleton.get_instance().print_info())` var module = `var basket_module = (function(){ // Private array and two private methods for test purposes var basket = [] function private_method_one() {} function private_function_two() {} return { add_item: function(val) { basket.push(val) }, get_total_items: function() { return basket.length }, get_total_price: function() { var total_items = this.get_total_items() var total_price = 0 while(total_items--) total_price = total_price + basket[total_items].price return total_price }, // Get access to the private method public_method: private_method_one } })() basket_module.add_item({ item_one: "bob", item_two: "eoe", price: 12 }) basket_module.add_item({ item_one: "3o3", item_two: "2o2", price: 17 }) console.log(basket_module.get_total_items()) console.log(basket_module.get_total_price())` var command = `var series = { print_type: function(title, type) { console.log("The type of: " + title + " is: " + type) }, print_dur: function(title, dur) { console.log("Each episode of: " + title + " is " + dur + " long") }, print_title: function(title) { console.log("The title of this program is: " + title) } } /** Execute the function passed as first argument and take all of the other arguments as arguments of this function */ series.execute = function(function_name) { return series[function_name].apply(series, [].slice.call(arguments, 1)) } /** Tests */ series.execute("print_title", "Tokyo Ghoul") series.execute("print_dur", "Sakurasou no Pet na Kanojo", "24min") series.execute("print_type", "Welcome to the N.H.K", "anime/dramatic")` var revealing = `var sport = (function(){ var squadra_calcio = 11 var squadra_basket = 5 function rimuovi_giocatore(squadra, valore) { if(squadra == "calcio") squadra_calcio -= valore if(squadra == "basket") squadra_basket -= valore successo() } function mostra_squadra(squadra) { if(squadra == "calcio") return squadra_calcio if(squadra == "basket") return squadra_basket } function successo() { console.log("Giocatori rimossi con successo"); console.log(mostra_squadra('calcio')) } return { rimuovi_giocatore: rimuovi_giocatore, mostra_squadra: mostra_squadra, } })() console.log(sport.mostra_squadra('calcio')) sport.rimuovi_giocatore('calcio', 3) sport.rimuovi_giocatore('calcio', 5)` var mixin = `function Person(name) { this.name = name } function Mixin() {} Mixin.prototype.print_info = function() { return this.name } /** Use this function to easily extend from your super-classes */ function extend(subClass, superClass) { if(arguments[2]) { for(var i = 0; i < arguments.length; i++) { subClass.prototype[arguments[i]] = superClass.prototype[arguments[i]] } } } /** Get the "print_info()" method for the Person constructor */ extend(Person, Mixin, "print_info") var bob = new Person("Bob") /** Tests */ console.log(bob.print_info())` var creational = `/***** (1) Create an object - 3 ways ****/ /** 1.0 **/ var myObject = {} /** 1.1 **/ var myObject = new Object() /** 1.2 **/ var myObject = Object.create(null) /***** (2) Define Properties - 4 ways ****/ /** 1.3 **/ myObject.animal = "dog" /** 1.4 **/ myObject["animal"] = "dog" /** 1.5 **/ Object.defineProperty(myObject, 'animal', { value: "dog", writable: true }) /** 1.6 **/ Object.defineProperties(myObject, { "animal": { value: "dog", writable: true }, "zoo": { value: true, writable: false, enumerable: false, configurable: false } }) /** Test */ console.log(myObject)` var prototype = `function PersonPrototype(proto) { this.proto = proto } PersonPrototype.prototype.clone = function() { var customer = new Person() customer.name = this.proto.name customer.surname = this.proto.surname customer.age = this.proto.age return customer } function Person(name, surname, age) { this.name = name this.surname = surname this.age = age } Person.prototype.sayHello = function() { console.log("Hello, it's me... " + this.name + "!") } /** Create the "person" object and pass it to the "PersonPrototype" constructor */ var person = new Person("Bob", "McPizza", 21) var person_proto = new PersonPrototype(person) /** Create different objects by using the "clone()" function */ var bob_one = person_proto.clone() var bob_two = person_proto.clone() var bob_three = person_proto.clone() /** Tests */ console.log(bob_one.name) console.log(bob_two.name) console.log(bob_three.name)` var constructor = `// Here the constructor function Person(name, age, city) { this.name = name this.age = age this.city = city } // Here i'm going to declare externally this method because i want to create a single instance of the showInfo() method Person.prototype.showInfo = function() { return "Name: " + this.name + " Age: " + this.age + " in: " + this.city } /** showInfo() will be now called one time, then it will be shared across all the objects */ /** Test */ var myObj = new Person("Bob", 19, "NY") console.log(myObj.showInfo()) var myObj2 = new Person("Tim", 21, "NY") console.log(myObj2.showInfo()) var myObj2 = new Person("Zak", 17, "NY") console.log(myObj2.showInfo()) /****** --- Closures --- (function(){ this.showInfo = function() { return "Name: " + this.name + " Age: " + this.age + " in: " + this.city } }).call(Person.prototype); ******/` var decorator = `function Product() {} Product.prototype.price = function() { return 24 } Product.prototype.quantity = function() { return 5 } function increasePriceBy(number, object) { var priceValue = object.price() object.price = function() { return priceValue + number } } var computer = new Product() increasePriceBy(40, computer) console.log(computer.price()) // Is changed console.log(computer.quantity()) // Is not changed` var facade = `function CreateShape(width, height = null) { this.width = width this.height = height } function CalculateArea() {} CalculateArea.prototype.SquareArea = function(side) { return side * side } CalculateArea.prototype.RectArea = function(width, height) { return width * height } function squareArea(side) { var quadrato = new CreateShape(side) var area = new CalculateArea() return area.SquareArea(quadrato.width) } function rectArea(width, height) { var rettangolo = new CreateShape(width, height) var area = new CalculateArea() return area.RectArea(width, height) } /** Tests */ console.log(squareArea(4)) console.log(rectArea(5, 4)) console.log(squareArea(7, 6, 3, "dog", 7, 1))` var flyweight = `function Flyweight(type, company) { this.type = type this.company = company } var FlyweightFactory = (function(){ var flyweights = {} return { useFlyweight: function(type, company) { if(!flyweights[type + company]) { flyweights[type + company] = new Flyweight(type, company) } return flyweights[type + company] }, countFlyweight: function() { var count_flyweights = 0 for(var index in flyweights) count_flyweights++ return "Flyweights: " + count_flyweights } } })() var Products = function(type, company, state, time) { this.flyweight = FlyweightFactory.useFlyweight(type, company) this.state = state this.time = time } function ProductsManager() { this.products = [] this.total_products = 0 } ProductsManager.prototype = { addProduct: function(type, company, state, time) { this.products.push(new Products(type, company, state, time)) this.total_products++ }, countProducts: function(){ return "Products: " + this.total_products } } var products = new ProductsManager() products.addProduct("DVD", "Dynit", "Good", 3) products.addProduct("DVD", "Dynit", "Excellent", 5) products.addProduct("DVD", "Dynit", "Good", 2) products.addProduct("Manga", "Dynit", "Not good", 3) products.addProduct("Manga", "Crunchyroll", "Excellent", 7) /** Tests */ console.log(products.countProducts()) console.log(FlyweightFactory.countFlyweight())` var factory = `function Ukaku(opts) { this.skill = opts.skill this.ghoul = opts.ghoul } function Koukaku(opts) { this.skill = opts.skill this.ghoul = opts.ghoul } function Rinkaku(opts) { this.skill = opts.skill this.ghoul = opts.ghoul } function Bikaku(opts) { this.skill = opts.skill this.ghoul = opts.ghoul } function Kagune(){} Kagune.prototype.createKagune = function(opts) { switch(opts.type) { case 'ukaku': this.classKagune = Ukaku break case 'koukaku': this.classKagune = Koukaku break case 'rinkaku': this.classKagune = Rinkaku break case 'Bikaku': this.classKagune = Bikaku break } return new this.classKagune(opts) } var kaguneFactory = new Kagune() var rinkaku = kaguneFactory.createKagune({ type: 'rinkaku', skill: 'Resistence', ghoul: 'Kaneki' }) console.log(rinkaku instanceof Rinkaku) console.log(rinkaku.skill) console.log(rinkaku.ghoul)` var mediator = `function Friend(name, surname, age) { this.name = name this.mediator_reference = null } Friend.prototype.create_friendship = function(friend) { this.mediator_reference.create_friendship(this, friend, "!!! - Friends - !!!") } function Mediator() { this.friends = [] } Mediator.prototype = { register: function(friend) { this.friends.push(friend) friend.mediator_reference = this }, create_friendship: function(friend_one, friend_two, message) { for(let i = 0; i < this.friends.length; i++) { if(this.friends[i].name == friend_two.name) { console.log(friend_one.name + " is friend of: " + friend_two.name + ". " + message) } } } } /** Tests */ var bob = new Friend('Bob') var tim = new Friend('Tim') var john = new Friend('John') var mediator = new Mediator() mediator.register(bob) mediator.register(tim) mediator.register(john) bob.create_friendship(tim) bob.create_friendship(john) tim.create_friendship(john) john.create_friendship(bob) john.create_friendship(tim)`

Design Patterns by Example