11/9/2022 0 Comments Javascript design patterns![]() ![]() Chain of Responsibility Exampleįor our example today, we’ll be creating an ATM. Once an event is fired, it _bubbles _up the DOM hierarchy, calling every event handler it runs into until it either gets to the end of the chain or a handler tells it to stop propagating. ![]() Chains in the World Around UsĮvent handling in the DOM uses one implementation of the Chain of Responsibility (amazing how many patterns are used together in the DOM, isn’t it). The request will keep going down the line until the request was handled or there are no more receivers to pass it on to, at which point either nothing happens or an error is thrown, depending on how you want it to work. Each receiver only knows about the next receiver in the line. The first receiver either handles the request and/or passes it on to the next one in the chain. The sender only knows about this first object and nothing about the other receivers. ![]() The request itself can be an object that encapsulates all the appropriate data.Ī sender sends the request to the first receiver object in the chain. The receiver is a chain of 1 or more objects that choose whether to handle the request or pass it on. There are three parts to the Chain of Responsibility pattern: sender, receiver, and request. Go back to the “Using the Factory Pattern to Assign a Task Type Example” above, directly below the “used to print the task and its type to the console” comment, there is a small “fine” function that was created to print each task in the array to the console using the following array method.The rest of the JavaScript Design Patterns series: Our only dilemma now is how do we know that those two tasks were created or that our factory pattern worked? If we had used a database then we could simply check the database to see if two new tasks were created. It is then pushed into the task array that we created earlier. When we create each new task the properties (name and type) are being past to the createTask function, which is located in the TaskFactory function that we created using the factory pattern.Īfter each task has made its way through the TaskFactory and the appropriate type property is assigned to it. #Javascript design patterns code#With the code above you are now able to create two new tasks using the TaskFactory function that we created initially. Task.push(factory.createTask('Reach level 30 in Candy Crush', 'trivial')) Task.push(factory.createTask('Clean the house', 'urgent')) create an array to host the different task Given that creating a database is an entire article in itself, we will substitute a database with a data structure (an array). The next step is to now create a new task, but before that, we need to create a database to store each new task as it is created. Create Urgent and Trivial Task Typesīecause of the code above, we are now able to assign the UrgentTask or TrivialTask property to each new task that is created. However, there isn’t any function or class with these names in our project-this problem can be easily solved by introducing the following code to our project. In the code above we are creating a new UrgentTask or a new Trivialtask if a specific condition is met. The inner function createTask, sets the stage for multiple tasks to be created simultaneously, but before we try to create any new tasks there is some additional code that we need to include in this section of the project. The code above uses the factory method to create new tasks, check the type (urgent or trivial), and assign the appropriate property before printing the new task to the console. ![]() This.createTask = function( name, type) `) Using the Factory Pattern to Assign a Task Type Example ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |