Shulou(Shulou.com)06/02 Report--

This article mainly introduces the relevant knowledge of "how to realize the command pattern of javascript design pattern". The editor shows you the operation process through an actual case, the operation method is simple and fast, and it is practical. I hope this article "how to realize the command pattern of javascript design pattern" can help you solve the problem.

one。 Recognize the command mode

The so-called command, that is, the instruction to carry out certain things, take the example of drinking water. The instruction to drink water is to pour the water into the cup, and then pick up the cup and put it into the mouth. This is an order. No matter who drinks water, this is this step. We don't care who picked up the cup, nor do we care whether the water in the cup is water or something else. We only care about this process, pour the water into the cup, then pick up the cup and put it into the mouth, and it doesn't matter who drinks it, whether it is the drink or the water.

You may be a little confused, and the most common application scenario of command mode is that sometimes you need to send a request to certain objects, but you don't know who the recipient of the request is or what the requested operation is. At this time, we use a loosely coupled way to design the program, so that the request sender and receiver can eliminate the coupling relationship between each other.

two。 Code implementation-practical application scenario

Teamwork is the most important link in actual development. If two people get two different tasks respectively, one is responsible for beautifying all the button buttons on the page, and the other is responsible for realizing the logic of these button. When we write the button logic, we do not know which button on the page the button is bound to, nor do we know what will happen when we click the button. At this time, we use the command mode to design. To uncouple the button and the object responsible for the specific behavior, the code is shown below.

Let btns = document.querySelectorAll ('button'); / / write a refresh command let refreshCommand = {execute () {console.log ("Refresh Page") }} / / write a login button command let loginCommand = {execute () {console.log ("perform login operation");}} let setCommand = function (button, command) {button.onclick = function () {command.execute () }} / / if the third button is used to refresh the page, the fifth button is used to handle the login operation setCommand (btns [2], refreshCommand); setCommand (btns [4], loginCommand)

Analysis: we encapsulate the events that may occur after clicking the button, each of which has its own execute function, we encapsulate the function of installing the button function into setCommand, and finally install the function of each button according to the demand.

three。 Undo operation in command mode

After issuing a command, we may not need it. If we want to return to the state before the command is issued, we need to use the undo operation. The implementation of the undo operation is generally to add a undo or unexecute method to the command object, in which the reverse operation of execute is performed.

/ / if you write a command to move a character to the left, let moveLeftCommand = {execute () {console.log ("character moves left");} undo () {console.log ("character moves again");}}

This is a simple logical implementation, and what should we do if some undo cannot be implemented by performing his reverse operation?

With this problem, we learn a new way to undo. We use a stack to record each command. If we want to undo, we just need to start all over again, take the command from the stack and execute it separately, and delete the last command. If we do not delete the last command in turn, we have implemented a new function, replay.

This is a code implementation that controls the movement of the ball through WASD. Every time we press a valid command, we will push the command into commandStack to record the changes of the ball. When we click on replay, the ball will follow the same trajectory.

Let role = document.getElementById ('role'); let move = {dom: role, leftt:0, top: 0, up () {console.log ("up"); this.top-= 10; this.dom.style.top = this.top +' px' }, down () {console.log ("Down"); this.top + = 10; this.dom.style.top = this.top + 'px';}, left () {console.log ("left"); this.leftt-= 10 This.dom.style.left = this.leftt + 'px';}, right () {console.log ("right"); this.leftt + = 10; this.dom.style.left = this.leftt +' px' }} commands = {"119,119,115": "down", / / S "97": "left", / / A "100": "right" / / D}; commandStack = [] / / Save the stack of the command let setCommand = function (receiver, state) {return function () {receiver [state] ();}} document.addEventListener ('keypress', (e) = > {let code = e.charcode; if (! commands [code])) {return } let command = setCommand (move, commands [code]); if (command) {command (); commandStack.push (command);}}) / / set the replay button document.getElementById ('replay'). Onclick = function () {let command While (command = commandStack.shift ()) {command ();} four. Macro command

A macro command is a collection of commands that can be executed one batch at a time.

Generally speaking, there is one thing you need to do repeatedly, and every step of doing it is fixed, so we can pack up all the steps to do it, just start it, and you can complete all the steps automatically.

Requirements: to implement a script that automatically brushes copies of the game

Let MacroCommand = function () {return {commandList: [], add (command) {this.commandList.push (command);}, execute () {for (let I = 0 command; command = this.commandList [iTunes +] ) {command.execute () } let startGameCommand = {execute () {console.log ('start the game')}} let killGhostCommand = {execute () {console.log ('play strange') }} let giftCommand = {execute () {console.log ("get a reward")} let outGameCommand = {execute () {console.log ("quit the game")}} let Game = MacroCommand () Game.add (startGameCommand); Game.add (killGhostCommand); Game.add (giftCommand); Game.add (outGameCommand); Game.execute ()

We just need to add a command to the macro command column, and it automatically executes all the commands in it. We are only responsible for starting, other things do not need us to take care of, we can rest assured to do other things, waiting for it to be completed by itself.

This is the end of the content about "how to implement the command pattern of javascript design pattern". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.