{"id":5304,"date":"2019-12-19T16:47:15","date_gmt":"2019-12-19T11:17:15","guid":{"rendered":"https:\/\/blog.pheonixsolutions.com\/?p=5304"},"modified":"2019-12-21T14:04:40","modified_gmt":"2019-12-21T08:34:40","slug":"what-is-design-pattern-and-how-to-implement-them","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/what-is-design-pattern-and-how-to-implement-them\/","title":{"rendered":"What is Design pattern and how to implement them"},"content":{"rendered":"\n

What is Design pattern and how to implement them<\/h3>\n\n\n\n

Date: 19\/12\/2019<\/h4>\n\n\n\n

Introduction<\/h4>\n\n\n\n

The article is will not explain something about a specific language. So other than the code block, I will talk about design patterns.<\/p>\n\n\n\n

Design patterns are crafting the communication between bunches of code. In OOPS, you can scale, incorporate more functionality. Generally, we may want to have more than one class to perform a certain task. In this case, if you don’t have an appropriate pattern, you will finally get more bugs that can be avoided easily, scalability issues and maintenance nightmare for future developers because every source code will be updated as time goes. <\/p>\n\n\n\n

Here, I will just explain the Command pattern with javascript which is about switching on and off of a light. There are more design patterns out there. Some patterns of outdated. So please try avoiding them. <\/p>\n\n\n\n

As a newbie to programming, if you are working on a new project, you may be blindsided how to or where to these kinds of patterns. You can search for use cases of the pattern on the internet. Try to ask yourself and find your own. Because that’s is where you are truly harnessing your programming skill.<\/p>\n\n\n\n

Example<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n

In this example, you will learn how to perform the task of swiching light and storing the actions. Along the way, we will use inheritance (passing one class object into another). <\/p>\n\n\n\n

class<\/strong> Switch {\n  constructor() {\n    this<\/strong>._commands = [];\n  }\n\n  storeAndExecute(command) {\n    this<\/strong>._commands.push(command);\n    command.execute();\n  }\n}\n\nclass<\/strong> Light {\n  turnOn() { console.log('on') }\n  turnOff() { console.log('off') }\n}\n\nclass<\/strong> PressDownCommand {\n  constructor(light) {\n    this<\/strong>._light = light;\n  }\n\n  execute() {\n    this<\/strong>._light.turnOff();\n  }\n}\n\nclass<\/strong> PressUpCommand {\n  constructor(light) {\n    this<\/strong>._light = light;\n  }\n\n  execute() {\n    this<\/strong>._light.turnOn();\n  }\n}\n\nvar<\/strong> light = new<\/strong> Light();\nvar<\/strong> switchUp = new<\/strong> PressUpCommand(light);\nvar<\/strong> switchDown = new<\/strong> PressDownCommand(light);\nvar<\/strong> s = new<\/strong> Switch();\n\ns.storeAndExecute(switchUp);\ns.storeAndExecute(switchDown);<\/pre>\n\n\n\n
With the last two lines of codes, we perform one switch on and one switch off. If you print s.commands, you will find the actions we perform. That’s it. You have learned something new. Great!. <\/p>\n\n\n\n
Conclusion<\/h4>\n\n\n\n
In the early ’90s, there’s a book released called Design Pattern. Please check out those too. There is more pattern available out there. Personally, I also recommend Wikipedia for those different patterns. Because you can see the available in different languages. And also reliable one in terms of out of date issues. Because as a newbie, you can’t recognize the good or bad one. I hope you like it. Please comment on the content if you find anything incorrect. <\/p>\n\n\n\n
Please feel free to share if you find it useful. Thank you.<\/p>\n\n\n\n
References<\/h4>\n\n\n\n