Placeholder Image

字幕列表 影片播放

  • Hello, everyone.

  • In today's video, we're gonna be talking about the command pattern, which is one of my favorite patterns because of all of the incredibly cool things it lets you do.

  • So let's get started now before we get started.

  • I want to talk about today's video sponsor, which is atlantic dot net hosting.

  • And this is an incredible hosting company, which is giving you an entire year of hosting completely for free.

  • If you sign up with the link down the description below and this isn't some cheapo server, this is actually an incredibly powerful server, which is more powerful than the server.

  • I even host my own website on, so you know that this is gonna be powerful enough to handle any of your needs.

  • On top of that, they have incredible reliability and redundancy on their servers.

  • So your Web page is always going to be up and always available, which is a great thing to know.

  • On top of that, you're gonna get an additional $50 of free credit if you sign up using the code, Kyle.

  • So make sure you check that out, using the link down in the description below and with that out of the way, Let's jump into the video You came here for not to get started on the left hand side of my screen.

  • I have some really simple code for a calculator that has a value, and then we can add, subtract, multiply and divide.

  • And down here I've just added 10 and then divide it by two, and we're getting her output of 10 and then five on the right hand side of the screen.

  • And every time I say it's going to change.

  • So if I divide by three, for example, you see it divides by three over here, and right now this is not using the command pattern.

  • This is just a basic job script class that you're probably all used to.

  • Now, before I go start breaking this down and implementing the command pattern for this calculator, I want to talk a little bit about what the command pattern is and why you would even use it.

  • And the idea of the command pattern is to take the different operations that you want something to do and encapsulate them into individual commands that have a perform and then undo method.

  • So essentially you can do the operation, you can do the command, and then you can undo that operation.

  • So if we take a look at our calculator here, you can see that we have four separate commands or operations that we can do on our calculator.

  • We can add, subtract, multiply and then divide.

  • These are our different commands, and we want to take these command out of our calculator and actually make them their own objects, their own things that haven't execute and undo function.

  • And the reason for this is that we can actually play back and rewind our commands so that we can add.

  • And then we can undo our ad, which is essentially the same a subtract so we can do and then undo all of our different commands that we want to.

  • Also, we can combine together different commands really easily.

  • So if we wanted to add and multiply something, normally you have to call ad and they'd have to call it multiply.

  • But you could just create a command called ad, then multiply, which will do the adding and multiplying in the correct order, and will even undo them in the correct order for you.

  • This is the real power of the command pattern, the ability to do and then undo as well as to make your commands separate from the actual object that you're doing the command on.

  • So to get started, let's abstract this ad out into its own command.

  • We're just gonna credit class for I want to call it here the Ad Command and this Ad Command is going to take a constructor and his constructors just going to take the amount we want to add so excited value to add.

  • And we'll just set the value to adhere to that value it passed in.

  • So now we have a reference to the value to add.

  • It's essentially the same thing as the value we passed to the function were already calling, then inside here, as I mentioned, we need to have an execute function and then we need to have an undue function.

  • And this execute function needs to take the current value essentially, this stock value.

  • Because this command is no longer in the calculator, it can be used for things that aren't the calculator we could do added, for example, in a game we could have some damage calculator that does.

  • Adding, While this could be a calculator on a desktop of a computer, they could both still use this ad command.

  • But they're completely different operations, while in the other example, if we did like this for the class, we would need two different classes to handle those two different types of calculations.

  • So now, inside this execute, like I mentioned, it needs to take our current value.

  • And then all we need to do is return our current value, plus our value to add.

  • And as you remember up here, that's very similar to this ad function.

  • But instead of setting our value, we're returning the value since these execute functions are going to be called on anything.

  • So we just need to have the result returned so we can actually use that inside.

  • The thing we return it to now undo is gonna be very similar.

  • We need to pass in the current value, and we're just doing the current value minus this stock value to add.

  • It's the exact same things execute just reversed.

  • And now what we can do is actually create a new ad command.

  • So we could say, const added command is equal to new ad command.

  • And let's say we wanted to add 10 for example, and then in order to execute that, we would just say add command dot execute And we would have to pass at the current value of zero, for example.

  • And if we want this out, we should get 10.

  • So it's logged that out and make sure we delete all of the code down here and you can see we're getting 10 printed out.

  • So we know that our command is working.

  • We change this to 20.

  • It should be 30 and someone and that's great.

  • And what we can do even further is we can actually log out the undue operation of that.

  • So if we add 10 we want to get the result of that.

  • So we just put this in a variable.

  • Well, say new value is equal to that.

  • So now we have 10 plus tense.

  • This new value should be 20 what's printed out, and then we wanna undo with our new value on, we should get left back with our original value of 10.

  • And as you can see 20 is what happens when we add the first time and then we undo and we get put back down to 10 now, obviously, in this trivial case of adding and subtracting, having an undue functions pretty useless.

  • But when you can think of things such a saving users to a database, that's something that having an undue function for is incredibly useful because the undue is really complex.

  • But if you just have an undue method and execute method that makes working with that save functionality really easy.

  • So now let's actually look at how we could implement this command inside of our calculator to do that.

  • Let's just remove this current ad command we're gonna add in an execute command function inside of here, and this is going to take the command that we want to execute.

  • Essentially, we just need to call that execute function so we can say that our value is going to be equal to our command dot execute with our current value.

  • So what this is doing?

  • Is it saying, take our ad command call, execute passage in our current value, which in our case is zero to start with, add in that value that we gave to our ad command and then set that to our new value.

  • So now we have all of our values being properly added.

  • With this one execute command function, the last thing they need to do is just keep track of all the commands that we've done.

  • So we just call this our history and we could just say this dot history and we're going to do is push on that command.

  • So now we're actually keeping track of the commands that we've actually executed on.

  • We can create here and undo function.

  • You just say I'm due on where this is going to do.

  • It is going to get a command, which is going to be our most recent command.

  • So we'll just say, Pop, that's going to take the most recent thing off of our ray, remove it from the array and put it inside this variable.

  • Then we could just set the value equal to our command dot Undo, undo.

  • We just need to make sure you pass it in our current value.

  • Now, what we can do is all the way down here.

  • We can remove all this code.

  • We could go down to our calculator.

  • We could just say calculator hopes calculator dot Execute command.

  • We want to execute a new ad command.

  • We're gonna add 10.

  • Then we're gonna log out the value.

  • So it's a concert at log calculator dot value and this should be 10.

  • If we save, we see we get 10 and then let's just try undoing that.

  • So we'll say calculator dot undo.

  • That's gonna undo whatever the most recent thing was.

  • We don't need to keep track of that.

  • And then we can just counsel that log our calculator dot value and you can see it brought it all the way back down to zero for us.

  • And now I could go through and remake every single one of these commands into its own new command so I could remove, subtract and multiply and divide.

  • But I'm going to do that off camera and come back to you when it's done.

  • Okay?

  • And with that, I've removed all of our ads of track divide functions from a calculator.

  • We just have execute, command and undo.

  • And then I've created all of our commands.

  • Add, subtract, multiply, divide.

  • They all are very self explanatory.

  • They just do the operation.

  • And in the undue is the opposite of the operation, just like the ad was.

  • And we can use all of these different commands.

  • For example, we could combine and adding here a multiply command and we could multiply by two.

  • And if we say you can see multiplied by two gives us 20 and when we undo, it brings us back down to 10 because it divides lie, too.

  • But really, this kind of looks like a lot of code to do the same thing we were doing before, right?

  • This is way more complex, and we weren't difficult.

  • And you are correct.

  • In this very simple instance, this is a lot more code.

  • It's really not worth the effort.

  • But where commands become really useful is the ability to combine commands together and make the save and execute functions of them all.

  • Just work seamlessly commands, ideally start out really small and then build upon themselves to make more complex commands, which then built to make even more complex commands and so on until you have one single command that does everything you needed to do for a specific instance.

  • Take, for example, a button.

  • You know, when you close most applications a lot of times you're gonna get three options.

  • You're gonna get the option of save what's gonna get the option of exit, and then you're gonna get the save and exit option.

  • And normally, if you implement this without commands, you have to write this save functionality inside the safe function, the exit functionality inside an exit function, and you have to duplicate both save and exit inside the saving exit function.

  • But with commands, we can create a safe command.

  • We can create an exit command and they're saving Exit command just uses both of those commands.

  • We don't have to redo any of the logic.

  • And the undue is all taken care of this for us inside that new object.

  • So let's actually do that with add and multiply.

  • We'll create a class called ad, then multiply command and inside of that here, we're gonna do a constructor, and it's gonna take our value toe add as well as our value to multiply.

  • And then we're just gonna set those values.

  • And then there we go.

  • We got value to add and value to multiply and value to add.

  • There we go.

  • We actually have those values set and then, just like every other command we haven't execute and an undue function which we're going to take the current value inside of both of these.

  • And all we need to do is just execute and undo our commands.

  • So up here, what we can do is we can actually just changes to a command.

  • We could just say add command.

  • And we can set that to a new ad, a command where he passed in her value to add.

  • Just like that, we could do the exact same thing, but this time for a multiply command.

  • And we could do here a new multiply command.

  • And of course, we're gonna pass in the value to multiply.

  • Now we just have these commands and we can just say that our new value, what's new value is going to be equal to?

  • I had a command.

  • Make sure you put this in front of it.

  • This dot ad command and all we need to do is call execute with our current value, and then we can do the exact same thing.

  • But instead of using current value, we need to use the new value, and we can say the multiply command dot execute with the new value.

  • So essentially, what we're doing is we're taking our current value.

  • We're executing the ad command on it, and then we're taking the value we get from that and executing the multiply command on it.

  • And what we're gonna returned here is essentially adding, and then multiply.

  • We're combining our two commands together.

  • We could do the exact same thing inside of our undo function down here.

  • We just need to make sure we undo them in the correct order.

  • So we're gonna undo, are in multiple.

  • I command by passing it the current value, and that's going to be set to our new value just like that.

  • So now we have our new value from our undo.

  • And then we're just gonna return the undue of our ad command with that new value just like that.

  • And now it's actually use that.

  • So right now we're doing add and multiply, and it's given us 20 and intense, So it's giving us 20th century.

  • As a result, we can do, add venom, multiply, make sure you pass with same parameters of 10 and two, and we can see that this should be 20 and then it's gonna undo back to zero.

  • And if we say you see it 20 and then UN does back down to zero, so you can already see the power of combining together different commands.

  • We can even combine a new command with this ad, then multiply.

  • We could have an ad, then multiply, Then divide, which takes an admin, multiply and divide command.

  • It calls those together.

  • You can really combine any commands that you can possibly think of and make any new command out of all of these small commands.

  • One place that this command pattern is really popular.

  • Isn't a text editor think about word documents?

  • For example, they have a button for bolding text, and they have a shortcut for bullying text, and you also have an undo undo shortcut so you can undo any of these commands.

  • So let's say you highlighted some texts and bolted it by clicking the bolt button.

  • You want that bold button to do the exact same thing as the bold shortcut on the keyboard.

  • So they both gonna use the same bold command that both command will have an execute, which holds the text that you highlighted and then undo, which essentially just unbolt the text that you originally bold it.

  • And both the button and the keyboard shortcut can use the exact same command.

  • So it's really easy to hook these things together.

  • The real power of the command pattern is the ability to create these small little commands that are completely separate from the thing that implements them.

  • In that word document example, we didn't have to do an on button click event listener and then put the bold text in there.

  • We just had a bold command and gave it to the button.

  • Same thing with the keyboard shark it we just gave the bold command to the keyboard shortcut.

  • We didn't have to worry about what the bold command was being used for.

  • Its just to command, and all it knows is that it could be executed and undone.

  • And the thing using it just knows that it's a thing that can execute and beyond done.

  • It doesn't know that it's bold that doesn't know what it is.

  • It just knows it to command.

  • So this decoupling is incredibly powerful and the biggest reason to use the command pattern, and that's all there is to my favorite pattern.

  • The command pattern.

  • If you enjoyed the video, make sure to check out by other videos in the design pattern Siri's linked over here and subscribe to my channel from more videos just like this.

  • Thank you very much for watching and have a good day.

Hello, everyone.

字幕與單字

單字即點即查 點擊單字可以查詢單字解釋

B1 中級

命令模式 - 設計模式 (Command Pattern - Design Patterns)

  • 3 1
    林宜悉 發佈於 2021 年 01 月 14 日
影片單字