JavaScript Design patterns and development Practices reading notes (9)--Command mode

Source: Internet
Author: User

Command mode : Sometimes you need to send a request to some object, but do not know who the recipient of the request is, and do not know what the requested operation is, at this time want to use a loosely coupled way to design the software, so that the request sender and the request receiver can eliminate the coupling relationship between each other.

The argument is very complex, simply to want to really do things do not call the object directly, when we give some commands, we hope that the object has been indirectly executed. The benefit of this is that you can decouple, the code can be more flexible, you can manage commands, and even perform operations such as command queuing.

Implementation Ideas

In order to achieve this effect, we need to create an interface object through a function, invoking the method of the interface object, which is the real method of invoking the object.

The following example is a general method of invoking an object directly

1 varBindclick =function(Button, func) {//two parameters one is the execution object, and the other is the executing function2Button.onclick =func;3 };4 5 varMenuBar = {6Refreshfunction(){7Console.log (' Refresh interface ') );8     }9 };Ten  One Bindclick (button1, Menubar.refresh); A  - //do not directly write Button1.click=function () {} is because in the development of frequent changes, it is cumbersome to change, after all, who triggered what events are uncertain. 

Now we use command mode to create an interface object

1 varSetCommand =function(Button, command) {//command is an interface object2Button.onclick =function(){  3Command.refresh ();//methods provided by the interface object4     }5 };6 7 varMenuBar = {8Refreshfunction(){9Console.log (' Refresh menu interface ') );Ten     } One }; A  - varCreateCommand =function(obj) {//methods for creating interface objects -     return {                      theRefreshfunction(){    - Obj.refresh (); -         } -     } + }; -  + varmenubar = CreateCommand (menubar);//Create an Interface object A  at /*it can be written or put on a prototype. - var createcommand (obj) { - this.obj=obj; - this.refresh=function () { - This.obj.refresh (); -     } in } -  to var menubar = new CreateCommand (menubar); +  - */ the  *SetCommand (button1, menubar);//The method that invokes the interface object when it fires, and the interface object calls the method of the real object. 

From this point of view and proxy mode is a bit like, is to provide an interface, internal do some processing and then call the ontology, but there is a difference, proxy mode, the proxy object is only an ontology service, and command mode, the interface object is like a black box, you can execute commands sequentially, can also revoke the command, A command may allow a different object to execute its own method, as shown in the following code:

1 varList= (function(){//interface object, because there is no universal problem, so write directly2     varArr=[];3     return {4Addfunction(obj) {5 Arr.push (obj);6         },7Executefunction(){8              for(vari=0,l=arr.length;i<l;i++){9 Arr[i].execute ();Ten             } One         } A     } - })(); -  the List.add (menubar); - List.add (headbar); - List.add (footbar); -List.execute ();

The above code is more clear, the command of the management object in an interface, can execute different objects method, equal to the director said a boot, the rest of the people can do their own thing.

Here we assume that the object has an Execute method, if the object does not have a common method, it can also add one to the object, if the object is created by new way on the prototype chain, if not through new, directly add

1 //The New Way2Menubar=NewMenubar ();3Menubar.prototype.execute=function(){4      This. Refresh (); The methods that really need to be implemented5 }6 //directly add7Menubar.execute=function(){8      This. Refresh ();9} 
Undo Action

The implementation of the undo operation is generally to add a method named Unexecude or undo to the Command object, and execute the reverse operation of execute in the method.
For example, the animation, the undo time back to the beginning of the position, it must be recorded at the beginning of the position, the point of revocation back there; if it is canvas drawing this, undo is to empty the canvas, and then the records of the command executed sequentially, except that the undo step. The realization of revocation depends on the specific situation.

Summary

Command mode is the use of an object to manage commands (the set of instructions that need to be executed), through which the interaction between the original complex objects can be made simple. It also facilitates the maintenance of code because it reduces the coupling degree.

JavaScript Design patterns and development Practices reading notes (9)--Command mode

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.